Cheat Sheet

FlxSprite (Base)

package;

import flixel.FlxSprite;
import flixel.FlxG;

class MySprite extends FlxSprite
{
	public function new()
	{
		super();
	}

	override public function update(elapsed:Float):Void
	{
		super.update(elapsed);
	}
}
HAXE

FlxState (Base)

package;

import flixel.FlxState;
import flixel.FlxG;

class MyState extends FlxState
{
    override public function create():Void
    {
    	super.create();
    }

    override public function update(elapsed:Float):Void
    {
    	super.update(elapsed);
    }
}
HAXE

Switch FlxState

FlxG.switchState(new MyState());
HAXE

Load FlxSprite

loadGraphic("assets/my_sprite.png");

// OR dynamically create a rect
makeGraphic(100, 100, 0xFFFFFFFF); // width, height, color (AARRGGBB hexadecimal)

// to update bounding box by default (positioned on top left corner of the sprite)
updateHitbox(); // or offset.set(10, 5); to shift bounding box 10 pixels horizontally and 5 pixels vertically
HAXE

FlxText

setFormat(font, size, color, alignment)
setBorderStyle(style, color, size)

import flixel.text.FlxText;
import flixel.util.FlxColor;
HAXE

myText = new FlxText(0, 0, 500); // x, y, width
myText.text = "Hello World";
myText.setFormat("assets/font.ttf", 20, FlxColor.WHITE, CENTER);
myText.setBorderStyle(OUTLINE, FlxColor.RED, 1);
HAXE

FlxButton

import flixel.ui.FlxButton;
HAXE

myButton = new FlxButton(0, 0, "Label", myCallback);

// Custom graphics (sprite sheet with 3 frames for normal / highlight / pressed)
myButton.loadGraphic("assets/custom.png", true, width, height);
HAXE

function myCallback():Void
{
}
HAXE

myButton.label is a FlxText, use setFormat() and setBorderStyle() to customise.

Sound Effects and Music

With the stock Project.xml, simply place them in your project's assets/music and assets/sounds subfolders and they're ready to use.

Sound effects are usually in WAV format (44.1 kHz source).

Music must be in MP3 format (44.1 kHz source) for Flash, and OGG for everything else. To support both Flash and non-Flash platforms without bundling both formats in your output, you can replace the stock <assets> tag in your Project.xml with this:

<assets path="assets" exclude="*.ogg" if="flash"/>
<assets path="assets" exclude="*.mp3" unless="flash"/>
XML

Play in your code:

// Play sound effect using AssetPaths
FlxG.sound.play(AssetPaths.mySound__wav);
// Play sound effect without AssetPaths
FlxG.sound.play("assets/sounds/mySound.wav");

// Loop music, Flash only
FlxG.sound.playMusic(AssetPaths.myMusic__mp3);
// Loop music, non-Flash only
FlxG.sound.playMusic(AssetPaths.myMusic__ogg);
// Loop music, Flash or non (getSound() adds .mp3 on Flash and .ogg otherwise)
FlxG.sound.playMusic(FlxAssets.getSound("assets/music/myMusic"));
HAXE

Keyboard Input

// 'A' key
if (FlxG.keys.justPressed.A) {}
if (FlxG.keys.pressed.A) {}
if (FlxG.keys.justReleased.A) {}

// Checking multiple keys:
if (FlxG.keys.anyPressed([RIGHT, D])) {}
HAXE

Keys

ANY

A...Z

UP DOWN LEFT RIGHT

SPACE ENTER ESCAPE

ZERO ONE TWO THREE...NINE

F1...F12

ALT
BACKSLASH
BACKSPACE
CAPSLOCK
CONTROL
DELETE
HOME
INSERT
QUOTE
PERIOD
PLUS
MINUS
PAGEUP
PAGEDOWN
RBRACKET
GRAVEACCENT
TAB
SLASH
SEMICOLON

