Using Cordova to package an OpenFL HTML5 application for Android – Part 2: The actual OpenFL project

In this article we’re going to create a nifty little game – we then package as a HTML5 application using Cordova though that’s what the next article in this series is about.

Prerequisites:

A PC running Windows 7 or above – for this blog post I’ve used a virtual machine running Windows 7 32bit
OpenFL 7.1.2 – at the time of writing 8.8.0 is the latest, you can surely use too but I’ve my reasons to stick with the older version
Lime 6.2.0
Haxe 3.2.1
FlashDevelop
FireFox or another recent HTML5 capable browser
Have read the first article in this series for a better understanding what this is all about

Because we’re going to develop a mobile game and myself being a nostalgist I decided for something most of you might remember: Snake! While Nokia didn’t invent the game concept themselves it became pretty popular since it shipped with their 1997 monochrome phone 6110 and numerous later models. It can be said that 1997 was the birth of mobile gaming on a phone.

The following image shows the Snake game in action. Please note it was taken out of a photo from a Nokia 3210.

cordovaNokiaSnake
Like many games at that time, as well as almost two decades before and still today they take advantage of a well-known technology called tiles. Let’s dive a bit back in time to the glory era of e.g. the Nintendo Entertainment System – NES in short. Back then, even high-end workstations and of course video game consoles neither had the processing power nor the memory nowaday’s average cellphones have. Let me give you some numbers. The NES has 2KB of system RAM while a typical cellphone has around 2GB. That’s a million times the RAM! Of course that’s not the only factor to consider. The video RAM and the game cartridges themselves were pretty limited too. As you can imagine game developers in the 90s had to find some clever ways to save memory while making graphic intense games at the same time. So instead of using huge full screen bitmaps, the game world is composed out of reusable small tiles.

I’m afraid all of the above sounds a little abstract, so let me give you an example. Here’s a screen taken from Super Mario 3. Can you make out individual tiles? No worries if you can’t – simply click on the image to overlay a grid.

As you should see now, there’s a lot of repetition. The ground Mario’s standing on is 15 times the same tile, the little pyramid to his left is made out of 6 instances of the same tile and you can surely see the re-using of tiles in the cloud or the green pipes.

I can almost hear the question: ‘Why do we take the tile bassed approach at all? We aren’t low on system resources nowadays!’. You’re right of course! The answer to this question is simple: it has some advantages like e.g. easy collision detection of game objects and it’s easy to understand and implement! It’s a solid concept available for decades.

Now that you know a bit more about tiles let’s start with our project!

Fire up FlashDevelop and create a new OpenFL project, name it SnakeMobile.

cordovaFlashDevelop

Snake’s gameplay is rather simple. You have to move the snake around the screen and collect dots that appear randomly while avoiding to hit the solid borders of the playfield. As soon as you collect a dot, the snake will grow longer thus making the game harder to play because you have to be careful not to hit the snake itself.
If you take a look back at the original Snake game at the top of this article, you instantly notice we need some graphics that represent the snake, the dot and the borders. If you want to be creative, you can draw your own graphics! Here’s the graphics I made for this article.
snakeTiles

This image contains all of the tiles we use in our game bundled as a single file. Each tile is 64×64 pixels in size and simply placed next to each other. This is called a texture-atlas. With a little bit of imagination you can see that e.g. the star to the right will serve as our dot and the thin-lines are actually part of our on-screen maze.
On a Nokia cell phone at this time, the game was controlled using the phone’s keypad buttons. Nowadays cellphones typically haven’t got any real physical keys instead of power and volume buttons. We use it’s touchscreen! So additionally we need visual representations of directional keys. Take these:

We could have put those inside the texture-atlas too but I wanted to keep things simple. This time the graphics are individual files.
Simply right-click those five graphics and store them inside your projects assets/img folder.
In FlashDevelop’s Project Manager you can right-click that folder and select Explore to open Windows Explorer and find the folder’s location on your harddrive.

cordovaFlashDevelopPM

Let’s start coding! Head back to the Project Manager and double-click src/Main.hx

cordovaFDMain

to bring up the Main class – the place for all of our code.

package;

import openfl.display.Sprite;
import openfl.Lib;

/**
 * ...
 * @author 
 */
class Main extends Sprite 
{

	public function new() 
	{
		super();
		
		// Assets:
		// openfl.Assets.getBitmapData("img/assetname.jpg");
	}

}

package;

import openfl.display.Sprite;

import openfl.Lib;

