Flixel Cheat Sheet 1: The Basics

These are basically collections of mini-tutorials, hopefully maybe a dozen at a time, that can be used either for learning or inspiration or reference. They deal with simple, focused questions about specific implementations. These are all works in progress but I’m hoping that we can keep these brief, direct and helpful, and maybe even hook them into the new online documentation? Or even link them into the source code master branch or something. We’ll see!

Why isn’t anything happening??

It’s really, really easy (I still do it) to simply forget to call super.update() or super.render() whenever you override these methods in your class extensions. “super” is Flash’s way of referring to the class you are extending. So if you are extending FlxSprite and you add some custom movement code or AI to your update function, chances are NOTHING WILL HAPPEN if you forget to call super.update() somewhere in that function.

override public function update():void
{
	//Animation and movement code usually goes up here

	super.update();

	//Sometimes it is useful to put code AFTER the update too,
	// since super.update() does all the actual movement
	// updates and stuff for you.
}

How do I change the background color?

At any point in your code, even during the FlxGame constructor , you can set FlxState.bgColor to anything you want. The color format is 0xAARRGGBB; click here if you need more explanation of the Flash color format.

FlxG.bgColor = 0xff783629;

How do I play music?

FlxG has some special stuff set up to help you play music without having to create or name a special looping FlxSound file yourself. One call to FlxG.playMusic will loop a sound file for you until you tell it to stop or play a different song.

FlxG.playMusic(MyEmbeddedSound);

What is going on with the timing and framerates?

It’s really natural to start programming things like this:

timer++;
character.x--;

But in Flixel we do things in seconds or pixels per second or units per second. So just adding or subtracting whole numbers can give some really unpredictable results! Instead, we keep track of how much time passed and multiply that in. So if you want to count a timer down, you should use FlxG.elapsed to time it right.

timer -= FlxG.elapsed;

How do I add gravity to an object?

This is an easy one! Just set your sprite’s acceleration.y to a positive number. Usually somewhere between 50 and 1000 is good, depending on what you’re doing.

var player:FlxSprite = new FlxSprite();
player.acceleration.y = 600;

Why won’t the camera follow the player character?

Flixel isn’t MAGIC, bro. Just call FlxG.follow and pass it the thing you want to follow!

var player:FlxSprite = new FlxSprite();
FlxG.follow(player);

ADVANCED: If you need the camera to follow more specific rules instead of just zipping around after the player, you can have it follow a fake focus object instead. This object can be updated according to player position or events in your game or whatever suits your fickle fancy!

Why does the camera go off the edges of my tilemap?

Again, bros, Flixel is not magical! Thankfully, this is really easy to do too, though there are a couple different ways to tackle it. You can call follow from your tilemap, or you can call FlxG.followBounds and pass it custom coordinates from your tilemap (or elsewhere).

var tilemap:FlxTilemap = new FlxTilemap();
tilemap.follow(); //the easy way
FlxG.followBounds(0,0,tilemap.width,tilemap.height); //the hard way

How do I make my player collide with my tilemap?

Another easy one – just call FlxTilemap.collide and pass in your player (or other object).

var tilemap:FlxTilemap = new FlxTilemap();
var player:FlxSprite = new FlxSprite();
tilemap.collide(player);

ADVANCED: If you want to collide a bunch of objects against the tilemap, check out FlxTilemap.collideArray(), FlxTilemap.collideArrayX(), and FlxTilemap.collideArrayY().

var tilemap:FlxTilemap = new FlxTilemap();
var enemies:Array = new Array();

override public function update():void
{
	super.update();

	tilemap.collideArrayX(enemies);
	tilemap.collideArrayY(enemies);
}

How do I make a checkbox?

Checkboxes work just like buttons, only you need to do some extra stuff in your button callback. FlxButton has some helpful methods like on and switchOff and switchOn that can help.

public var button:FlxButton;

public void onButton():void
{
	if(button.on())
		button.switchOff();
	else
		button.switchOn();
	//Maybe flip a variable or emit some particles or whatever
}

How do I create a HUD or status overlay?

These are just normal FlxSprites that have had their scrolling set to zero, so they don’t move even though you move or the camera moves or whatever. You should also add these at the end of the FlxState constructor so they end up on top of everything.

	var w:FlxSprite = new FlxSprite(4,4,EmbeddedWeaponImage);
	w.scrollFactor.x = w.scrollFactor.y = 0;
	add(w);

	var a:FlxSprite = new FlxSprite(4,4,EmbeddedArmorImage);
	a.scrollFactor.x = a.scrollFactor.y = 0;
	add(a);
}

ADVANCED: You can make a stretchy health bar pretty easily now by creating a 1 pixel wide image, setting its origin to (0,0), and then setting scale.x to the current value in pixels of the bar. Sounds kinda crazy, but it’s simpler in code.

var frame:FlxSprite = new FlxSprite(4,4);
frame.createGraphic(50,10); //White frame for the health bar
frame.scrollFactor.x = frame.scrollFactor.y = 0;
add(frame);

var inside:FlxSprite = new FlxSprite(5,5);
inside.createGraphic(48,8,0xff000000); //Black interior, 48 pixels wide
inside.scrollFactor.x = inside.scrollFactor.y = 0;
add(inside);

var bar:FlxSprite = new FlxSprite(5,5);
bar.createGraphic(1,8,0xffff0000); //The red bar itself
bar.scrollFactor.x = bar.scrollFactor.y = 0;
bar.origin.x = bar.origin.y = 0; //Zero out the origin
bar.scale.x = 48; //Fill up the health bar all the way
add(bar);

bar.scale.x = 24; //Drop the health bar to half