NUMPADZERO NUMPADONE NUMPADTWO...NUMPADNINE

Mouse Input

if (FlxG.mouse.pressed) {}
if (FlxG.mouse.justPressed) {}
if (FlxG.mouse.justReleased) {}
HAXE

Positional Data

// Relative to world space
FlxG.mouse.x;
FlxG.mouse.y;

// Relative to screen
FlxG.mouse.screenX;
FlxG.mouse.screenY;
HAXE

Wheel (mouse scroll)

Current "delta" value of mouse wheel. If the wheel was just scrolled up, it will have a positive value. If it was just scrolled down, it will have a negative value. If it wasn't just scroll this frame, it will be 0.

FlxG.mouse.wheel;
HAXE

Up, Down, Over, Out Callbacks per Object

var clickableSprite:FlxSprite;

// ...

// register plugin in PlayState.create()
FlxMouseEventManager.init();

// ...

// register callbacks
var pixelPerfect = false;
FlxMouseEventManager.add(clickableSprite, mousePressedCallback, mouseReleasedCallback, null, null, false, true, pixelPerfect, [FlxMouseButtonID.LEFT, FlxMouseButtonID.RIGHT]);

// ...

function mousePressedCallback(sprite:FlxSprite)
{
	if (FlxG.mouse.justPressed)
	{
		// left button was pressed
	}
	else if (FlxG.mouse.justPressedRight)
	{
		// right button was pressed
	}
}

function mouseReleasedCallback(sprite:FlxSprite)
{
}
HAXE

Touch Input

for (touch in FlxG.touches.list)
{
	if (touch.justPressed) {}
	if (touch.pressed) {}
	if (touch.justReleased) {}
}
HAXE

Positional Data

// Relative to world space
touch.x;
touch.y;
        
// Relative to screen
touch.screenX;
touch.screenY;
HAXE

touchPointID: The unique ID of this touch.
overlaps(objectOrGroup): Checks for overlap between this touch and another FlxObject or FlxGroup.

Swipes (Input)

"Swipes" from both mouse and touch input that have just been released:

for (swipe in FlxG.swipes)
{
    // swipe.startPosition (FlxPoint)
    // swipe.endPosition (FlxPoint)
    
    // swipe.id (Int)

    // swipe.distance (Float)
    // swipe.angle (Float)
    // swipe.duration (Float)
}
HAXE

FlxSignal

import flixel.util.FlxSignal;
HAXE

// for signals that don't need data, use FlxSignal
var signal = new FlxSignal();
// for signals that need data, use FlxTypedSignal with the correct function type
var stringSignal = new FlxTypedSignal<String->Void>();
HAXE

Note: FlxSignal is nothing but a convenient shortcut for FlxTypedSignal<Void->Void>

signal.add(voidCallback); // type must be Void->Void
stringSignal.add(stringCallback); // type must be String->Void
HAXE

function voidCallback()
{
	trace("Hello");
}

function stringCallback(text:String)
{
	trace(text);
}
HAXE

// this will print "Hello World"
signal.dispatch();
stringSignal.dispatch("World");
HAXE

You can have up to 4 parameters in your signal:

var collisionNotify = new FlxTypedSignal<FlxObject->FlxObject->Bool->Bool->Void>();
collisionNotify.add(collisionCallback);

function collisionCallback(source:FlxObject, target:FlxObject, shouldKillSource:Bool, shouldKillTarget:Bool):Void (...)
HAXE

FlxTimer

import flixel.util.FlxTimer;
HAXE

// time (seconds), callback, loops
new FlxTimer().start(10.0, myCallback, 3);
HAXE

function myCallback(timer:FlxTimer):Void
{
}
HAXE

Setting loops to 0 results in an endless loop.
reset(?NewTime) restarts the timer, optionally with a new duration.
cancel() stops the timer and removes it from the timer manager.

FlxRandom

// (Int) between 0 and 10
FlxG.random.int(0, 10);

