Flash Lite 2.0 Game Tutorial – Ball Toss

Gaming today is one of the most popular means of entertainment on mobiles. A consumer may be exposed to a number of platforms to play games on, just as a developer may have to develop games. Amongst the various platforms available, Flash Lite is gaining momentum amongst developers worldwide as a very effective means of developing and delivering games.

This article is the first in the series of creating an effective game using Flash Lite 2.0. We will talk about a very simple and addictive game called “Ball Toss” and study its code from start to finish. I will assume that you have at least some Actionscript knowledge. If you are a beginner, some of the techniques may seem new. However I will try covering the basic Flash Lite 2.0 “Actionscript” syntax which includes the use of variables, functions, key Listeners and basic programming logic.

Through this tutorial, I hope that mobile game developers will observe the ease with which one can create games using Flash Lite 2.0.

Story v/s Game

Most developers like to build a story around their game because it gives them a base to build the game-play and add immense eye-candy. If you look at a game like “Zuma”, the basic game concept is to match and remove similar colored balls. However this simple game has been woven into a story in a temple of the Sun God! A point to notice here is, the essence of the game is not lost and the game only gets more attention.

“Ball Toss”, the game that we are going to be talking about today is a similar game which has great game-play and can have a story woven into it.

Let’s Start the Game

We will directly jump into the implementation of the game. It is written in Flash Professional 8.0 with the publishing profile set to Flash Lite 2.0.

  1. Start with organizing your Flash file into layers consisting of a “Content” layer, an “Actions” layer and a “Labels” layer as shown in Figure 1.1. This helps you to filter and check your content matter during debugging.
  2. Once you have your layers prepared, you can start putting in your graphics and code. We will start with the game code directly.
  3. The code should always be organized in blocks known as functions. This helps you while debugging.
Figure 1
Figure 1.1

Initializing the variables

The first thing to do is define some variables. I have started by creating an “init” function. This function will contain all the variables that I will use during the game. The purpose behind doing this is –

  1. You keep a track of all the variables that are declared and their purpose.
  2. Incase you need to change the initial value of the variable; you don’t need to go hunting for it all over your code.
  3. You can identify & edit the variable type if you need to.

function init(){

tileW = tileH = 16;

map1 = [[0,0,0,……]];’

jump = false;

die = false;

end = false;

level = 1;

blockCount = 0;

mx = 0;

my = 0;

ballPos = new Object();

}

Amongst the variables you can see that a multidimensional array has been declared. You might have worked with simple arrays before; they are no different from the multidimensional ones. For instance -

map = [10,11,12,13,14];

The array “map” is a simple array with 5 values. The first element of map[0] is equal to 10, the second element of map[1] is equal to 20 and so on. An array can hold numbers, strings, characters, objects, and even another array as an element. When an array holds another array as an element, the array is known as a multi-dimensional array.

Map1 = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],

[0, 0, 1, 1, 1, 1, 1, 1, 0, 0],

[0, 0, 1, 1, 1, 10, 1, 1, 0, 0],

[0, 0, 0, 1, 1, 1, 1, 0, 0, 0],

[0, 1, 1, 1, 1, 1, 1, 0, 0, 0],

[0, 1, 1, 1, 1, 1, 1, 0, 0, 0],

[0, 0, 0, 0, 0, 1, 1, 0, 0, 0],

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]];

The array “map1” is a multi-dimensional array with 8 values. The first element of map1[0] is equal to another array itself of value [0,0,0,0,0,0,0,0,0,0].

In our game code, the purpose behind “map1” array is to set the tiles on stage for the first level of the game. Incase you need to create more levels you can continue naming the arrays as “”map2”, “map3” and so on.

ballPos = new Object();

While initializing our variables, we also create an Object. An Object is like a container that can contain certain items. An Object helps to keep variables organized and also helps the programmer by reducing the long path references.

Building the Game Map

