Cryptic Capers: Best Practices for Mobile Game Development

The Game Body

After you have a great idea cooked up, you will realize that not everything you thought of can be implemented. You will notice this as you get into the grind of development.

KeyPress and KeyRelease Events

When we started our game, we wanted to get our character to move on a KeyPress event and stop on a KeyRelease event. However, no KeyRelease event existed because Flash Lite 1.1 does not support the KeyRelease event for mobile-specific keys such as Left, Right, Up, Down, or Enter. So we devised our own common method to control movements. If you haven't done so already, download and unpack the tutorial files that are part of this article and open sample file cc_file1.fla to view the code we came up with.

If you want to write the code on your own, launch Flash MX Professional 2004 and create a blank new movie with the size of 176x208. This is a standard size for all Nokia Series 60 devices. Change the player version to Flash Lite 1.1 from the Publish Settings option on the File Menu. You can also use the Mobile Device template option when creating a new movie. This enables you to view and select from the multiple Flash Lite devices available for development. (You can find more templates created by David Mannl.)

1. Create two symbols outside the Stage: a button symbol and a movie clip symbol named loop.
2. Declare a variable on the main Timeline:

dir = 0;

3. Your Button ActionScript should look like the following:

on (keyPress "<Left>") {
    dir = 1;
    tellTarget ("loop") {
        gotoAndPlay ("playLoop");
    }
}

Figure 3 shows an exact representation of the loop movie clip symbol.

Figure 3. The loop movie clip symbol

In the above example, when a left key on your mobile phone is pressed, the loop movie clip which is initially paused on the first frame, will start playing the frame labeled playLoop. The Button script will keep executing the Left Key script for as long as the left key is pressed. This also means that the Timeline in the loop movie clip will not move beyond its current frame, playLoop. However, after the left key is released, the indicator in the Timeline of the loop movie clip will move ahead and reset the root variable dir to 0 on its last frame, and then will go and stop on the first frame.

Meanwhile, the moving character keeps reading the dir variable value and moves if it is set to 1 or stops if it is set to 0. We found this to be the best implementation for key-related movements.

HitTest Functionality

Another important element that you should be aware of, because it is the most used element in all games, is the hitTest element. The hitTest element was most critical in our case as every instance on the Stage was colliding with another instance on the Stage. Open sample file cc_filel2.fla to view the complete code.

Alternately, you can also follow the explanation of a basic collision test between two objects on the Stage by looking at the following code snippet:

myWidth = getProperty ("", _width);
myHeight = getProperty ("", _height);
myX = getProperty ("", _x);
myY = getProperty ("", _y);
chX = getProperty ("_level0/1", _x);
chY = getProperty ("_level0/1", _y);
if (Math.abs(chY-myY)<myHeight/2 and Math.abs(chX-myX)<myWidth/2) {
    //hitTest successful
}

The above script checks for simple collisions or overlapping of two movie clips. Suppose that you have two movie clips named A (character) and B (trench). The collision script is present in movie clip B. The variables myWidth and myHeight stores movie clip B's width and height using the getProperty method. Similarly myX and myY stores its x and y values. chX and chY refers to the x and y values of movie clip A. Here is the script to check the condition for collision:

if (Math.abs(chY-myY)<myHeight/2 and Math.abs(chX-myX)<myWidth/2) { 

The Math class, as you might know, is used for operating your mathematical calculations. You can use one such method—Math.abs (num)—to receive an absolute number from your calculation.

In your hitTest calculation, you can use this method to find out an absolute value of the distance between movie clip A and movie clip B. Assuming that the center points in both movie clips are actually centered, their distance on the x coordinate can be calculated by arriving at the difference in their x coordinates Math.abs(chX-myX) (see Figure 4).

Figure 4. Stages of a character colliding with the trench in the game

If this value is less than half of movie clip B's width, then the two objects would be colliding on the x axis. However, colliding only on the x axis is not enough because on their y axis, the movie clips could still be far apart. Thus, when you write your if condition for collision detection, make sure that the condition checks for movie clip collision on both axes. Refer to Figure 5 for the graphical explanation.

Figure 5. The two colliding objects will need to check for a hit on both X and Y coordinates.

Timers in Games

Most games use timers to either reward players with bonuses when the game is completed within the time limit or to enable players to challenge themselves or others to compete for a high score in a time-based game.

In Cryptic Capers, although the timer is not visible to the player, it contributes to higher scores when a level is completed within the stipulated time. We prefered using the traditional Flash 4 method of calculating time. This method uses a movie clip that has a Timeline extended up to the frame rate to which you set the Flash movie. For example, if your movie is set to 12 frames per second (fps), then you can extend the timer movie clip Timeline up to frame 12. Every time the movie clip runs from frame 1 to frame 12 in your game, the movie will actually be completing a one-second run. You can store this value and increment it in a second variable. Similarly, you can declare and increment a minute variable every time your second variable reaches 60.

This method is infallible because the timer will tick according to the fps rate at which the game runs on the device. For instance, if the fps rate of your game falls to 9 on the device, the movie clip will also run at 9 fps.

Another method you can use for calculating time is the getTimer() method, which outputs the time in milliseconds since the Flash movie was opened and played.

If you want to create a timer similar to ours, open sample file cc_file3.fla and see its implementation in a time-based Flash Lite game.

Platform Compatibility Check

Platform compatibility check is important, especially when you are creating content that is supposed to run on multiple devices. The script in the sample file, cc_file4.fla, checks for the device name so that the necessary game controls can be made available to the player to play the game. The sample file cc_file4.fla contains the following script, which addresses cross-device compatibility issues:

txt = FSCommand2 ("GetDevice", "device");
if (txt >= 0) {
    if (device eq "Sony Ericsson P900" or device eq "Sony Ericsson P800") {
        gotoAndStop (2);
        //Use of joystsick
    } else {
        stop ();
//Use of num pad and joystick
    }
}

Using FSCommand2, you can detect the device on which your content is running. Based on the device type (for example, device-supporting keys or device-supporting stylus), you make the necessary controls available to the player.

Page 3 of 6

Previous Page

Next Page