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.

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:

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:

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

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:

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:

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.

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.