Back | Home

PONG Game-Editor Tutorial

Thanks to the contributions of Makslane the creator of Game-Editor and jazz_e_bob, Just4Fun and ingsan from the Game-Editor forums for helping me build this tutorial. This is the result of a team effort...

The stage is set, I just want my paddle to move left and right. What steps do I need to do next?

Here is my stage so far:

There are 4 actors.
Each actor will have its own animation.

Background (Infinite Actor)
Ball
Wall
Paddle



To launch the ball.

Right Click Ball
Select Actor Control
Add Event
Create Actor
Add Action
Script Editor
Type:
angle = 45;
diretional_velocity = 8;
Click Add
Click Immediate Action
Click Close
Click Close
Click Game Mode and the ball will launch at 45 degrees at 8 pixels per frame.



To make the paddle follow the mouse.

Right Click Paddle
Select Actor Control
Add Event
Create Actor
Add Action
Follow Mouse
Click Add
Click Immediate Action
Click Close
Click Close
Click Game Mode and the paddle will now follow the mouse.



To make the ball collide and physically respond with everything except for the background.

Set x axis in Follow Mouse action to make paddle with horizontal moves only.

To make ball not collide with background:

Right Click bakcground

Select Actor Control
Add Event
Create Actor
Add Action
Collision State
Event Actor, disable
Add
Click Immediate Action
Click Close
Click Close


To make ball moves right:

Right Click ball

Select Actor Control
Add Event
Collision (Any Actor)
Add Action
Physical Response
Add
Click Immediate Action
Click Close
Click Close

From Makslane
Get this simple pong at:

http://game-editor.com/examples/pong.zip

Image files and a sound

http://www.trajectorylabs.com/gameEditorFiles.ZIP

This site here has lots of cool free seamless textures for backgrounds:
http://www.noctua-graphics.de/english/freetex_e.htm

Add sounds without scripts:

Right-click ball
Actor Control
Add Events
Collision
Any Actor
Add Action
PlaySound (Select your blink.wav)
Add Immediate Action
Close
Close

Note: put your blink.wav file in data directory into .ged file directory and call: PlaySound("data/blink.wav", 1, 1);

Question:
How does one keep the ball, and paddle from going off the stage? or How do you test an object's position in order to keep it within certain boundaries?

Answer:
You can run this script when the paddle actor is drawn:

int range = 75;
if (x > range)
x = range;
if (x < -range)
x = -range;

Changing the value of "range" changes your range.

Later we will add code - get the ball through the goal and the score goes up.

Add a score counter:

Add Actor "Score"

Actor Control
Text
Text = 000000
File = numbers.png http://www.trajectorylabs.com/numbers.png
(resized for Pocket PC scale from Moon Defender tutorial)
Initial font char: 0
Number of font chars: 10
ok
close

Oops "Score" shows behind wall
Fix that by:

Actor Control
Z Depth - slide to the right
Close

Your project should look like this now (that extra block is optional right now):

http://www.trajectorylabs.com/gameEditorScore.gif

OK so the puck has gone off the screen (Out of Vision) so how can we tell if it went through the goal or past the paddle? And how do we increment the score counter?

Let's just see what it's "Y" position was when it left the screen. Since I am making a Pocket PC game the screen coords are 240X (width) by 320Y (height) and the center 0,0 is at the center of the screen. So if the puck goes off the screen and its Y coordinate is less than -160 we know we made a goal!

So here we go to add this:

Right-click the puck

Events Add
Out of Vision
Add Action
Script Editor

if (puck.yscreen < -160)
{
Score.textNumber = Score.textNumber + 1;
DestroyActor("puck");
};

Add
Immediate Action

This is a simple C 'if" control-flow statement. If the expression is true the statement(s) within the curly brackets will be executed:

if (expression)
{
statement;
};


Add an annoying block moving around in our way
Remember that block graphic from the zip file? Add that as Actor "block" to our Pong game.

Then let's create a path for it:

Path
Add

Name: path1
Frames: 300

Draw

Draw a path like shown or however crazy as you like:



Close
Close

Right-click "block" and for Path select path1

Also the ball and paddle are nicer from the Breakout tutorial, I have resized the paddle:


http://www.trajectorylabs.com/racket.bmp
http://www.trajectorylabs.com/ball.bmp (be sure to adjust horizontal and vertical frames when adding the ball to get the animation effect).

I have also added a little play in the paddle to get more power out of it when hitting the ball, it works great:

On paddle
Actor Control
Events Add
Draw Actor
Script editor

Add this script:

if (y > 165)
y = 165;
if (y < 130)
y = 130;

Also change the Follow Mouse property to both axis.

Give the player 5 lives
When the ball goes through the goal he gets a point and gets to start over with the same ball, when it slips by the paddle he loses a life.

Add an actor "life" and use the ball graphic for it. Clone it 4 times and place the images like this:

We end up with:
life.0
life.1
life.2
life.3
life.4

Next we just need to Create a new ball once the current one goes off the stage and turn off the lives as they go...

