Lesson: How to make PONG

Note: this tutorial is out of date. You can use the concepts from this tutorial, combined with the tutorials listed below to recreate Pong.

• http://gamefroot.com/knowledgebase/move-it-physics-movement-and-the-constantly-loop/
• http://gamefroot.com/knowledgebase/crash-collision-detection/
• http://gamefroot.com/knowledgebase/remotely-trigger-other-scripted-game-objects/

You can also remix this game to see how it was made: http://gamefroot.com/game/super-bounce-2-player-4-2/

 

The Gamefroot Advanced Behaviors editor is truly a remarkable tool. Once you familiarize yourself with the basics of how it works, your mind starts to imagine new possibilities for entirely unique gameplay.

I, on the other hand, wanted to use it to make a game that had been released 40 years ago.

Pong is one of the first video games ever created. It’s a tennis simulation, with two paddles on either side of the screen that can be moved up and down by their respective players, with each player trying to bounce the ball past their opponent’s paddle to score a point.

It was an extremely simple game, but I wanted to see if I could accurately recreate it using the Gamefroot game creator. I wanted to prove that Gamefroot can be used to create all kinds of different games, not just platform games.

 

Laying down the framework

So the first thing I did was fire up the game creator, and started thinking about the ways I could remove all platform game elements from my level, and then build up all the game elements from Pong.

I painted down a box outlined with crates that measured 16 tiles x 11 tiles on the inside. This is the size of the Gamefroot game screen (768 x 512 pixels, or 16 x 11 tiles.) The inside of this box will be where all of the action happens in my Pong game. I then painted down a long platform underneath that box for my player to run around on.

 

 

Then I had to determine a way to remove the player from the screen, and prevent the screen from moving when the player moves. Since it is impossible to have a game without a player character (the game creator doesn’t allow it), I had to find a way to hide the player. The easiest way to do this is by creating an item with an advanced behavior to move the camera up and away from the player. So I placed down a green potion item (any item would do), and I gave it these advanced behaviors:

 

 

When this advanced item is created at the start of the game, it sets the camera 400 pixels higher than normal. (-400 moves the camera up by 400 pixels, and +400 would move it down by 400 pixels). The behavior blocks here also hide the score, and hide the health bar and lives counter, which strips pretty much everything away and leaves us with a blank game screen that just shows the game background.

 

Making the background

I figured I should design a nice custom background to make it feel like a retro game of pong, so I whipped this image up in Photoshop and uploaded it as a custom background (it’s based off some images of the arcade game I had seen on the internet).

 

The Paddles

At this point the next things to do were to create the blocks that move up and down on the sides of the screen, and the ball that bounces around. I made some custom item tiles: 1 for the ball, and 2 for the top half and bottom half of the side block (I kept them in the same green style as the background.) I uploaded them and placed them in my level.

This is what the game preview looks like so far:

Everything looks nice, but neither the paddles nor the ball actually do anything – they just sit there. So the next step was to get some more advanced behaviors going on with these items to get them to move around. (I also found out that I had to move the crates on the right-hand side one extra tile across so that they weren’t visible.)

To make the paddles move around, I had to link them to the movement of the player (since the player is the only thing that is affected by the keyboard controls). By having the player run around on a platform beneath the game screen, I could track his horizontal motion and apply that to the paddle’s vertical motion – whenever the player runs left, the paddle moves up, and whenever the player runs right, the paddle moves down. (I did want to use the up and down keys for this, but the player can’t move vertically unless he has a jetpack, and then he is affected by gravity so his falling motion is a lot faster than his rising motion.)

Here’s how the side paddles track the players motion (these behaviors are for the top half of the paddle):

When this item is first created, it sends the message “track player” to itself, and then when it receives this message it sets its own Y position (vertically) to match the X postion of the player (horizontally). And then it sends itself the same message in 10 milliseconds. This is called a loop, because it will continue to run this behavior on a loop until it is stopped by something else. If this wasn’t run as a loop, the Y position of this item would only get updated once and then it would freeze in place.

The bottom half of the paddle has essentially the same advanced behaviors, but it adds 48 pixels to its Y position so that it is not overlapping the top half of the paddle (48 pixels = 1 tile).

 

I applied these behaviors to both paddles in the game, and gave it a test run. I found that if I kept moving the paddles down, the player would keep walking to the right, and would eventually fall off the platform and die. To remedy this, I built a wall on the 10th tile across the platform to trap the player in a box. Then I previewed the game again, and the paddles were confined to the perfect range of motion and wouldn’t move off the screen.

 

Bouncing Ball

Building the ball was the most complicated part of making Pong. Here is an overview of all the behaviors the ball item contains:

 

It can seem a bit overwhelming at first, but the entire thing was built piece by piece, with new parts added over time. Each part adds extra functionality to the ball – here’s a breakdown of the things the ball does:

• Start ball: Randomly move either left or right, and with a random vertical speed. This makes the game unpredictable every time the ball resets.
• Bounce off walls: When the ball is in the wall zone then it changes direction (tells ball to go up or down).
• Bounce off left and right paddle: When the ball is in the paddle’s location, then it changes direction (tells ball to go left or right).
• Go left and Go right: When the ball is told to go left or right, it increases its speed as the score goes higher.
• Score count: For each second that passes, a point is added to the score. (The score is used to increase the speed of the ball.)
• Flash: When the ball bounces off the walls or paddles, then its opacity increases briefly in a flash.
• When I leave sight of the gamer: When it leaves the screen then it restarts the ball at the middle and at original speed. It also changes the score numbers at the top of the screen.
• The loop message: Instead of every different behavior chain having its own loop, I made a single loop which the other behavior chains can listen to – that means less processing power is used, so the game should run smoother.

 

Reversing the Right Paddle

I realized that the gameplay was a little boring with both paddles moving the same way. I decided to mix it up by having the right side paddle work in reverse – so when one paddle is travelling up, the other is travelling down. With a bit of tweaking and testing, I found this was much more enjoyable. Here’s how I did it:

This behavior sets the position of the paddle at the bottom of the screen by setting Y to 432, but then it subtracts how far accross the screen the player is from its position. So if the player is at the left side of the screen, then his X position will be small, and the Y position will only have that small amount subtracted from it, which leaves the paddle still near the bottom of the screen. As the player walks further to the right, his X position increases, and as that increased number is subtracted from the Y position of the paddle, the paddle’s Y position gets smaller and the paddle gets closer to the top of the screen.

 

The Finished Product

I really enjoyed making this little game, and I think it can be pretty fun to play as well!

 

To learn more about using advanced behavior items, check out the lessons at Gamefroot Support:

https://gamefroot.zendesk.com/forums/20759342-using-advanced-behaviours

 

 

Have fun!

Dave