Breakout Tutorial 2
This tutorial will show you how to build a clone of Breakout  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  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.
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;
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.
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.
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.