We'll need a "GAME OVER" graphic to turn on at the end of the game also. It would be nice to save high scores too.

At time of death:

if(lives == 0)
{
DestroyActor("Event Actor");
CreateActor("gameover", "text", "no parent", "no path", -117, -12, true);
}
else
{
if(lives==3) DestroyActor("liveActor3");
else if(lives == 2) DestroyActor("liveActor2");
else if(lives == 1) DestroyActor("liveActor1");
lives--;
}

Note the CreateActor command, it is creating a text actor called "gameover" and putting it on the screen. This is all you need to do when the game ends.

To create a complete text actor that allows you to type anything, you need an entire game font.

For this example I will use the font BlazingStar2

To get that font try here:

http://www.zone38.net/font/#bitmap
Hit the link:
"Download codeman38's Bitmap Font Writer collection!"

If you want to make a font yourself try this:
Bitmap Font Writer
http://www.stefan-pettersson.nu/site/bmpfont/

There is also a gamefont in the Asteroids demo as Makslane mentioned earlier.

All you need to do to create a text actor that says anything you want is:

Add Actor
Name it
In Actor Control select "Text"

Text: Game Over
File: your gamefont file
Initial font char: the first character of the file (BlazingStar2 is a ! just enter an exclamation mark)
Number of Font Chars: 63 (for BlazingStar2)
Hit Ok and you will see your text

NOTE 1: BlazingStar2 has little white pixels in the upper left of each font cell, I think this is affecting transparency so you may want to paint those out. I didn't try it yet.

NOTE 2: I believe also you can edit the text actors text property at runtime if you want some info that changes to display (like our score counter).

Add a global variable as an integer:
lifenum

Then add global code:
lifenum = 5;

As far as I can tell this defines it and initializes it in Game Editor.

In C you can define and initialize a variable at the same time like this:
int lifenum = 5;
That type of code usually goes near the beginning of your program. I am guessing Global Code in GE is like this, like startup code.

An integer is just a whole number between -32768 and 32767
If you want outside of that rane you use a long integer, I'm not sure if Game Editor has that. We are ok for this game within that range anyways.

Is this too much info about C? Shocked Sorry, you need to learn it to get the real potential out of GE! Very Happy

I have edited the white pixels out of BlazingStar2 font and resized it for Pocket PC:

http://www.trajectorylabs.com/BlazingStar2.png

It looks like fonts work the same way as images, The transparency color is the color of the first pixel at the very upper left of your image. It looks much better now.

Remember for this one to use:

Initial font char: !
Number of font chars: 63

Basic final steps for a working Pong Hockey game that:

1. Tracks scores
2. Track lives
3. Has a moving block that interferes with play
4. Ends with a game over screen when lives run out

We'll just have to save "levels" and "saving scores" for another demo. It's just way too involved for this, plus this is getting too long.

HERE WE GO:
I figured out a MUCH SIMPLER method to track scores and misses. Instead of using the Out of Vision method (you will have to delete this) I use two Region Actors like shown (green rectangles):

One is called "goal" and one is called "miss" so the ball just hits it either way and a collision event occurs making the coding alot simpler.

Make sure you have a Global Integer Variable called lifenum
Make sure in global code you initialize lifenum to 5 like this:
lifenum = 5;

Create a Region Actor "goal"
place it above the goal like in the image link above
Right-click
Actor Control
Events Add
Collision Event
Actor puck
Add Action
Script editor

add this code:

Score.textNumber = Score.textNumber + 1;
DestroyActor("puck");
CreateActor("puck", "ball", "no parent", "no path" 0, 0, true);

Add
Immediate Action
Close
Close

Now create the Region Actor "miss"

Follow the steps above but place it below the paddle like shown.

Add this script:

DestroyActor("puck");
if(lifenum == 0)
{
CreateActor("gameover", "text", "no parent", "no path", -60, 0, true);
}
else
{
if(lifenum == 5) DestroyActor("life.4");
else if (lifenum == 4) DestroyActor("life.3");
else if (lifenum == 3) DestroyActor("life.2");
else if (lifenum == 2) DestroyActor("life.1");
else if (lifenum == 1) DestroyActor("life");
CreateActor("puck", "ball", "no parent", "no path", 0, 0, true);
lifenum--;
};

As you can see the "goal" script increments the score counter, destroys the ball and creates a new ball in the middle of the stage.

The "miss" script destroys the ball, shows GAME OVER if that was the last ball and deletes the life counters as lives are lost. It also creates new balls if it was not the last life.

I have only been learning this about 9 days so hope you have enjoyed my demo, I know I am am rookie! Thanks for all of your help!!!

NOTE: I hope my code has no typos, sorry if it does, the Script Editor really needs Cut and Paste!

NOTE: You can save scripts to a standard "c" file which can be read in text editor. Cut, copied pasted etc...

Wasn't that fun? I love Game-Editor, coming soon... VINLAND

ALL DONE!!!
Now go make PONG games!!!

See our new game site