function buildMap(map){

this.createEmptyMovieClip(“container”, this.getNextHighestDepth);

this.container._x = 20;

this.container._y = 60;

var mapW = map[0].length;

var mapH = map.length;

var d = 0;

for(var x=0; x<mapH; x++){

for(var y=0; y<mapW; y++){

var val = map[x][y];

this.container.attachMovie(“block”, “block”+x+”"+y, d++);

this.container["block"+x+""+y]._x = y*_root.tileW;

……

}

When you start building the game the first thing you will want to do is set the map of tiles on the game area as shown in Figure 1.2.

Figure 2
Figure 1.2

The function “buildMap” checks through the array and places the tiles on the screen. If you look at the code you will notice that we begin by creating an empty Movieclip “container” and then placing the tile movie clips within this empty Movieclip. This container will also store the ball Movieclip.

Keeping all your game elements in a single Movieclip is a good practice because if you ever wish to shift the positions of all the objects, you don’t need to shift them individually. You can just move the “container” Movieclip and the rest will move automatically.

Each tile is assigned certain values, such as its x position in the array(x), its y position in the array(y), its name and its type. It is important that each tile has its own set of properties and values so that when you need to refer to the tiles during the game, these values will help make the reference faster.

Key Listeners

Key listeners are objects that listen to or detect a key action. All key listeners when defined have to either be an Object or a Movieclip. Key listeners can detect both the “keyUp” and the “keyDown” events.

keyL.onKeyDown = function(){

if(not jump){

mx = 0;

my = 0;

if(Key.getCode() == 40)my = 1;

if(Key.getCode() == 38)my = -1;

if(Key.getCode() == 37)mx = -1;

if(Key.getCode() == 39)mx = 1;

jumpBall();

}

};

Key.addListener(keyL);

When a keyDown event occurs, the listener tracks the last key pressed, and the program detects it using the Key.getCode() method. If the key codes equal 37(left arrow), 38(up arrow), 39(right arrow) & 40(down arrow), the “mx” or “my” variables are set to corresponding values and the jumpball() function is called.

Jumping the ball

If you look at the “move” function, you will notice that we refer to 2 variables – mx and my. These refer to the new path the ball will follow when a key is pressed. For instance, if the left key is pressed, mx = -1 and my = 0 and if the right key is pressed then mx = 1 and my=0 and so on.

However the “move” function will only be called when the ball is jumping, and this is reflected in the onEnterframe function as shown in Figure 1.3.

Figure 3
Figure 1.3

When you press any of the arrow keys, the “jump” function first checks for the immediate next tile type. If the tile type is “0” – which means dissolved tile, then the game ends.

However if the tile type is “1” – which means solid tile, then there are a number of events that will happen -

  1. The solid tile that the ball was already resting on before jumping will start dissolving
  2. The solid tile that the ball was already resting on has its type set to “0”
  3. The ball’s x or y properties either increments or decrements by 1 depending upon the key pressed.
  4. We also have a variable named “blockCount” that keeps a check on the number of dissolved tiles. When all the tiles are dissolved successfully and the ball reaches its starting point safely, the game ends with the user winning.

The Moving Ball Logic

When the ball starts jumping, it also starts moving. For doing this, we first increment or decrement the x and y position of the ball depending upon the key pressed. This movement will continue until the ball lands on the new tile.

this.container.ball._x += mx;

this.container.ball._y += my;

We next try calculating the actual position of the ball on the grid by dividing the ball’s position by the tile size, assuming the ball and the tiles have their pivot points placed in the center.

var newX = this.container.ball._x/tileW;

var newY = this.container.ball._y/tileH;

With the new tile position in hand, we now check how far the ball is from the new tile. If the distance for both the x and the y positions is 0, we then assume that the ball has landed on the new tile. We now halt the jumping of the ball.

var offsetX = Math.floor(newX) – newX;

var offsetY = Math.floor(newY) – newY;

Conclusion

When the game ends, either with a win or a loss, you have to make sure that you clear the memory of the key listener as well as the duplicate movie clips.

The game is not processor intensive. You can download the sample files and transfer it on the device for an actual look and feel of the final version.

This game can easily be classified under tile based games, and keeping this game as a base, one can easily prepare more tile based games with different concepts. If you have any more questions about “Ball Toss” or about gaming in general, please feel free to mail me your comments.

Download the source here.

Comments

comments

Leave a Reply

Your email address will not be published.


*