I am going to show an example of writing a cross-plaform game for GP2X/GP2X F-200 and Windows Mobile. I’ll test it out on a GP2X F-200, Palm Treo 750W and AT&T 8125 smartphone. It will also be playable on Windows and Linux, too.
Game Editor
I’m going to use a tool called Game Editor, by Makslane Rodriguez. You can download Game Editor here. You can follow the example with the demo version. You will need a licensed version to export for the handheld platforms. You can buy Game Editor Professional here. (You only need the full version if you want to try exporting the game yourself.)
The example game: Goalie Trials
The example game I’m going to build is Goalie Trials. At first, I’m going to keep it pretty simple.
Here is the game story:
The player controls a football/soccer goalkeeper and must block shots from team members to earn a spot on the team.
Here is a description of how the game is played:
A computer controlled attacker will move around the screen and take shots on goal by firing a ball down the screen. The player will try to move the goalkeeper in front of the ball. If the ball hits the goalkeeper the shot is blocked. If the ball hits the net, a goal is scored.
The computer opponent will be confined to moving along a path on the top half of the screen.
There will be a net on the bottom of the screen, centered, with a space on either side of the goal for balls to miss.
The player controlled actor will be confined to the area above the goal on the bottom half of the screen.
There will be a score of goals and saves on the screen.
Technically Speaking: Target Hardware
There are some technical details we need to consider about the target hardware. Most importantly is screen resolution. Here is the screen resolution of my three target devices:
- GP2X/GP2X F-200, 320×240
- Palm Treo 700w/750w, 240×240
- AT&T 8125/8525, 240×320
The GP2X and 8125 have the same screen size, but the screens are horizonal and vertical, respectively. There are several ways to solve this problem. For simplicity, I will will make sure the game focuses on a 240×240 area of a larger 320×320 playing area.
Enough chatter, let’s get started…
Game Editor
Start Game Editor. It should look something like this.
The Actor Control window is open by default.
The white rectangle is the view. This is the size of the area which is visible on screen. You can click on the white rectangle border of the view and see it’s properties in the Actor Control. It should like something like this.
We don’t need the Actor Control window, yet. You can close the Actor Control for now.
I’m not going to really discuss Game Editor features in this article. If you want to know more about Game Editor, try the online documentation for Game Editor.
Game Configuration
First I’m going to show how to set the game view size and choose a background color for the game. I’m going to use a 320×240 resolution for development since the proportions will work well on my monitor. Later on we can change the view size for 240×320 screens before we export the game.
Let’s begin our game by doing the following:
- Create a new game in Game Editor (File->New Game).
- Open the Game Properties window (Config->Game Properties).
- Change the Game Resolution to 320×240.
- Click the Game Background Color and choose a grassy color for the field.
Your Game Properties should look like this:
Click OK to save the properties.
Game Editor should look something like this.
You can actually run this empty game right now from Game Editor. Just click Game Mode from the menu. It’s not very exciting right now, but it’s a functioning program already. When you are done, press ESC or click the close window button to go back to the edit view.
Adding Actors
Game Editor calls game objects “actors”. If you are old-school, you may know “actors” already as “sprites”.
In Goalie Trials, there are 4 obvious actors: attacker, goalkeeper, ball and net. There are few more which are not as obvious: goals label, goals count, saves label and saves count. The last 4 are what we think of as the score. They are actors, too.
To help speed things along, I already created images for the attacker, goalkeeper (from behind), and a three-step animation of a rolling soccer ball.
I used a tool called Basic 2D Character Sprite Kit from Xpounded.
Here is an image of the soccer net, which I did with Paint Shop Pro.
Save these two images locally so you can add them to your game.
Lets create the net first. From the menu, choose Add Actor. Enter the name “Net” and click Add. A new Actor appears on the screen with the default Pac-y image. Right-click on the Pac-y and choose Actor Control.
Remember the Actor Control window? We’re going to be using it a lot now.
Click Add Animation. Then click File and browse to select the soccer-net.bmp file which you downloaded and click Open. The window should look like this.
Click OK.
Click on the Net Actor and drag it so that it touches the bottom of the view, and is centered like this.
Now let’s add the attacker. From the menu, choose Add Actor. Enter the name “Attacker” and click Add. A new Actor appears on the screen with the default Pac-y image. Right-click on the Pac-y and choose Actor Control.
Click Add Animation and browse to select the soccer.bmp file which you downloaded. Enter 8 as the number of horizontal frames. This will divide up the image strip into 8 equal pieces. You should see these pieces cycling in the preview image. Your animation window should look like this.
Click OK.
This new animation has more images than we need. We are going to add an animation sequence with only the images we need.
In this case, we only want the first image frame for our attacker. The first image frame is numbered 0. The number 0 is the first item in a list in some programming languages. You can think of this as the offset from the first item in the list. The first items offset is zero. The second item is offset by 1. The third item is offset by 2. Or, you could just think of it as the item you want minus 1. Whichever trick helps you remember.
To add an animation sequence, click Add Sequence. Make sure “soccer” is the value for animation. Enter a sequence name of “Attacker”. In the Frames list, just enter “0” (zero). It should look like this.
Click OK.
Make sure “Attacker” is selected for the Animation in the Actor Control window.
Remember the attacker was going to be restricted to the upper half of the game area? This was described in the game description above.
Move the Attacker to the upper Left area of the View. Your game should now look like this.
Now let’s add the goalkeeper. From the menu, choose Add Actor, again. Enter the name “Goalkeeper” and click Add. Right-click on the Pac-y and choose Actor Control.
Click Add Animation and browse to select the soccer.bmp file, again. Enter 8 for the number of horizontal frames.
Click OK.
Now, we are going to add an animation sequence with only the images we need. We only want the second image frame for our goalkeeper.
To add the animation sequence, click Add Sequence. Make sure “soccer” is the value for animation. Enter a sequence name of “Goalkeeper”. In the Frames list, just enter “1” (one).
Click OK.
Make sure “Goalkeeper” is selected for the Animation in the Actor Control window.
We remember from the game description that the goalkeeper was going to be restricted to the lower half of the game area. Move the Goalkeeper Actor to the lower middle area of the View; just above the Net Actor. Your game should now look like this.
Next we are going to add the soccer ball as an Actor. The soccer ball has three frames of it’s animation in the soccer.bmp file. Follow the same process to create a new Actor called “Ball”. Add an animation with the soccer.bmp as the File. Set the horizontal frames to 8. Then add a new animation sequence called “Ball”. This time, enter “3;4;5;” as the Frames. Click OK. Make sure the Animation is set to “Ball”.
Place the ball actor anywhere outside of the View. When the game starts, the ball should not be visible on the screen.
The game should now look like this.
The final Actors, we need are the text for the scores. We are going to add 4 more Actors. We will want the score to be displayed like this near the top of the screen.
saves 0 goals 0
To create the text for “saves”, click Add Actor and set the name to “Saves”.
Instead of adding an animation, we are going to click Text. Enter “saves” as the text. Click New Font. Choose either at True Type Font or an image file. (If you need a True Type Font, try downloading a free font.) You can choose whatever font you like. Just consider that it must be readable on small screens.
I chose Blue Stone 16pt white. Here is what my New True Type Font dialog looks like.
Click OK. Click OK, again. (NOTE: I actually ended up setting the font size to 14pt.)
Create another Actor for “goals” using the same font. Place both Actors near the top of the screen, with room for the scores. Your game should look something like this.
Now we need to create two new Actors to hold the score values. Create two more Actors: saveCount and goalCount. Set the text in both to the number zero. Place them close to their respective labels. (Make sure you place the right one next to each label!) The game should look like this.
You should be able to run this in Game Mode and see all the actors in place.
Looks promising, no? Still not very exciting, though? We’ll lets change that.
Adding Some Action
From the original game description, the attacker will move back and forth across the top of the screen. Let’s add some simple movement to the attacker. We’ll make the attacker move to the Right across the screen until he bumps into the Right edge of the screen. Then he will change direction and move Left until he bumps into the Left edge of the screen. He will move back and forth in this fashion until the game ends.
In order for this to work, we have to make sure that the attackers Actor starts off inside the View. Otherwise he will collide with the edge of the screen out of view and we’ll never see him again when he runs off in the wrong direction.
The first thing to do is make sure that he appears inside the View. Click on your Attacker Actor to view it in Actor Control. If Actor Control is not visible, Right-Click on Attacker and choose Actor Control.
Next to Events, click Add and choose Create Actor. Click Add Action and choose Script Editor. Enter the following:
x = view.x + 15;
Click OK, then Immediate Action.
If you run the game in Game Mode now, you should see the Attacker is just inside the Left edge of the view when the game starts.
Now we want to make the Attacker proceed back and forth across the screen.
Next to Event, click Add then choose Draw Actor. Click Add Action, then choose Script Editor. Enter the following:
x += 5;
Try running the game in Game Mode. You should see the Attacker run across the screen and… disappear. Let’s fix that.
We are going to use a variable to control the direction the Actor moves. In Actor Control, next to Event, click Edit. Then choose Draw Actor, then Script Editor. Click on Variables, on the bottom of the screen. Click Add. Enter “attackerDirection” as the new variable name. Make sure Integer and Global are selected. Click Add and Close to complete the new variable creation. Change the script text to the following.
x += attackerDirection * 5;
Click OK and Immediate Action.
The attackerDirection variable will control the direction the Attacker travels. To change the direction of Attacker, we only need to change the sign of attackerDirection.
Now we need a way to change the direction variable when the Attacker reaches the edge of the screen. We are going to create two Collision events; one for each side of the screen. To do this, we need to create something for the Actor to collide with. We we create two invisible regions on each side of the screen.
Click Add Actor. Enter RightSide as the Name. This time we are going to set the Type to Wire Frame Region. Then click Add.
A new green rectangle appears on screen. This new Actor has Top, Bottom, Left and Right edges, but does not appear on screen in Game Mode. Drag the rectangle so that it’s Left side is just inside the View area. Your game should look like the following.
Do the same thing for another Wire Frame Region called LeftSide. Arrange it so that it’s Right edge is just inside the Left edge of the view. The game should now look like the following.
Now that we have something for the Attacker to collide with, we need to create the Collision events. When Attacker runs into RightSide or LeftSide, we want to change attackerDirection by multiplying it by -1. This will change it’s sign.
Make sure Attacker is chosen in Actor Control. Next to Event, click Add and choose Collision. Next to On, choose Left Side. For Of Actor, choose RightSide. This will create an event when Attacker touches the Left side of the Wire Frame Region called RightSide.
Now click Add Action and choose Script Editor. Enter the following.
attackerDirection *= -1;
Click on Add, then Immediate Action. Then click Close.
Add another Collision event for the Right Side of the Wire Frame Region named LeftSide. Enter the same text in the Script Editor.
If you try to run the game now, the Attacker will not be moving. This is because attackerDirection has no value, yet. Actually it has the value of zero. Each time the Actor is drawn, the x value adds zero. So the Actor never moves.
Lets make sure attackerDirection starts off with a value of 1. To do this, make sure Attacker is chosen in Actor Control. Click on Edit, then choose Create Actor and then Script Editor. Change the text be like this.
attackerDirection = 1; x = view.x + 25;
Click OK and then Immediate Action.
To see the changes, choose Game Mode. Attacker moves back and forth on the screen now.
Get some Control
Now lets get some control over the goalkeeper. When the player presses the Left and Right we want to move the goalie Actor.
Make sure the Goalkeeper is selected in Actor Control. We are going to add Key Down events to Goalkeeper for the Left and Right keys.
Click Add then Key Down. For Keys, press the Left key once. The word “left” appears in the field. The window should look like this.
Click Add Action. Choose Script Editor. Enter the following text.
x -= 5;
Click Add, Immediate Action and then Close.
We are going to create another action for pressing the Right key. Click Add then Key Down. For Keys, press the Right key once. The word “right” appears in the field. Click Add Action. Choose Script Editor. Enter the following text.
x += 5;
Click Add, Immediate Action and then Close.
If you run the game in Game Mode now, you can move the goalkeeper back and forth.
Let’s have a Ball
The missing pieces are the soccer ball and scoring. As the attacker moves across the screen, we want him to randomly kick a ball down screen.
Make sure the Attacker is selected in Actor Control. Next to Events, click Edit, choose the Draw Actor event and choose the Script Editor.
When a random value is generated, we are going to place our Ball Actor where the Attacker is and start it moving down screen. We do this by setting the x and y value for Ball and then giving it a vertical velocity value. Let’s try this.
x += attackerDirection * 5; if ( rand(5) <= 1) { Ball.x = x; Ball.y = y - 5; Ball.yvelocity = 5; }
Try it out by running it in Game Mode. The Attacker moves accross the screen randomly kicking the ball, but it never reaches the bottom of the screen. This isn’t what we would expect the ball to do. We need to make sure the ball can reach the bottom of the screen. Let’s edit the Attacker’s Draw Actor Event, again.
This time, in the Script Editor, click Variables on the bottom of the window. Click Add and enter a new variable named “canKick” which is an Integer and is Global. Back in the Script Editor, change the code to look like this.
x += attackerDirection * 5; if ( canKick == 1 && rand(5) <= 1) { canKick = 0; Ball.x = x; Ball.y = y - 5; Ball.yvelocity = 5; }
This code will check to make sure the variable canKick says we can kick the ball. If we can kick, and a random value is right, we switch canKick to a value which will keep Attacker from kicking again, and then send the Ball downscreen. If you would run the game now, the Attacker would never kick the ball. We need to start the variable canKick with a value and we need a way to change it when we don’t want the Attacker to kick.
To give an initial value to canKick, we need to edit the Attacker’s Create Actor Event. Make the code in Script Editor look like this.
attackerDirection = 1;
canKick = 1;
x = view.x + 25;
When the Ball goes off screen, we want to switch canKick back so that the Attacker can kick again. To do this, we’ll create an new Actor which is a Wire Frame Region, just below the bottom of View. Add the new Wire Frame Region and call it “offscreen”. Arrange it and resize it to look this this.
Now we need to create an event to change the value of canKick when the Ball collides with the offscreen region.
Make sure Ball is selected in Actor Control. Next to Events, click Add and choose Collision. Change the Collision Event to Top Side of actor “offscreen”. Then click Add Action and choose Script Editor. In Script Editor enter the following.
canKick = 1; yvelocity = 0;
This will stop the ball from moving while out of vision, and will set the canKick flag back so that the Attacker can kick again.
If you run the game now, it will behave a little more like you would expect it to.
Keeping Score
When the ball hits the top of the net, the attacker scores a goal. But, when the ball hits the goalie, the player scores a save. To make this work, we need to add two collision events to the Ball Actor.
First we will add an Event to increase the goal score when the ball hits the top of the net. Add a new Collision event for Ball. Set the Collision Event to Top Side of Net. In Script Editor add the following.
goalCount.textNumber += 1;
This will increase the goal score by one each time the ball hits the top of the net. If you run it, though, you will see the score increase by more than one sometimes. This is because the ball can touch the top of net for more than one event cycle. To avoid this we need to do something to the ball. For this example, we are just going to move the ball 500 pixels to the left and set it’s velocity to zero. This will make the ball “disappear” when it collides with the net. But we also need to make sure we set the canKick flag so the Attacker can kick again. This was being handled by the offscreen region, but that collision cannot occur once the ball hits the net. Edit the net collision event and change the Script Editor to look like this.
goalCount.textNumber += 1; x -= 500; yvelocity = 0; canKick = 1;
Try that out to see how it works.
Finally, we need to add a Collision Event to the Ball Actor for any side of the Goalkeeper. Enter the following into the new events Script Editor.
saveCount.textNumber += 1; x -= 500; yvelocity = 0; canKick = 1;
Try the game again. The scoring should work.
Exporting for Handhelds
(NOTE: To export for platforms other than Windows or Linux, you need to have the license version of Game Editor)
To get ready to export for handhelds, I am going to change the Game Properties and make sure the playable area is within the 240×240 area which is common to all three target platforms.
Click on Config and choose Game Properties. In the Game Properties window, change the game resolution to 240×240 Pocket PC. You can also give your game a Game Title like “Goalie Trials” and change the Mode to Full Screen.
When you click OK, the white View rectangle will no long be centered over the game area. Move the view so that it touches the bottom of the net image and has an equal amount of space on either side.
With the view centered, move the LeftSide and RightSide regions so they overlap just slightly inside the view. The game should look like this.
I also did a little clean up and rearranging to suit my taste.
I mentioned before that my Palm Treo 750w has a screen resolution of 240×240. So the current game configuration should play on my Palm with no changes. Creating a deployable game executable is called Exporting in Game Editor.
To export for my Palm Treo 750w, I simply click File->Export. In the Export Game window, I choose “Windows Mobile-based Smartpone Executable” as the Export Type. You can change the name of the file, I named my file “GT-240×240” so I could tell what resolution the executable is. You can also change the save location by clicking “select” and navigating to the location where you would like the file written. When you are ready, click export.
I find that Game Editor warns me about the resolution.
I know my Palm Treo 750w has the right resolution and file export type, so I continue by clicking Yes. Now I just need to transfer the file to my phone.
Let’s export to GP2X. First we need to change the game resolution back to 320×240 an make sure the View is arranged correctly for game play. Nothing else should change at this point. The game play area should correctly arranged. Follow the steps to export the file as “GP2X Executable”.
Finally, let’s change the resolution to 240×320 so that we can export for smartphones with that resoluton. Follow the steps to change the resolution, arrange the view and export as a smartphone executable. I arranged my view to look like this.
Now, we just need to test it out.
Go have some fun!
Conclusion
This turned out to be a really long blog post. There are some things I would add to make this game more interesting. Hopefully you will find this article interesting enough to try out Game Editor and make some games of your own.
If you find any errors, let me know.
More information:
- Game-editor, cross platform game development tool
sir i don’t understand how to set velocity to zero to control the score increment by more than one.could you solve my problem?
great tutorial!
well done!