Breakout Tutorial 3

From SwinGame

This page contains a Tutorial. Tutorials are designed to walk you through the development of a small game.
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.


Warning: You must have completed the previous tutorial(s) to go through this tutorial


We are now going to create the paddle which the player will be able to use to control the ball. In this version of the game we are going to use the keyboard as the controller for the paddle, however you can make it follow the mouse if you wish.

Contents

Adding resources

First we need to open up GameResources.pas again, like in the previous tutorial, and add the paddle image: 

NewImage('paddle','paddle.png');

Also make sure paddle.png is in the Resources\Images folder. If you unzipped all the images from the zip file at the start of the tutorial into the Resources\Images folder, everything will work.

Setting up the Player

We need to add some player constants. These constants will tell the game a few crucial details, like how many lives the player should have by default, and the size of the paddle. We have also included a playerY constant as the Y coordinate of the paddle is fixed (we can’t move the paddle up and down). In the "const" section of GameLogic.pas, add the following constants: 

// The Y value of the player
playerY = 500;
	// Number of bricks per row
	bricksPerRow = 7;
	// Number of rows
	bricksRows = 3;
// Default number of lives
defaultLives = 5;
// Paddle properties
paddleWidth = 150;
paddleHeight = 20;

Now we need a record for the player. Above the var section, add the following code: 

type
	// playerType: used for players.
	playerType = record
		lives : integer;			// lives remaining
		level : integer; 			// the player’s level
		score : integer;			// the player’s score
		playerSprite : Sprite;		// paddle sprite
		bricksRemaining : integer;	// Bricks remaining
	end;

Finally, we need to create an instance of this type in memory. Under the var heading, add the following line of code: 

player : playerType;

Initialising the Player

We’re going to create two functions to initialize the player. Firstly InitialisePlayer will reset the player’s health, score, level etc. to the defaults, as well as create the player’s sprite. This will call another function MovePlayerToDefaultPosition, which is fairly self explanatory.

Place this code after the variables have been declared (var block) but before procedure Main(): 

procedure MovePlayerToDefaultPosition();
  begin
	player.playerSprite.X := (screenWidth div 2) -(paddleWidth/2);
	player.playerSprite.Y := playerY;
  end;
  
  // Resets the player in memory to the default values
  procedure InitialisePlayer();
  begin
	player.lives := defaultLives;
	player.score := 0;
	player.level := 1;
	
	player.playerSprite := CreateSprite(GameImage('paddle'));
	MovePlayerToDefaultPosition;
	player.bricksRemaining := bricksPerRow * bricksRows;
	
  end;

Drawing the Paddle

We now need to update the game loop so it draws the paddle. In the Main procedure, before InitialiseBall(), add this line of code: 

InitialisePlayer();

Now in the game loop (the section between the Repeat and Until statements), add the following code after the ProcessEvents line: 

// Check if the user wants to move.
	  if IsKeyPressed(VK_LEFT) then
		player.playerSprite.Movement.X := -9
	  else if IsKeyPressed(VK_RIGHT) then
		player.playerSprite.Movement.X := 9
	  else
		player.playerSprite.Movement.X := 0;
 
 
 
	  // If the player's paddle is out of bounds, move them back, and stop them.
	  if player.playerSprite.X < 0 then
		begin
			player.playerSprite.X := 0;
			player.playerSprite.Movement.X := 0;
		end
	  else if player.playerSprite.X > (screenWidth-paddleWidth) then
		begin
			player.playerSprite.X := screenWidth-paddleWidth;
			player.playerSprite.Movement.X :=0;
		end;

This code is fairly simple. If the player is pressing the Left key, then the paddle will start moving to the left, and if they press the Right key, the paddle will move to the right. The next series of if statements checks to make sure that the paddle is inside the window.

Move down to the end of the code which checks if the ball has hit the bottom of the screen (it should finish with an end; statement) and add the following code: 

// Check if the ball has hit the paddle
	  if HaveSpritesCollided(ball, player.playerSprite) then
		begin
			ball.Movement.Y := -ball.Movement.Y;
		end;

This code checks to see if the ball has hit the paddle. If it has, it will bounce off.

Finally we need code to actually draw the paddle to the screen. After the line ClearScreen(ColorBlack); , add these lines of code: 

// Draw the player
DrawSprite(player.playerSprite);
UpdateSprite(player.playerSprite);
Breakout so far: Now you can control the ball by moving the paddle!

When you compile and run the game now, you should see a paddle. You can move the paddle to the left or right with the arrow keys. The ball will bounce off the paddle.

Summary

In this tutorial, we created the player's paddle, and added code so that it can be controlled with the arrow keys. In the next tutorial, we will create the bricks.

List of Tutorials

Retrieved from "http://swingame.com/wiki/index.php/Breakout_Tutorial_3"