Breakout Tutorial 2

From SwinGame

Breakout in SwinGame

This tutorial will show you how to build a clone of Breakout [1] in Pascal using the SwinGame SDK. Breakout is the successor to Pong, making it one of the first few computer games. It took Steve Wozniak [2] four days to build the first prototype of Breakout, however in SwinGame you can make it in a couple of hours. By the end of this tutorial you will have a fully functional Breakout game, with different levels, sound effects, and completely addictive gameplay.

Creating the ball

The first thing we will create is the ball, and the logic to make it bounce around the screen. By the end of this part, we will have the ball bouncing around the screen

I’m assuming you already have the SwinGame SDK copied set up in a folder. If you haven’t already done this, make a folder called Breakout and unzip the SwinGame SDK files into it. We will be replacing most, but not all, of the code in the HelloWorld sample.

Adding resources

Firstly we need to add the ball image to the game’s resources. Copy ball.png to the Resources\Images folder. Then using your text editor, open up the GameResoures.pas file. This file loads all of the game’s images, sounds, fonts and maps into memory before beginning the game.

Scroll down to find the line which says "procedure LoadImages();" and modify the block of code to include this extra line:

procedure LoadImages();
	begin
		//TODO: Add code here to load the images you want to use
		//NewImage('NoImages', 'Ufo.png');
		NewImage('ball','ball.png');
	end;

This will create a bitmap object in memory containing the Ball image, which we can reference later by typing GameImage(‘ball’).

Global constants

Now open GameLogic.pas. Firstly we need to set up some global constants which will contain a lot of critical settings for the game to work. Scroll to the line after “SGSDK_KeyCodes;“ (it should be line 24) and add the following code:

const
	// Screen dimensions
	screenWidth = 800;
	screenHeight = 600;
	// Ball properties
	ballHeight = 20;
	ballWidth = 20;

Now we need to create a sprite object to represent the ball. Underneath the code you just typed, add these lines:

var
	ball : Sprite;	// the ball 

Initialising the ball

To make the code simpler, we will create a procedure called InitialiseBall to create/reset the ball sprite to its default position and movement vector (ie. speed & direction of movement). Under the code you just typed, add this procedure:

// Resets the ball to its default position.
procedure InitialiseBall();
begin
	ball := CreateSprite(GameImage('ball'));
	// 1/3 of the way across the screen
	ball.X := screenWidth/3-ballWidth/2;
	ball.Y := screenHeight/3-ballHeight/2;
	ball.movement := CreateVector(3,5);
  end;

The code looks complicated, but it’s fairly straight forward. The ball becomes a new sprite object with the image that we loaded into the game’s resources before. The X and Y coordinates are set so that the ball starts 1/3 of the way in from the left and top of the screen, with the ball centered at this position. Finally, the ball is given a movement vector of [3,5], meaning it moves across three pixels and down every 5 pixels every time the screen is refreshed (which is 60 times per second).

The game loop

Now we need to set up the game loop so our ball will be drawn to the screen. In GameLogic.pas, scroll down to the line beginning "procedure Main();", and change this block of code to:

procedure Main();
begin
	OpenGraphicsWindow('Breakout', screenWidth, screenHeight);
	LoadResources();
 
	// Create our objects
	InitialiseBall();
	Repeat
		ProcessEvents();
 
		// Check if the ball has hit the edge of the window
		if ball.X < 0 then
		begin
			ball.X :=0;
			ball.Movement.X := -ball.Movement.X;
		end;
		if ball.X > screenWidth-ballWidth then
		begin
			ball.X := screenWidth-ballWidth;
			ball.Movement.X := -ball.Movement.X;
		end;
 
		if ball.Y < 0 then
		begin
			ball.Y := 0;
			ball.Movement.Y := -ball.Movement.Y;
		end;
		
		if ball.y > screenHeight-ballHeight then
		begin
			ball.y := screenHeight-ballHeight;
			ball.Movement.Y := -ball.Movement.Y;
		end;
 
		// Draw the graphics
		ClearScreen(ColorBlack);
 
		// Draw the ball
		DrawSprite(ball);
		UpdateSprite(ball);
 
		// Refresh the screen 60 times per second
		RefreshScreen(60);
	until WindowCloseRequested();
 
FreeResources();
end;

There’s a lot of code here so let’s go through it step by step. Firstly the OpenGraphicsWindow call has been changed so that instead of a 640x480 window, it will use whatever the constants screenWidth and screenHeight are set to. In the Const section of the code we added before, we set these to 800x600, however you can change this to whatever values you want. (Does this mean Breakout in 1920x1080 high definition? Sure, it’s possible, provided you have a good enough monitor and graphics card)

After LoadResources() is called, we call InitialiseBall(); to create the ball and move it to the default position. Then the loop starts. This code simply checks to see if the ball is off the edge of the screen. If it is, then it will move it back in, and reverse the direction it is travelling in so it bounces off.

Breakout so far: just a ball bouncing around the screen

Use the build script to compile and run your game. If all is well, you should see a ball bouncing around the screen. It’s not all that impressive, but it’s still a very important part of the game.

Summary

In this tutorial, we created our ball sprite, and made it bounce around the window. In the next tutorial, we will add the player’s paddle, so we can have some control over where the ball bounces.

List of Tutorials

• Getting Started
• The Ball
• The Player
• The Bricks
• Scoring and Levels
• Lives