// (Float) between 0.0 and 10.0
FlxG.random.float(0.0, 10.0);

// (Bool) Chance by percent
FlxG.random.bool(50); // 50% chance to return 'true'
FlxG.random.bool(10); // 10% chance to return 'true'
HAXE

FlxTween

Check the demo to visualize all FlxTween types.

tween(Object, Values, Duration, ?Options)

import flixel.tweens.FlxTween;
import flixel.tweens.FlxEase;
HAXE

// Moves sprite to position (100, 200) in 3 seconds
FlxTween.tween(sprite, {x: 100, y: 200}, 3.0, {ease: FlxEase.quadInOut, complete: myCallback});
HAXE

function myCallback(tween:FlxTween):Void
{
}
HAXE

FlxTween Options

ease

{ease: FlxEase.quadInOut}
HAXE

complete

{complete: callbackFunction}
HAXE

function callbackFunction(tween:FlxTween):Void
{
}
HAXE

type

{type: FlxTweenType.PINGPONG}
HAXE

FlxTweenType.BACKWARD: plays tween in reverse direction
FlxTweenType.LOOPING: restarts immediately when it finishes.
FlxTweenType.ONESHOT: stops and remove itself from its core container when it finishes.
FlxTweenType.PERSIST: stops when it finishes.
FlxTweenType.PINGPONG: plays tween hither and thither

loopDelay

{loopDelay: 1.0} // 1 second
HAXE

startDelay

{startDelay: 2.0} // 2 seconds
HAXE

FlxEase List

Check the demo to visualize all FlxEase types.

backIn, backInOut, backOut
bounceIn, bounceInOut, bounceOut
circIn, circInOut, circOut
cubeIn, cubeInOut, cubeOut
elasticIn, elasticInOut, elasticOut
expoIn, expoInOut, expoOut
quadIn, quadInOut, quadOut
quartIn, quartInOut, quartOut
quintIn, quintInOut, quintOut
sineIn, sineInOut, sineOut

Containers (FlxGroup)

FlxGroup is a shortcut for FlxTypedGroup<FlxBasic>. Use FlxTypedGroup<MyOwnClass> if you need to access your own variables and functions when iterating over the container.

Iteration

for (member in myGroup)
{
	member.x += 10;
	member.mySpecificFunction(); // myGroup = FlxTypedGroup<MyOwnClass>
}
HAXE

Collision

FlxG.overlap(objectOrGroup1, objectOrGroup2, myCallback);
HAXE

function myCallback(object1:FlxObject, object2:FlxObject):Void
{
}
HAXE

Or use FlxG.collide() which calls FlxG.overlap() and presets the processCallback parameter to FlxObject.separate().

Setting World Bounds

// collision won't work outside the bounds, and by default they are only size of one screen
FlxG.worldBounds.set(tilemap.x, tilemap.y, tilemap.width, tilemap.height);
HAXE

Quick check whether there was a collision

// sets the touching flags
FlxG.collide(player, level);

if (player.isTouching(DOWN))
{
	// player stands on the ground and can jump 
}

// will reset touching flags when called
super.update(elapsed);
HAXE

Teleport sprite

// after setting the sprite's new position
setPosition(10, 100);
// don't forget to update 'last' variable if you don't want overlap callbacks for objects between old and new positions of the sprite
last.set(x, y);
HAXE

Pixel Perfect Collision

var overlapping = FlxG.pixelPerfectOverlap(sprite1, sprite2);
HAXE

Drawing Shapes

Dynamically draw: circle, ellipse, line, polygon, triangle, rect, round rect and rect complex.

using flixel.util.FlxSpriteUtil;
HAXE

Haxe docs about the using keyword: haxe.org/manual/lf-static-extension.html.

var canvas = new FlxSprite();
canvas.makeGraphic(FlxG.width, FlxG.height, FlxColor.TRANSPARENT, true);
add(canvas);
HAXE