/**

* ...

* @author

class Main extends Sprite

{

public function new()

{

super();

// Assets:

// openfl.Assets.getBitmapData("img/assetname.jpg");

}

First we need to import some more of OpenFL’s APis we take use of inside our game.

import openfl.Assets;
import openfl.display.BitmapData;
import openfl.display.Bitmap;
import openfl.events.MouseEvent;
import openfl.geom.Matrix;
import openfl.geom.Rectangle;
import openfl.geom.Point;

import openfl.Assets;

import openfl.display.BitmapData;

import openfl.display.Bitmap;

import openfl.events.MouseEvent;

import openfl.geom.Matrix;

import openfl.geom.Rectangle;

import openfl.geom.Point;

Next we need to declare the class variables – those will be accessible from any function inside our Main class. The following code goes between class Main extends Sprite { and public function new()

	private var textures:Array<BitmapData> = [];
	private var gameGrid:Array<Array<Int>> = [[]];
	private var theMap:Array<Array<Int>> = [[]];
	private var tileWidth:Int = 0;
	private var tileHeight:Int = 0;
	private var numTilesHorizontal:Int = 14;
	private var numTilesVertical:Int = 22;
	private var container:Sprite = new Sprite();
	private var startX:Int;
	private var startY:Int;
	private var gameOver:Bool;
	private var oldTime:Int;
	private var delay:Int = 350;
	private var direction:Int = 0;
	private var oldDirection:Int=0;
	private var snakeLength:Int;
	private var oldXPosition:Int = 0;
	private var oldYPosition:Int = 0;
	private var currentXPosition:Int = 0;
	private var currentYPosition:Int = 0;
	private var tail:Array<Point> = [];

private var textures:Array<BitmapData> = [];

private var gameGrid:Array<Array<Int>> = [[]];

private var theMap:Array<Array<Int>> = [[]];

private var tileWidth:Int = 0;

private var tileHeight:Int = 0;

private var numTilesHorizontal:Int = 14;

private var numTilesVertical:Int = 22;

private var container:Sprite = new Sprite();

private var startX:Int;

private var startY:Int;

private var gameOver:Bool;

private var oldTime:Int;

private var delay:Int = 350;

private var direction:Int = 0;

private var oldDirection:Int=0;

private var snakeLength:Int;

private var oldXPosition:Int = 0;

private var oldYPosition:Int = 0;

private var currentXPosition:Int = 0;

private var currentYPosition:Int = 0;

private var tail:Array<Point> = [];

As soon as the Main class is instantiated (which usually happens after OpenFL’s built-in HTML5 preloader finished loading), it’s constructor is called. So move down to super(); inside public function new()
Here we’re going to to do a lot of things!
– Figure out the screen’s dimensions
– Initialize our graphics and scale them according to the screen’s dimensions
– Add the virtual keypad
– Add touch listeners to the keypad
– Set up the playfield
– Put the graphics on screen
– Start the game 😉

So let’s start by figuring out the screen’s dimensions!

        var sw:Int = Std.int(Lib.application.window.width * stage.window.scale);
        var sh:Int = Std.int(Lib.application.window.height * stage.window.scale);

1 2	var sw:Int = Std.int(Lib.application.window.width * stage.window.scale); var sh:Int = Std.int(Lib.application.window.height * stage.window.scale);

As you’ve probably guessed Lib.application.window.width returns the width of the screen in pixels – in this case it’s the size of the browser window our game runs in. But what’s stage.window.scale good for? Isn’t window.width enough? No! Depending on the hardware, some browsers internally use a bigger resolution than the device’s physical resolution. This has to do with something called devicePixelRatio and is surely a topic for an own article. Just take my worth, we need to calculate our screen’s dimension using this formula to get sharp looking graphics.

		tileHeight = Std.int(sh / numTilesVertical);
		tileWidth = tileHeight;
		addChild(container);

tileHeight = Std.int(sh / numTilesVertical);

tileWidth = tileHeight;

addChild(container);

tileHeight is the height of an individial tile. We determine it’s size by dividing the screen’s height by the number of tiles we want to have in a single row. Because our tile is quadratic, we can make tileWidth the same as tileHeight afterwards.

		var masterTexture:BitmapData = Assets.getBitmapData("img/snakeTiles.png");
		var texture:BitmapData;
		var scale:Float = tileHeight / 64;
		var mat:Matrix = new Matrix();
		var rect:Rectangle = new Rectangle();
		rect.width = tileWidth;
		rect.height = tileHeight;

		for (a in 0...15)
		{
			texture = new BitmapData(tileWidth, tileHeight);
			mat.identity();
			mat.translate(-(a * 64), 0);
			mat.scale(scale, scale);

			texture.draw(masterTexture, mat, null, null, rect);
			textures.push(texture);
		}

var masterTexture:BitmapData = Assets.getBitmapData("img/snakeTiles.png");

var texture:BitmapData;

var scale:Float = tileHeight / 64;

var mat:Matrix = new Matrix();

var rect:Rectangle = new Rectangle();

rect.width = tileWidth;

rect.height = tileHeight;

for (a in 0...15)

{

texture = new BitmapData(tileWidth, tileHeight);

mat.identity();

mat.translate(-(a * 64), 0);

mat.scale(scale, scale);

texture.draw(masterTexture, mat, null, null, rect);

textures.push(texture);

}

This bit of code instantiates our texture-atlas as a BitmapData object out of which we copy the individual tile graphics and store them in the textures array for later usage.

The last visual thing on screen will be our virtual keypad. Add the following lines:

		var dPadXPos:Int = Std.int(sw * 0.15);
		var dPadYPos:Int = Std.int(sh * 0.75);
		var dPadButton:Sprite;
		var bmp:Bitmap;	
		var desiredWidth:Int;
		var desiredHeight:Int = Std.int(sh / 10);
		var spacing:Int = Std.int(desiredHeight / 2);
		
		masterTexture = Assets.getBitmapData("img/keyUp.png");
		scale = desiredHeight / masterTexture.height;
		desiredWidth = Std.int(scale * masterTexture.width);

		texture = new BitmapData(desiredWidth, desiredHeight, true, 0x00000000);
		mat.identity();
		mat.scale(scale,scale);
		texture.draw(masterTexture, mat);
		dPadButton = new Sprite();
		bmp = new Bitmap(texture);
		dPadButton.addChild(bmp);
		dPadButton.x = Std.int(dPadXPos - dPadButton.width / 2);
		dPadButton.y = Std.int(dPadYPos - dPadButton.height - spacing);
		dPadButton.name = "keyUp";
		dPadButton.addEventListener(MouseEvent.MOUSE_DOWN, handleKey);
		dPadButton.alpha = 0.5;
		addChild(dPadButton);

		masterTexture = Assets.getBitmapData("img/keyDown.png");
		texture = new BitmapData(desiredWidth, desiredHeight, true, 0x00000000);
		mat.identity();
		mat.scale(scale,scale);
		texture.draw(masterTexture, mat);
		dPadButton = new Sprite();
		bmp = new Bitmap(texture);
		dPadButton.addChild(bmp);
		dPadButton.x = Std.int(dPadXPos - dPadButton.width / 2);
		dPadButton.y = Std.int(dPadYPos + spacing);
		dPadButton.name = "keyDown";
		dPadButton.addEventListener(MouseEvent.MOUSE_DOWN, handleKey);
		dPadButton.alpha = 0.5;
		addChild(dPadButton);

		desiredWidth = Std.int(sh / 10);
		masterTexture = Assets.getBitmapData("img/keyLeft.png");
		scale = desiredWidth / masterTexture.width;
		desiredHeight = Std.int(scale * masterTexture.height);
		texture = new BitmapData(desiredWidth, desiredHeight, true, 0x00000000);
		mat.identity();
		mat.scale(scale,scale);
		texture.draw(masterTexture, mat);
		dPadButton = new Sprite();
		bmp = new Bitmap(texture);
		dPadButton.addChild(bmp);
		dPadButton.x = Std.int(dPadXPos - dPadButton.width - spacing);
		dPadButton.y = Std.int(dPadYPos - dPadButton.height / 2);
		dPadButton.name = "keyLeft";
		dPadButton.addEventListener(MouseEvent.MOUSE_DOWN, handleKey);
		dPadButton.alpha = 0.5;
		addChild(dPadButton);

		masterTexture = Assets.getBitmapData("img/keyRight.png");
		texture = new BitmapData(desiredWidth, desiredHeight, true, 0x00000000);
		mat.identity();
		mat.scale(scale,scale);
		texture.draw(masterTexture, mat);
		dPadButton = new Sprite();
		bmp = new Bitmap(texture);
		dPadButton.addChild(bmp);
		dPadButton.x = Std.int(dPadXPos + spacing);
		dPadButton.y = Std.int(dPadYPos - dPadButton.height / 2);
		dPadButton.name = "keyRight";
		dPadButton.addEventListener(MouseEvent.MOUSE_DOWN, handleKey);
		dPadButton.alpha = 0.5;
		addChild(dPadButton);

var dPadXPos:Int = Std.int(sw * 0.15);

var dPadYPos:Int = Std.int(sh * 0.75);

var dPadButton:Sprite;

var bmp:Bitmap;

var desiredWidth:Int;

var desiredHeight:Int = Std.int(sh / 10);

var spacing:Int = Std.int(desiredHeight / 2);

masterTexture = Assets.getBitmapData("img/keyUp.png");

scale = desiredHeight / masterTexture.height;

desiredWidth = Std.int(scale * masterTexture.width);

texture = new BitmapData(desiredWidth, desiredHeight, true, 0x00000000);

mat.identity();

mat.scale(scale,scale);

texture.draw(masterTexture, mat);

dPadButton = new Sprite();

bmp = new Bitmap(texture);

dPadButton.addChild(bmp);

dPadButton.x = Std.int(dPadXPos - dPadButton.width / 2);

dPadButton.y = Std.int(dPadYPos - dPadButton.height - spacing);

dPadButton.name = "keyUp";

dPadButton.addEventListener(MouseEvent.MOUSE_DOWN, handleKey);

dPadButton.alpha = 0.5;

addChild(dPadButton);

masterTexture = Assets.getBitmapData("img/keyDown.png");

texture = new BitmapData(desiredWidth, desiredHeight, true, 0x00000000);

mat.identity();

mat.scale(scale,scale);

texture.draw(masterTexture, mat);

dPadButton = new Sprite();

bmp = new Bitmap(texture);

dPadButton.addChild(bmp);

dPadButton.x = Std.int(dPadXPos - dPadButton.width / 2);

dPadButton.y = Std.int(dPadYPos + spacing);

dPadButton.name = "keyDown";

dPadButton.addEventListener(MouseEvent.MOUSE_DOWN, handleKey);

dPadButton.alpha = 0.5;

addChild(dPadButton);

desiredWidth = Std.int(sh / 10);

masterTexture = Assets.getBitmapData("img/keyLeft.png");

scale = desiredWidth / masterTexture.width;

desiredHeight = Std.int(scale * masterTexture.height);

texture = new BitmapData(desiredWidth, desiredHeight, true, 0x00000000);

mat.identity();

mat.scale(scale,scale);

texture.draw(masterTexture, mat);

dPadButton = new Sprite();

bmp = new Bitmap(texture);

dPadButton.addChild(bmp);

dPadButton.x = Std.int(dPadXPos - dPadButton.width - spacing);

dPadButton.y = Std.int(dPadYPos - dPadButton.height / 2);

dPadButton.name = "keyLeft";

dPadButton.addEventListener(MouseEvent.MOUSE_DOWN, handleKey);

dPadButton.alpha = 0.5;

addChild(dPadButton);

masterTexture = Assets.getBitmapData("img/keyRight.png");

texture = new BitmapData(desiredWidth, desiredHeight, true, 0x00000000);

mat.identity();

mat.scale(scale,scale);

texture.draw(masterTexture, mat);

dPadButton = new Sprite();

bmp = new Bitmap(texture);

dPadButton.addChild(bmp);

dPadButton.x = Std.int(dPadXPos + spacing);

dPadButton.y = Std.int(dPadYPos - dPadButton.height / 2);

dPadButton.name = "keyRight";

dPadButton.addEventListener(MouseEvent.MOUSE_DOWN, handleKey);

dPadButton.alpha = 0.5;

addChild(dPadButton);

Here we’re re-using the masterTexture BitmapData object we created earlier, replace it by the appropriate bitmap out of our assets folder and scale it according to the screen dimensions.
Out of this newly created texture we create individual buttons for up, down, left and right, give them an unique name, assign an eventListener to each one and finally add them to the displaylist – so we can see them on-screen. The eventListener will capture if you put your finger on the touchscreen and as soon as we created it’s callback function move the snake.

One important thing is still missing: the game area. Since it’s a tile-based game it follows a regular grid. Please take a look back at the screen shot of Super Mario 3 and overlay the grid. As you can see, there are 15 tiles horizontally and 11 vertically – each tile having the same size in pixels.
If we want to rebuild the pyramid to the left of Mario we could do something like this. As we can see it’s composed out of six tiles. Let’s find out the position – in tiles – of the top-most part by simply counting the blocks, starting at 0. If you count correctly, it’s 7 tiles from the top and 0 from the left.
In pseudo-code:
pyramidPart1.positionX=0
pyramidPart1.positionY=7

The next part of the pyramid is directly below:
pyramidPart2.positionX=0
pyramidPart2.positionY=8

To shorten this a bit, we could construct the whole pyramid by the following lines of code:
pyramidPart1.positionX=0
pyramidPart1.positionY=7
pyramidPart2.positionX=0
pyramidPart2.positionY=8
pyramidPart3.positionX=1
pyramidPart3.positionY=8
pyramidPart4.positionX=0
pyramidPart4.positionY=9
pyramidPart5.positionX=1
pyramidPart5.positionY=9
pyramidPart6.positionX=2
pyramidPart6.positionY=9

I guess I don’t need to mention that this is a whole lot of work and very confusing. There’s a way more elegant way. Instead of storing each tile’s position in individal variables, we’re using a two-dimension array.
Getting back to the pyramid in Super Mario 3, we could do something like this (in pseudo-code):

levelData=
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
1,0,0,0,0,0,0,0,0,0,0,0,0,0,0
1,1,0,0,0,0,0,0,0,0,0,0,0,0,0
1,1,1,0,0,0,0,0,0,0,0,0,0,0,0
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0

If you count the numbers horizontaly & vertically, you’ll realize it resembles the number of tiles from Super Mario – 15 & 11. If you take an even closer look – beside a lot of 0, there’s 5 times the 1! With a little bit of imagination again, you’ll even realize that it resembles the shape of the pyramid! So just imagine this: if we loop over that two-dimensional array and as soon as we discover a 1 we put a pyramid tile on the screen. But where to put it? We can simply figure this out too! Let’s say a single tile from Super Mario is 16 x 16 pixels in size. Now look at the array and find the top-most 1. You’ll find out that it’s at position 7 vertically and 0 horizontally. Hmhm, sounds familiar! If we then go and multiply this number by the size of a tile (16), we have our screen position!
That’s bascially what we’re going to do now. We’re creating a two-dimensional array of numbers, which are actually references to the textures array we created in the beginning.
Add this lines of code:

		gameGrid = [
					   [3, 7, 7, 7, 7,  7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 10, 7, 7, 7, 7,  4],
					   [8, 0, 0, 0, 0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  8, 0, 0, 0, 0,  8],
					   [8, 0, 0, 0, 0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  8, 0, 0, 0, 0,  8],
					   [8, 0, 0, 0, 0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  8, 0, 0, 0, 0,  8],
					   [8, 0, 0, 0, 0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  8],
					   [9, 7, 7, 7, 0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  8],
					   [8, 0, 0, 0, 0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  8],
					   [8, 0, 0, 0, 0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  8],
					   [8, 0, 0, 0, 0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0, 0, 7, 7, 7, 11],
					   [8, 0, 0, 0, 0,  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  8],
					   [8, 0, 0, 0, 0,  8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  8],
					   [8, 0, 0, 0, 0,  8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  8],
					   [8, 0, 0, 0, 0,  8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,  0, 0, 0, 0, 0,  8],
					   [6, 7, 7, 7, 7, 12, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7,  7, 7, 7, 7, 7,  5]];

		var bmp:Bitmap;
		for (a in 0...gameGrid.length)
		{
			for (b in 0...gameGrid[0].length)
			{
				bmp = new Bitmap(textures[gameGrid[a][b]]);
				bmp.x = b * tileWidth;
				bmp.y = a * tileHeight;
				container.addChild(bmp);
			}
		}

		container.x = Std.int(sw / 2 - container.width / 2);
		container.y = Std.int(sh / 2 - container.height / 2);

gameGrid = [

[3, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 10, 7, 7, 7, 7, 4],

[8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 8],

[8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8],

[9, 7, 7, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8],

[8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8],

[8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 7, 11],

[8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8],

[8, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8],

[6, 7, 7, 7, 7, 12, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 5]];

var bmp:Bitmap;

for (a in 0...gameGrid.length)

{

for (b in 0...gameGrid[0].length)

{

bmp = new Bitmap(textures[gameGrid[a][b]]);

bmp.x = b * tileWidth;

bmp.y = a * tileHeight;

container.addChild(bmp);

}

container.x = Std.int(sw / 2 - container.width / 2);

container.y = Std.int(sh / 2 - container.height / 2);

As outlined above, we create a two-dimensional array called gameGrid and store references to our textures – which ultimately designs our playfield.
If you still don’t get the picture, no worries! I’m here to help you!
I’ve overlayed a screenshot of our future playfield onto the two-dimensional array from the code snippet above.
cordovaArrayOverlay And for an even better understanding, here is our texture-atlas with the corresponding texture numbers used in the array.
cordovaTextureAtlasNumbered
Next step is looping through the array and instantiate a new Bitmap for each number we find, use the appropriate texture out of the textures array and put this Bitmap inside the container Sprite. Finally we center the container Sprite on screen.

We’re almost ready with our constructor function. We just need to add another eventListener, which will update the game, a call to a function which resets the game and lastly remove some garbage we don’t need anymore.

		resetGame();
		addEventListener(Event.ENTER_FRAME, updateGame);
		masterTexture.dispose();
		texture = null;
		masterTexture = null;

resetGame();

addEventListener(Event.ENTER_FRAME, updateGame);

masterTexture.dispose();

texture = null;

masterTexture = null;

That’s it for the constructor. You might think now would be a good time to check out what we did so far. If you’re going to compile the game, the debugger will moan! Why? Yes, we didn’t add the callBack functions yet.

Simply add this three empty functions for now. We’ll work on them later.

	private function handleKey(e:MouseEvent):Void
	{

	}
	
	private function updateGame(e:Event):Void
	{

	}

	private function resetGame():Void
	{

	}

private function handleKey(e:MouseEvent):Void

{

}

private function updateGame(e:Event):Void

{

}

private function resetGame():Void

{

}

Voilá! NOW is the time to test what we did! First we need to make sure that we’re targeting HTML5 though. Take a look at FlashDevelop’s tool bar and set the two drop-down boxes to Debug and html5 respectively.

Afterwards hit CTRL + Return.
If you followed carefully – and everything went well – you should be presented with a screen like this:
cordovaFireFoxSnake

Not too bad, isn’t it? I’d recommend getting yourself a cup of coffee now. You deserve a break!
Let’s work on the empty functions we created earlier. Every game needs some sort of start point. That’s the purpose of resetGame(). It’ll reset the class variables to their default values upon start of the game and in case you hit something solid during play and the game should restart.

		startX = 11;
		startY = 7;
		oldXPosition = 0;
		oldYPosition = 0;
		currentXPosition = startX;
		currentYPosition = startY;
		snakeLength = 3;
		direction = 0;
		oldDirection = 0;
		tail = [];
		gameOver = false;

startX = 11;

startY = 7;

oldXPosition = 0;

oldYPosition = 0;

currentXPosition = startX;

currentYPosition = startY;

snakeLength = 3;

direction = 0;

oldDirection = 0;

tail = [];

gameOver = false;

These are the most basic variables our game uses.

startX startY	This is the position in tiles, our snake will start to move from
currentXPosition currentYPosition	These keep track of the snake’s position during the game
oldXposition oldYPosition	A backup of the previous two
snakeLength	The length of the snake in tiles. This number increses if you collect dots
direction	This variable stores the direction the snake is moving to. It’s an integer from 0-3, where 0 means up, 1 means right, 2 means down and 3 means left
oldDirection	Again a backup of the snake’s direction
tail	An array that keeps track of the tail pieces following the snake.

The resetGame() function isn’t complete though.

		theMap = [];
		for (a in 0...gameGrid.length)
		{
			theMap[a] = [];
			for (b in 0...gameGrid[0].length)
			{
				theMap[a][b] = gameGrid[a][b];
			}
		}

theMap = [];

for (a in 0...gameGrid.length)

{

theMap[a] = [];

for (b in 0...gameGrid[0].length)

{

theMap[a][b] = gameGrid[a][b];

}

Here we’re creating a duplicate of our gameGrid array – why this? During the game, we need to change the array. For example if we spawn a dot the player should pickup, we need to insert a 14 – which actually is a reference to the dot’s texture inside the textures array. If we were to restart the game later because the player lost the game, there would be no way to restore the gameGrid to it’s original state because it’s partly overwritten. That’s why during the game we’re working with it’s duplicate theMap.
A few lines are missing. Add these:

		theMap[currentYPosition][currentXPosition] = 13;
		gimmeADot();
		updateMap();
		oldTime = Lib.getTimer();

theMap[currentYPosition][currentXPosition] = 13;

gimmeADot();

updateMap();

oldTime = Lib.getTimer();

As I said we’re modifying the array. Here we set the value of the snake’s current position inside the array to 13. This is the texture number of the snake’s body pieces inside the textures array.
gimmeADot() and updateMap() are functions we’ll work on next. oldTime is used for calculating the speed of the snake.

If you remember, the goal of the game is to pick up dots – which are actually stars in our case. Upon start of the game and as soon as you collect one the game needs to spawn a new dot.

	private function gimmeADot():Void
	{
		var randomX:Int;
		var randomY:Int;
		do
		{
			randomX = randomRange(0, numTilesHorizontal);
			randomY = randomRange(0, numTilesVertical);
		}
		while (theMap[randomY][randomX] != 0);
		theMap[randomY][randomX] = 14;
	}

	private function randomRange(minNum:Int, maxNum:Int):Int
	{
		return (Math.floor(Math.random() * (maxNum - minNum)) + minNum);
	}

private function gimmeADot():Void

{

var randomX:Int;

var randomY:Int;

{

randomX = randomRange(0, numTilesHorizontal);

randomY = randomRange(0, numTilesVertical);

}

while (theMap[randomY][randomX] != 0);

theMap[randomY][randomX] = 14;

}

private function randomRange(minNum:Int, maxNum:Int):Int

{

return (Math.floor(Math.random() * (maxNum - minNum)) + minNum);

}

That’s what we’re doing here. We loop over the theMap array at random positions and check if it’s free – 0. If it is we set it’s value to 14 – again a reference to the star’s texture inside textures.
randomRange is a helper function which returns a random integer between the two numbers you feed it with.
randomRange(0, 7); – will return a whole number between 0 and 7 – 3 for example.

As the game progresses, the graphics on-screen must change! If you move the snake to the left, it’s visible position changes. That’s what the updateMap() function is good for.

	private function updateMap():Void
	{
		var counter:Int = 0;
		for (a in 0...theMap.length)
		{
			for (b in 0...theMap[0].length)
			{
				cast(container.getChildAt(counter), Bitmap).bitmapData = textures[theMap[a][b]];
				counter++;
			}
		}
	}

private function updateMap():Void

{

var counter:Int = 0;

for (a in 0...theMap.length)

{

for (b in 0...theMap[0].length)

{

cast(container.getChildAt(counter), Bitmap).bitmapData = textures[theMap[a][b]];

counter++;

}

Now there are many ways to do this. The most straight-forward approach would be creating an empty canvas and draw the tiles onto each time the graphics need to be updated. I’d be a bit like taking the sledgehammer to crack a nut in our case.
If you remember, in the constructor we created Bitmap instances for all of our tiles. Did you know that we can simply change it’s associated BitmapData – the texture inside our textures array – by a call to bitmap.bitmapData=anotherBitmapData?
That’s what we’re doing! We loop over the theMap array, retrieve each texture number and assign it’s BitmapData to it’s associated Bitmap.

Let’s move on to the empty handleKey() function we created earlier and populate it with this:

		switch (cast(e.target, Sprite).name)
		{
			case "keyUp":
				if (oldDirection != 2)
				{
					direction = 0;
				}
			case "keyDown":
				if (oldDirection != 0)
				{
					direction = 2;
				}
			case "keyLeft":
				if (oldDirection != 1)
				{
					direction = 3;
				}
			case "keyRight":
				if (oldDirection != 3)
				{
					direction = 1;
				}
		}
		oldDirection = direction;

switch (cast(e.target, Sprite).name)

{

case "keyUp":

if (oldDirection != 2)

{

direction = 0;

}

case "keyDown":

if (oldDirection != 0)

{

direction = 2;

}

case "keyLeft":

if (oldDirection != 1)

{

direction = 3;

}

case "keyRight":

if (oldDirection != 3)

{

direction = 1;

}

oldDirection = direction;

Not too much to say about this. This function registers pushes onto the virtual keys on-screen.
You might just wonder why we compare it to oldDirection before setting direction to the desired direction. This makes sure we don’t move into the snake by simply trying to go backwards – e.g. if the snake moves up and you’re pressing down.

Previously we added another empty function: updateGame().
Fill it with this:

		if (!gameOver)
		{
			if (Lib.getTimer() - oldTime > delay)
			{
				advance(direction);
				oldTime = Lib.getTimer();
			}
		}
		else
		{
			if (Lib.getTimer() - oldTime > 2000)
			{
				resetGame();
			}
		}

if (!gameOver)

{

if (Lib.getTimer() - oldTime > delay)

{

advance(direction);

oldTime = Lib.getTimer();

}

else

{

if (Lib.getTimer() - oldTime > 2000)

{

resetGame();

}

This is the callBack function registered with the ENTER_FRAME event. This is a special event that get’s fired at the speed of the projects framerate. OpenFL defaults to 60 frames per second – which means updateGame() would be called roughly every 16.6 ms – so way too fast!

Well, as a side note: that’s only half the story. In OpenFL a framerate of 60 in conjunction with the HTML5 target means something different! It tries to use the refresh rate of your display! So while most mobile devices should have a refresh rate of 60hz, there a 144hz desktop monitors. You’re right – this means the game would try to run at 144fps!

Anyway, we slow it down by waiting delay number of milliseconds. It’s value is set to 350. So whenever 350 milliseconds have passed, we move the snake by a call to advance(direction), the last function we still need to implement.
If the player has hit a wall, the gameOver variable will become true. If it’s the case, we delay for 2 seconds – 2000ms – before restarting the game by a call to resetGame().

Wow we’re almost ready! Let’s work on the last function advance().

	private function advance(whichDirection:Int):Void
	{

	}

private function advance(whichDirection:Int):Void

{

}

It will ultimately move our snake! Additionally it checks if the snake hits something solid or collects a star and act accordingly. Start with this:

		oldXPosition = currentXPosition;
		oldYPosition = currentYPosition;
		var futureX:Int = currentXPosition;
		var futureY:Int = currentYPosition;
		switch (whichDirection)
		{
			case 0:
				if (futureY - 1 >= 0)
				{
					futureY -= 1;
				}
			case 1:
				if (futureX + 1 < numTilesHorizontal)
				{
					futureX += 1;
				}
			case 2:
				if (futureY + 1 < numTilesVertical)
				{
					futureY += 1;
				}
			case 3:
				if (futureX - 1 >= 0)
				{
					futureX -= 1;
				}
		}

oldXPosition = currentXPosition;

oldYPosition = currentYPosition;

var futureX:Int = currentXPosition;

var futureY:Int = currentYPosition;

switch (whichDirection)

{

case 0:

if (futureY - 1 >= 0)

{

futureY -= 1;

}

case 1:

if (futureX + 1 < numTilesHorizontal)

{

futureX += 1;

}

case 2:

if (futureY + 1 < numTilesVertical)

{

futureY += 1;

}

case 3:

if (futureX - 1 >= 0)

{

futureX -= 1;

}

This functions non-optional parameter whichDirection tells which direction (wow – who would’ve guessed that?) we want the snake to move to. If you remember, 0 means going up for example. To make sure we stay in the bounds of our gameGrid array – though we’re working with it’s replicate theMap – we need to check if a step in the desired direction would bring us out of bounds. futureX and futureY hold the position the snake would be if we move in the desired direction.

Now that we know it’s safe to move in that direction we need to check if we either collect a star, hit a wall or even the snake’s body itself at the future position.

		var tileToCheck:Int = theMap[futureY][futureX];
		if (tileToCheck == 0 || tileToCheck == 14)
		{
			currentXPosition = futureX;
			currentYPosition = futureY;

			theMap[currentYPosition][currentXPosition] = 13;
			theMap[oldYPosition][oldXPosition] = 13;
			updateMap();

			if (tileToCheck == 14)
			{
				snakeLength += 3;
				gimmeADot();
				updateMap();
			}
		}
		else
		{
			theMap[futureY][futureX] = 2;
			updateMap();
			gameOver = true;
		}

var tileToCheck:Int = theMap[futureY][futureX];

if (tileToCheck == 0 || tileToCheck == 14)

{

currentXPosition = futureX;

currentYPosition = futureY;

theMap[currentYPosition][currentXPosition] = 13;

theMap[oldYPosition][oldXPosition] = 13;

updateMap();

if (tileToCheck == 14)

{

snakeLength += 3;

gimmeADot();

updateMap();

}

else

{

theMap[futureY][futureX] = 2;

updateMap();

gameOver = true;

}

This is done by retrieving the texture number inside the theMap array at the future position and compare it’s value with two numbers: 0 and 14.
0 is pretty self-explaining – it means it’s an empty area. 14 refers to star. Anything in-between is considered a solid tile – a wall or a part of the snake.
– If we hit a 14, enlarge the snake by 3 tiles and spawn a new star.
– If we hit anything else than 14 or 0 it’s game over.
Yeah, it’s as simple as this. 😉

We’re almost there! The snake is just missing it’s tail! As you might have noticed the only thing we actually move is the snake’s first tile – the head. To turn this head into a snake, we need to trail it by tail pieces!

		var tailPiece:Point = new Point(oldXPosition, oldYPosition);
		tail.push(tailPiece);

		if (tail.length == snakeLength-1)
		{
			tailPiece = tail[0];
			theMap[Std.int(tailPiece.y)][Std.int(tailPiece.x)] = 0;
			tail.splice(0,1);
		}

var tailPiece:Point = new Point(oldXPosition, oldYPosition);

tail.push(tailPiece);

if (tail.length == snakeLength-1)

{

tailPiece = tail[0];

theMap[Std.int(tailPiece.y)][Std.int(tailPiece.x)] = 0;

tail.splice(0,1);

}

As soon as the snake moved to it’s future position, it’s previous position stored in oldXPositon and oldYPosition respectively becomes a tail piece. The tail array keeps track of those pieces.
After we added a tailPiece, we check if the number of tails in the tail array exceeds the number of segments the snake should have. This is determined by the variable snakeLength. If it does, we remove the first element from the array, get the corresponding tile inside theMap at it’s position and reset it to 0 – empty gamearea.

We did it! Our game is ready to run! Hit CTRL + Return and have a good play! 🙂

cordovaSnakeFinal

I bet it’s not that much fun because we have to use our mouse to push the virtual keys.
Well a desktop PC wasn’t our target platform – we want to package it for Android using Cordova!

To do this we need to make some slight modifications. Every OpenFL HTML5 project get’s a preloader by default. It’s pupose is preloading assets – the images in our case. This makes complete sense because normally the game would run from a webserver and served to your PC over the internet first. The preloader makes sure that those assets are available if you need them in code. If we’re going to package this game as an Android application it’s purpose might seem useless because those assets are bundled yet. Nevertheless – due to OpenFL’s internal workings we still need to go through the preloading stage because otherwise it won’t know about the assets existence anyway.
So OpenFL’s default preloader shows a thin horizontal bar which scales according to the total bytes it needs to preload and the bytes which have been preloaded. We don’t want to see that bar but keep the ‘preloading’ functionality.
Fortunately OpenFL offers the ability to use a custom preloader. Since we do not want to re-invent the wheel we simply customize the default preloader – mainly stripping out the bar.
The default preloader is part of your OpenFL installation and usually located at:
C:\HaxeToolkit\openfl\openfl\7,1,2\src\openfl\display\Preloader.hx

This might be different on your system, depending on where you’ve installed Haxe and what OpenFL version you’re using. It ain’t that important though we don’t need it. 😉
Go to FlashDevelop’s Project Manager panel, right-click src and select Add, New class…

cordovaFlashDevelopAddClass

In the following dialog give the class the name Preloader and click OK.
Now overwrite it with this code:

package;

import openfl.display.Sprite;
import openfl.events.Event;

class Preloader extends Sprite 
{
	public function new () 
	{
		super ();
		addEventListener (Event.COMPLETE, this_onComplete);
	}
	
	private function this_onComplete (event:Event):Void
	{
		event.preventDefault ();
		dispatchEvent (new Event (Event.UNLOAD));
	}
}

package;

import openfl.display.Sprite;

import openfl.events.Event;

class Preloader extends Sprite

{

public function new ()

{

super ();

addEventListener (Event.COMPLETE, this_onComplete);

}

private function this_onComplete (event:Event):Void

{

event.preventDefault ();

dispatchEvent (new Event (Event.UNLOAD));

}

That’s it! Just an empty preloader which fires an COMPLETE event as soon as it finished loading.
We still need find a way to tell OpenFL that it should use this instead of it’s default preloader though.
This can be done inside the project.xml file, which contains fundamental settings for your project.
Double-click this file in the Project Manager to open it.
At the moment it should look a little something like this:

<?xml version="1.0" encoding="utf-8"?>
<project>
	<!-- NMML reference: https://gist.github.com/1763850 -->
	
	<!-- metadata, make sure 'package' is at least 3 segments (ie. com.mycompany.myproject) -->
	<meta title="SnakeMobile" package="SnakeMobile" version="1.0.0" company="" />
	
	<!-- output -->
	<app main="Main" file="SnakeMobile" path="bin" />
	
	<window background="#000000" fps="60" />
	<window width="800" height="480" unless="mobile" />
	<window orientation="landscape" vsync="false" antialiasing="0" if="cpp" />
	
	<!-- classpath, haxe libs -->
	<source path="src" />
	<haxelib name="openfl" />
	<haxelib name="actuate" />
	
	<!-- assets -->
	<icon path="assets/openfl.svg" />
	<assets path="assets/img" rename="img" />
	
	<!-- optimize output
	<haxeflag name="-dce full" /> -->
	
</project>

<?xml version="1.0" encoding="utf-8"?>

<!-- optimize output

</project>

Find the line:
<app main=“Main” file=“SnakeMobile” path=“bin” />
and replace it by:
<app main=”Main” file=”SnakeMobile” preloader=”Preloader” path=”bin” />

This forces OpenFL to use our custom preloader.
Now would be a good time to alter other settings inside project.xml.
As you can see, <window width=”800″ height=”480″ unless=”mobile” /> sets the size of our window to a fixed 800 x 480 pixels. That’s cool if you want to target flash for example. But what happens if we target HTML5? It means that we’re working with an actual resolution of 800 x 480 but the browser stretches it to fit the browser window. This results in a loss of quality – things get a little blurry. What we do want instead is take advantage of the full browser window unstretched!
Put these two lines below:
<window width=”0″ height=”0″ resizable=”true” antialiasing=”0″ if=”html5″ />
<window allow-high-dpi=”true” />

width=0 and height=0 is an exception for HTML5. Instead of setting it to a fixed value, it uses the size of the current browser window in pixels.

One more file needs modifications. To display our game inside the browser, OpenFl generates an index.html file, which is based on a template located at:
C:\HaxeToolkit\openfl\openfl\7,1,2\assets\templates\html5\template

There’s two things we need to do with it:
– embedd cordova.js, a Javacript layer used by Cordova
– listen for a deviceReady event which Cordova fires and start our application accordingly

Go to FlashDevelop’s Project Manager once more, right-click your project’s name – SnakeMobile (Haxe) select Add -> New Folder… -> name it templates
Afterwards right-click the freshly created folder select Add -> New HTML File… -> name it index.html and open it by a double-click.
Simply overwrite it’s contents with:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>::APP_TITLE::</title>
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">		
	<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<script type="text/javascript" src="cordova.js"></script>
	::if linkedLibraries::::foreach (linkedLibraries)::
	<script type="text/javascript" src="::__current__::"></script>::end::::end::
	<script type="text/javascript" src="./::APP_FILE::.js"></script>
	
	<script>
		window.addEventListener ("touchmove", function (event) { event.preventDefault (); }, false);
		if (typeof window.devicePixelRatio != 'undefined' && window.devicePixelRatio > 2) {
			var meta = document.getElementById ("viewport");
			meta.setAttribute ('content', 'width=device-width, initial-scale=' + (2 / window.devicePixelRatio) + ', user-scalable=no');
		}
        window.performance = (window.performance || {
            offset: Date.now(),
            now: function now() {
                return Date.now() - this.offset;
            }
        });
	</script>
	
	<style>
		html,body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
		#ofl_content { background: #000000; width: ::if (WIN_RESIZABLE)::100%::elseif (WIN_WIDTH > 0)::::WIN_WIDTH::px::else::100%::end::; height: ::if (WIN_RESIZABLE)::100%::elseif (WIN_WIDTH > 0)::::WIN_HEIGHT::px::else::100%::end::; }
::foreach assets::::if (type == "font")::::if (cssFontFace)::::cssFontFace::::else::
		@font-face {
			font-family: '::fontName::';
			src: url('::targetPath::.eot');
			src: url('::targetPath::.eot?#iefix') format('embedded-opentype'),
			url('::targetPath::.svg#my-font-family') format('svg'),
			url('::targetPath::.woff') format('woff'),
			url('::targetPath::.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
		}::end::::end::::end::
	</style>
	
</head>
<body>
	<div id="ofl_content"></div>
    <script type="text/javascript">
    function onDeviceReady()
	{
        lime.embed ("::APP_FILE::", "ofl_content",::WIN_WIDTH::, ::WIN_HEIGHT::, { parameters: {} });
	}
	
    if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/))
	{
        document.addEventListener("deviceready", onDeviceReady, false);
    }
	else
	{
        onDeviceReady();
    }
    </script>			
</body>
</html>

<!DOCTYPE html>

<head>

<title>::APP_TITLE::</title>

::if linkedLibraries::::foreach (linkedLibraries)::

window.addEventListener ("touchmove", function (event) { event.preventDefault (); }, false);

if (typeof window.devicePixelRatio != 'undefined' && window.devicePixelRatio > 2) {

var meta = document.getElementById ("viewport");

meta.setAttribute ('content', 'width=device-width, initial-scale=' + (2 / window.devicePixelRatio) + ', user-scalable=no');

}

window.performance = (window.performance || {

offset: Date.now(),

now: function now() {

return Date.now() - this.offset;

}

});

</script>

<style>

html,body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

#ofl_content { background: #000000; width: ::if (WIN_RESIZABLE)::100%::elseif (WIN_WIDTH > 0)::::WIN_WIDTH::px::else::100%::end::; height: ::if (WIN_RESIZABLE)::100%::elseif (WIN_WIDTH > 0)::::WIN_HEIGHT::px::else::100%::end::; }

::foreach assets::::if (type == "font")::::if (cssFontFace)::::cssFontFace::::else::

@font-face {

font-family: '::fontName::';

src: url('::targetPath::.eot');

src: url('::targetPath::.eot?#iefix') format('embedded-opentype'),

url('::targetPath::.svg#my-font-family') format('svg'),

url('::targetPath::.woff') format('woff'),

url('::targetPath::.ttf') format('truetype');

font-weight: normal;

font-style: normal;

}::end::::end::::end::

</style>

</head>

<body>

function onDeviceReady()

{

lime.embed ("::APP_FILE::", "ofl_content",::WIN_WIDTH::, ::WIN_HEIGHT::, { parameters: {} });

}

if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/))

{

document.addEventListener("deviceready", onDeviceReady, false);

}

else

{

onDeviceReady();

}

</script>

</body>

</html>

Again we need to tell OpenFl to use this instead of it’s own template, so open project.xml once more and add this line somewhere:
<template path=”templates/index.html” rename=”index.html” if=”html5″ />

Awesome! Now our application is ready to be packaged using Cordova! This will be topic in the next article in this series.

Leave a Reply Cancel reply