Create cross-platform games coding only once with Flambe and Haxe

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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

215 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stairs
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers