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