Emanuele Feronato

Talking about Flash, Game development and HTML5.

Let me introduce you Flambe, a free 2D game engine that allows you to make cross-platform development, especially HTML5 and Flash. You are going to write games in Haxe: an open source, AS3-like language with expressive features and a fast compiler.

Before we start coding with Flambe, there’s a couple of packages we need to be installed on our computer. The following guide was made with a Windows computer, but it’s almost the same thing if you are using a Mac.

Download Haxe
Download NodeJS
Download Java runtime

Once you have installed all the software required (and probably rebooted your machine) look for in your computer for Node.js command prompt (it should be in C:\Program Files\nodejs\nodevars.bat if you use Windows) then type in it:

npm install -g flambe

You should see a lot of text, then:

flambe update

And now Flambe is ready to be used.

Create a new project called helloworld with

flambe new helloworld

at this time a folder called helloworld should be created, with a lot of stuff inside. At the moment, there’s a simple demo of an airplane, but I changed it in order to create my own demo.

I will create a ball which will move towards mouse (or finger) pointer when the stage is clicked (tapped).

I uploaded an image of the ball called ball.png in the assets/bootstrap folder, then in src/urgame you will find an Haxe file called Main.hx which is the one we are going to edit. You can use your favourite text editor, you’ll see Haxe is not that different than AS3, anyway here’s the API guide.

Now, the code of Main.hx:

package urgame;

import flambe.Entity;
import flambe.System;
import flambe.asset.AssetPack;
import flambe.asset.Manifest;
import flambe.display.FillSprite;
import flambe.display.ImageSprite;
import flambe.input.PointerEvent;

class Main{   

	// soccer ball instance
	private static var myBall:ImageSprite;

	private static function main (){

     	// system initialization
		System.init();

		// loading assets from bootstrap folder
		var manifest = Manifest.build("bootstrap");
		var loader = System.loadAssetPack(manifest);
		loader.get(onSuccess);    
	}

	private static function onSuccess (pack :AssetPack){

		// solid color background
		var background = new FillSprite(0x202020, System.stage.width, System.stage.height);
		System.root.addChild(new Entity().add(background));
	
		// load ball image from the assets previously loaded and bind it to myBall instance
		myBall = new ImageSprite(pack.getTexture("ball"));
		// place ball's origin on its center
		myBall.centerAnchor();
		// adding the ball to stage
		System.root.addChild(new Entity().add(myBall));
		// placing the ball in the middle of the stage
		myBall.x._ = System.stage.width/2;
		myBall.y._ = System.stage.height/2;
		// waiting for the user to press the mouse down or tap down the device, then call handlePointerDown function
		System.pointer.down.connect(handlePointerDown);   
	} 

	private static function handlePointerDown(event:PointerEvent){
		// move the ball toward mouse/finger position with an animation which lasts one second
		myBall.x.animateTo(event.viewX, 1);
		myBall.y.animateTo(event.viewY, 1);
	} 
}

Once you’re done with coding, in the command prompt type

flambe build flash --debug

or

flambe build html --debug

to build a Flash or HTML5 version of the project, then

flambe serve

to start a webserver and look at your project at http://localhost:7000. Removing --debug parameter will export the project for distribution, generating a smaller and faster build, which is slower to build and harder to debug.

And this is the result:

Select the mode you prefer, then click on the stage to move the ball.

Download the entire project

Soon, a complete game using Flambe and Haxe.