The last argument of makeGraphic() is Unique, whether the graphic should be an unique instance in the graphics cache, if you create multiple graphics like this, set it to true to avoid conflicts.

var lineStyle:LineStyle = {color: FlxColor.RED, thickness: 1};
var drawStyle:DrawStyle = {smoothing: true};
HAXE

// Circle
canvas.drawCircle(x, y, radius, color, lineStyle, drawStyle);

// Ellipse
canvas.drawEllipse(x, y, width, height, color, lineStyle, drawStyle);

// Line
canvas.drawLine(startX, startY, endX, endY, lineStyle);

// Polygon
var vertices = new Array<FlxPoint>();
vertices[0] = new FlxPoint(0, 0);
vertices[1] = new FlxPoint(100, 0);
vertices[2] = new FlxPoint(100, 300);
vertices[3] = new FlxPoint(0, 100);
canvas.drawPolygon(vertices, color, lineStyle, drawStyle);

// Triangle
canvas.drawTriangle(x, y, height, color, lineStyle, drawStyle);

// Rect
canvas.drawRect(x, y, width, height, color, lineStyle, drawStyle);

// Round Rect
canvas.drawRoundRect(x, y, width, height, ellipseWidth, ellipseHeight, color, lineStyle, drawStyle);

// Rect Complex
canvas.drawRoundRectComplex(x, y, width, height, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius, color, lineStyle, drawStyle);
HAXE

Use canvas.fill(FlxColor.TRANSPARENT); to clear the canvas.

HUD

// prevents the sprite to scroll with the camera
scrollFactor.set(0, 0);
HAXE

Zooming game while leaving HUD intact

// create a new camera for the HUD
uiCamera = new FlxCamera(0, 0, screenWidth, screenHeight);
uiCamera.bgColor = FlxColor.TRANSPARENT;

// add camera to list and set 'DefaultDrawTarget' to false
FlxG.cameras.add(uiCamera, false);

// add element to the camera
hudElement.cameras = [uiCamera];

FlxG.camera.bgColor = 0xff626a71;
FlxG.camera.zoom = 0.5; // zoom only on the default camera
HAXE

Debugger

Press ~ key to open it during runtime, or open by code with FlxG.debugger.visible = true.

// Log
FlxG.log.add("My var: " + myVar);
// or
FlxG.log.redirectTraces = true;
trace("My var: ", myVar);

// Watch
FlxG.watch.add(object, "property");

// Add world space mouse position to watch list
FlxG.watch.addMouse();

// Create a tracker window for player (of class Player) showing "x", "y" and custom fields "jumping" and "ladder"
FlxG.debugger.addTrackerProfile(new TrackerProfile(Player, ["x", "y", "jumping", "ladder"], []));
FlxG.debugger.track(player, "Hero");
HAXE

Hiding Cursor

FlxG.mouse.visible = false;
HAXE

Adding Gravity

acceleration.y = 600;
HAXE

Sort objects in FlxGroup

// sort by Y for top-down game
group.sort(FlxSort.byY, FlxSort.ASCENDING);

// sort with custom function (here: by Z)
var group = new FlxTypedGroup<ZSprite>();
group.sort(
	function(order:Int, sprite1:ZSprite, sprite2:ZSprite):Int
	{
		return FlxSort.byValues(order, sprite1.z, sprite2.z);
	},
	FlxSort.ASCENDING
);
HAXE

FlxPoint Pool

// get from FlxPoint pool
var tileSize = FlxPoint.get(16, 16);

var actionTileset = FlxTileFrames.fromGraphic(FlxG.bitmap.add("assets/images/ui/actions.png"), tileSize);

// release it back in pool to reuse
tileSize.put();
HAXE

Documentation

Getting Started

Tutorial

HaxeFlixel Handbook

Resources

Community

Cheat Sheet

FlxSprite (Base)

FlxState (Base)

Mouse Input

Containers (FlxGroup)