Creating the playing field

We are going to create a playing field that consists of two bats and a ball. The basic aim of the game is for you to knock the oncoming ball back towards the computer AI player and try to knock the ball past him. Lets take a look at how the play field is laid out in Booty5:

Booty5 ping pong game

Download the tutorial resources from here and unzip them to a folder somewhere

Lets begin by creating a new project in Booty5 and dragging the supplied resources onto the Booty5 world tree to create the resources that are needed for this tutorial

Drag and drop two bat brushes onto the scene to create 2 bats

Select the top bat and change its angle to 180 degrees

Drag the ball brush onto centre of the canvas to create a ball at the centre

Select the ball actor and change its Velocity property to 50,300

Initialising the game

We want to set up some things when our scene is first created, we will only be setting them up once. To do this we add an action to the scenes OnCreate event handler. To do this:

Select the scene in the world tree

Scroll down to the events section and locate the event handler called OnCreate

Click in OnCreate box and enter “CreateGame(this);”, this assigns a small piece if script to be called when the scene is first created. Note that the “this” parameter refers to the scene that is being created

If you take a look at the script file common.js in the world tree you will see the following:

1

2

3

4

5

6

7

8

9

10

// CreateGame is called by the scenes OnCreate event handler

functionCreateGame(scene)

{

// Find ball, players and sound effect, we cache these resources so we don't have to search for them again

// You do not have to do this but it can help to give a little extra speed in more complex games

ball=scene.findActor("ball1",false);

player1=scene.findActor("player1",false);

player2=scene.findActor("player2",false);

bat_hit=scene.findResource("bat_hit","sound");

}

The above script function is the one that will be called when the scene is created.

Updating the game

Most games use what’s called a main loop or tick function. This is basically some kind of functionality that is called every time the game needs to update (most modern devices update at around 60 times per second or more, otherwise known as the frame rate). In order to update our game logic we need to tap into this update mechanism and insert our game logic. To do this:

Select the scene in the world tree

Scroll down to the events section and locate the event handler called OnTick

Click in OnTick box and enter “UpdateGame(this);”, this assigns a small piece of script to be called each time the scene is updated. Note that the “this” parameter refers to the scene that is being created

The scenes OnTick event is raised every time the game needs to update itself, we tap into this mechanism by responding to the OnTick event calling our own script function UpdateGame()

If you take a look at the UpdateGame() script function in common.js you will see that this is the place where our logic resides. This logic does the following:

Tracks the players finger and moves player1 to the players finger position

Keeps the ball within the scenes boundaries and resets it if it gets by a player

Controls the player2 AI opponent bat

Checks and handles collision between the bats and ball, playing a sound effect when a collision occurs

Lets take a look at the code for this function:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

// UpdateGame is called by the scenes OnTick event handler

functionUpdateGame(scene)

{

// Make player1 track players finger

vartouch_pos=scene.app.touch_pos;

player1._x=touch_pos.x;

// Check for collision between ball and players

if(ball.vy>0)

{

// Only check ball against player1 if ball travelling down screen

if(player1.overlaps(ball))

{

vardx=player1.x-ball.x;

ball.vx=-dx *6;

ball.vy=-ball.y;

bat_hit.play();

}

}

else

{

// Only check ball against player2 if ball travelling up screen

if(player2.overlaps(ball))

{

vardx=player2.x-ball.x;

ball.vx=-dx *6;

ball.vy=-ball.y;

bat_hit.play();

}

}

// Handle player2 AI

if(ball.vy<0)

{

vardx=ball.x-player2.x;

if(dx<-10)

player2.x-=difficulty;

elseif(dx>10)

player2.x+=difficulty;

}

// Keep ball within screen boundaries

if(ball.x<-512||ball.x>512)

ball.vx=-ball.vx;

// Reset ball if it gets by a player

if(ball.y<-350||ball.y>350)

ball.y=0;

}

Now hit Test to run the game, congratulations you just created your first Ping Pong game.