HaxeFlixel Tutorial – Particles and Emitters

May 16, 2015WY Leong 9 Comments

If you check the HaxeFlixel’s particle demo page, you can see some basic examples of particle usage. In this tutorial, we’ll cover the following sections:

Create default particle emitter
Adding custom image
Animating custom image
Adjusting particle properties

Setup

Let’s create a new HaxeFlixel template project as usual:

flixel tpl -n "MyParticleTest"

1	flixel tpl -n "MyParticleTest"

For assets, we can use any image for testing custom particle images, so let’s go for Julien’s Sparkles spritesheet. Download the zip and extract the sparkle.png into your /assets/images folder.

Introduction

Particles are generated from emitters. As such, you only need to check the API pages for FlxParticle and FlxEmitter for more info on how to implement particle effects. In a nutshell, you need an emitter (FlxEmitter) to “emit” particles (FlxParticle).

Default Particle Emitters

Following the code from FlashGameDojo (it’s in ActionScript 3, but it’s very similar to Haxe anyway) — here’s the most basic code to write an emitter:

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.effects.particles.FlxEmitter;
import flixel.effects.particles.FlxParticle;

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

        // Create an emitter at [200,100] position
        var emitter = new FlxEmitter(200, 100);

        // Remember that emitters are just FlxGroups
        // that help you recycle particles for repeated
        // usage. As such, we need to add the particles
        // into the emitters before we can use them.
        for (i in 0 ... 5)
        {
        	var p = new FlxParticle();
        	p.makeGraphic(2, 2, 0xFFFFFFFF);
        	p.exists = false;
        	emitter.add(p);
        }

        // Add emitter to stage
        add(emitter);

        // Start emitter as non-explosion, at a rate
        // of 1 particle every 0.1 seconds.
        emitter.start(false, 1, 0.1);
    }

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

    override public function destroy():Void
    {
        super.destroy();
    }
}

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.effects.particles.FlxEmitter;

import flixel.effects.particles.FlxParticle;

class MenuState extends FlxState

{

override public function create():Void

{

super.create();

// Create an emitter at [200,100] position

var emitter = new FlxEmitter(200, 100);

// Remember that emitters are just FlxGroups

// that help you recycle particles for repeated

// usage. As such, we need to add the particles

// into the emitters before we can use them.

for (i in 0 ... 5)

{

var p = new FlxParticle();

p.makeGraphic(2, 2, 0xFFFFFFFF);

p.exists = false;

emitter.add(p);

}

// Add emitter to stage

add(emitter);

// Start emitter as non-explosion, at a rate

// of 1 particle every 0.1 seconds.

emitter.start(false, 1, 0.1);

}

override public function update():Void

{

super.update();

}

override public function destroy():Void

{

super.destroy();

}

And when you build with lime test neko , you see the result:

You may notice the default white particles emitting correctly, but there seems to be a problem — the default HaxeFlixel logo gets emitted too. What went wrong?

Note that the white particles are the 2×2 pixel white squares we wrote in the p.makeGraphic(...) line above. We only created 5 particles for the emitter in the loop. Since the emitter needs to emit 1 particle per 0.1 second, it will run out of particles in its pool after 0.5 seconds. As a result, it generates its own FlxParticle objects that do not have a default image — resulting in the logo.

So the easiest fix is to adjust the loop to add more particles, from 5 to say, 15 or 20, so we’ll never run out of particles:

        // Remember that emitters are just FlxGroups
        // that help you recycle particles for repeated
        // usage. As such, we need to add the particles
        // into the emitters before we can use them.
        for (i in 0 ... 20)
        {
        	var p = new FlxParticle();
        	p.makeGraphic(2, 2, 0xFFFFFFFF);
        	p.exists = false;
        	emitter.add(p);
        }

// Remember that emitters are just FlxGroups

// that help you recycle particles for repeated

// usage. As such, we need to add the particles

// into the emitters before we can use them.

for (i in 0 ... 20)

{

var p = new FlxParticle();

p.makeGraphic(2, 2, 0xFFFFFFFF);

p.exists = false;

emitter.add(p);

}

And now it looks fixed:

Custom Particle Images

To add custom images to particles, you just need to load a graphic during particle creation:

        // Remember that emitters are just FlxGroups
        // that help you recycle particles for repeated
        // usage. As such, we need to add the particles
        // into the emitters before we can use them.
        for (i in 0 ... 20)
        {
        	var p = new FlxParticle();
        	p.loadGraphic("assets/images/sparkle.png", false, 32, 32);
        	p.exists = false;
        	emitter.add(p);
        }

// Remember that emitters are just FlxGroups

// that help you recycle particles for repeated

// usage. As such, we need to add the particles

// into the emitters before we can use them.

for (i in 0 ... 20)

{

var p = new FlxParticle();

p.loadGraphic("assets/images/sparkle.png", false, 32, 32);

p.exists = false;

emitter.add(p);

}

Just note the size of each sprite in the spritesheet. In the case of sparkle.png, each frame is 32×32. Now when you test, the sparkle image is used:

It’s a little too small to see, but that’s the default size of the first sparkle frame’s image anyway.

Animating Particles

To animate the particles, you just need to add animation during creation, exactly like how you would for FlxSprites:

        // Remember that emitters are just FlxGroups
        // that help you recycle particles for repeated
        // usage. As such, we need to add the particles
        // into the emitters before we can use them.
        for (i in 0 ... 20)
        {
        	var p = new FlxParticle();
        	p.loadGraphic("assets/images/sparkle.png", false, 32, 32);
        	p.animation.add("my-sparkle", [0,1,2,3], 10, true);
        	p.animation.play("my-sparkle");
        	p.exists = false;
        	emitter.add(p);
        }

// Remember that emitters are just FlxGroups

// that help you recycle particles for repeated

// usage. As such, we need to add the particles

// into the emitters before we can use them.

for (i in 0 ... 20)

{

var p = new FlxParticle();

p.loadGraphic("assets/images/sparkle.png", false, 32, 32);

p.animation.add("my-sparkle", [0,1,2,3], 10, true);

p.animation.play("my-sparkle");

p.exists = false;

emitter.add(p);

}

And the output:

Okay, using what we’ve learned so far, let’s try different examples on how to use the emitter:

Fire smoke trail
Explosion
Explosion with particle gravity

Fire Smoke Trail

We’re going to create smoke puffs that goes upwards, slowly fading away. Among the attributes we set include alpha fading, color fading, and size changing, and particle origin jitter:

    override public function create():Void
    {
        super.create();

        // Set the background color for visibility sake
        FlxG.camera.bgColor = 0xFFFF6666;

        // Create an emitter at [200,100] position
        var emitter = new FlxEmitter(200, 200);

        // Remember that emitters are just FlxGroups
        // that help you recycle particles for repeated
        // usage. As such, we need to add the particles
        // into the emitters before we can use them.
        for (i in 0 ... 100)
        {
        	var p = new FlxParticle();
        	p.makeGraphic(10, 10, 0xFFFFFFFF);
        	// p.loadGraphic("assets/images/sparkle.png", false, 32, 32);
        	// p.animation.add("my-sparkle", [0,1,2,3], 10, true);
        	// p.animation.play("my-sparkle");
        	p.exists = false;
        	emitter.add(p);
        }

        // Add emitter to stage
        add(emitter);

        // Set radius around origin where particles will appear
        emitter.setSize(25, 25);

        // Set particle's range of x/y directional speed
        emitter.setXSpeed(-20, 20);
        emitter.setYSpeed(-100, -200); // goes upwards

        // Set particle to fade opacity as it goes upwards
        emitter.setAlpha(1,1,0,0);

        // Set particle to fade color as it goes upwards
        emitter.setColor(0xFFFFFFFF, 0xFF000000);

        // Set particle size (scale) range, and grow larger as it fades
        emitter.setScale(0.5, 1, 2, 2.5);

        // Start emitting at 1 particle per 0.02 seconds
        emitter.start(false, 1, 0.02);
    }

override public function create():Void

{

super.create();

// Set the background color for visibility sake

FlxG.camera.bgColor = 0xFFFF6666;

// Create an emitter at [200,100] position

var emitter = new FlxEmitter(200, 200);

// Remember that emitters are just FlxGroups

// that help you recycle particles for repeated

// usage. As such, we need to add the particles

// into the emitters before we can use them.

for (i in 0 ... 100)

{

var p = new FlxParticle();

p.makeGraphic(10, 10, 0xFFFFFFFF);

// p.loadGraphic("assets/images/sparkle.png", false, 32, 32);

// p.animation.add("my-sparkle", [0,1,2,3], 10, true);

// p.animation.play("my-sparkle");

p.exists = false;

emitter.add(p);

}

// Add emitter to stage

add(emitter);

// Set radius around origin where particles will appear

emitter.setSize(25, 25);

// Set particle's range of x/y directional speed

emitter.setXSpeed(-20, 20);

emitter.setYSpeed(-100, -200); // goes upwards

// Set particle to fade opacity as it goes upwards

emitter.setAlpha(1,1,0,0);

// Set particle to fade color as it goes upwards

emitter.setColor(0xFFFFFFFF, 0xFF000000);

// Set particle size (scale) range, and grow larger as it fades

emitter.setScale(0.5, 1, 2, 2.5);

// Start emitting at 1 particle per 0.02 seconds

emitter.start(false, 1, 0.02);

}

And here is the result:

One thing I excluded was setting the rotation — by default, particles will rotate randomly. But if you don’t want particles to rotate, just set it like this:

emitter.setRotation(0,0);

1	emitter.setRotation(0,0);

Explosions

Explosions are the default behaviour of FlxEmitter — as demonstrated at the beginning of this tutorial. Referring to the API, the emitter’s default start function only “emits” the explosion once, like this:

emitter.start();

1	emitter.start();

Explosions With Particle Gravity

This is demonstrated in the Particle demo page — it’s as easy as adding gravity to the emitter:

    override public function create():Void
    {
        super.create();

        // Set the background color for visibility sake
        FlxG.camera.bgColor = 0xFFFF6666;

        // Create an emitter at [200,100] position
        var emitter = new FlxEmitter(200, 200);

        // Remember that emitters are just FlxGroups
        // that help you recycle particles for repeated
        // usage. As such, we need to add the particles
        // into the emitters before we can use them.
        for (i in 0 ... 100)
        {
        	var p = new FlxParticle();
        	p.makeGraphic(10, 10, 0xFFFFFFFF);
        	// p.loadGraphic("assets/images/sparkle.png", false, 32, 32);
        	// p.animation.add("my-sparkle", [0,1,2,3], 10, true);
        	// p.animation.play("my-sparkle");
        	p.exists = false;
        	emitter.add(p);
        }

        // Add emitter to stage
        add(emitter);

        // Add gravity to each particle
        emitter.gravity = 800;

        // Start emitting at 1 particle per 0.02 seconds
        emitter.start(false, 1, 0.02);
    }

override public function create():Void

{

super.create();

// Set the background color for visibility sake

FlxG.camera.bgColor = 0xFFFF6666;

// Create an emitter at [200,100] position

var emitter = new FlxEmitter(200, 200);

// Remember that emitters are just FlxGroups

// that help you recycle particles for repeated

// usage. As such, we need to add the particles

// into the emitters before we can use them.

for (i in 0 ... 100)

{

var p = new FlxParticle();

p.makeGraphic(10, 10, 0xFFFFFFFF);

// p.loadGraphic("assets/images/sparkle.png", false, 32, 32);

// p.animation.add("my-sparkle", [0,1,2,3], 10, true);

// p.animation.play("my-sparkle");

p.exists = false;

emitter.add(p);

}

// Add emitter to stage

add(emitter);

// Add gravity to each particle

emitter.gravity = 800;

// Start emitting at 1 particle per 0.02 seconds

emitter.start(false, 1, 0.02);

}

And the result:

Note the code above assumes we’re emitting the explosion in 0.02 second intervals. If you only want to do it once, set the interval to 0 instead of 0.02

One last thing — to stop the emitter, just do this:

emitter.kill();

1	emitter.kill();

Closure

Particle effects can be easily added to the game using FlxEmitter. The most common usage is explosion and smoke.

One example is “bursting coins out of a treasure chest”, where the emitter “emits” a single burst of coins. If you want an example of how to do this, check out PhotonStorm’s excellent Collectible Particles tutorial.

Check out his other Flixel tutorial series, they’re very helpful! They’re in ActionScript 3, but still relevant.

This concludes the tutorial on HaxeFlixel particles and emitters.

HaxeFlixel Tutorial – Parallax Scrolling

May 9, 2015WY Leong 1 Comment

One great way to enhance the feel of your game is parallax scrolling. I could only find tutorials that briefly mention it, so here’s one dedicated to parallax scrolling. In most cases, parallax is used on horizontal plane, so we’ll proceed with that in mind.

Setup

For placeholder images, let’s use some background images from OpenGameArt, Red Baron Backgrounds by MindChamber. Download the zip, and extract it somewhere.

We’ll be using the following files for this tutorial: highwayz – Copy.jpg and highwayz_floor.jpg. I didn’t include the images here in this tutorial so you would go and download the original files from the link above — to support the author 🙂 Anyway, put those two images into your /assets/images folder and move on.

Now let’s create a HaxeFlixel template project, as usual:

flixel tpl -n "MyParallaxTest"

1	flixel tpl -n "MyParallaxTest"

Now we can proceed with the code-related stuff.

Code Setup

Parallax effect can be easily achieved by setting the scrollFactor value.

If you want to have parallax backgrounds which are repeated, you will need FlxBackdrop , which is part of the flixel-addons haxelib. To enable the flixel-addons haxelib, go to your Project.xml file and enable the following code:

	<!--In case you want to use the addons package-->
	<haxelib name="flixel-addons" />

1 2	<!--In case you want to use the addons package--> <haxelib name="flixel-addons" />

To use parallax effect, you only need to do two things:

Create an FlxSprite (or anything derived from FlxObject) and set its scrollFactor value
OR create a FlxBackdrop and specify the X/Y scroll rate, and whether it repeats on the X-plane and/or Y-plane.
Scroll the camera!

Parallax with [scrollFactor]

The code below demonstrates the above parallax with only scrollFactor :

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.FlxSprite;

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

        // Create image that scrolls at x2 speed based on the camera's scroll
        var bg:FlxSprite = new FlxSprite(0,0);
        bg.loadGraphic("assets/images/highwayz - Copy.jpg");
        bg.scrollFactor.x = 2;

        // Create image that scrolls at x3 speed based on the camera's scroll
        var fg:FlxSprite = new FlxSprite(0,0);
        fg.loadGraphic("assets/images/highwayz_floor.jpg");
        fg.scrollFactor.x = 3;

        // move the floor lower so we can see the background.
        fg.y = 300;

        // Add the backdrops in order.
        add(bg);
        add(fg);
    }

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

        // Test input to scroll the camera. FlxBackdrop will
        // handle the parallax scrolling automatically.
        if (FlxG.keys.pressed.LEFT) FlxG.camera.scroll.add(-5, 0);
        if (FlxG.keys.pressed.RIGHT) FlxG.camera.scroll.add(5, 0);
    }

    override public function destroy():Void
    {
        super.destroy();
    }
}

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.FlxSprite;

class MenuState extends FlxState

{

override public function create():Void

{

super.create();

// Create image that scrolls at x2 speed based on the camera's scroll

var bg:FlxSprite = new FlxSprite(0,0);

bg.loadGraphic("assets/images/highwayz - Copy.jpg");

bg.scrollFactor.x = 2;

// Create image that scrolls at x3 speed based on the camera's scroll

var fg:FlxSprite = new FlxSprite(0,0);

fg.loadGraphic("assets/images/highwayz_floor.jpg");

fg.scrollFactor.x = 3;

// move the floor lower so we can see the background.

fg.y = 300;

// Add the backdrops in order.

add(bg);

add(fg);

}

override public function update():Void

{

super.update();

// Test input to scroll the camera. FlxBackdrop will

// handle the parallax scrolling automatically.

if (FlxG.keys.pressed.LEFT) FlxG.camera.scroll.add(-5, 0);

if (FlxG.keys.pressed.RIGHT) FlxG.camera.scroll.add(5, 0);

}

override public function destroy():Void

{

super.destroy();

}

And that’s it! Build with lime test neko and you can test the parallax with the LEFT/RIGHT arrow keys.

From other tutorials, like this (Dustytome) and this (Haxecoder), we can observe that scrollFactor/parallax technique can be applied to groups of objects or even UI elements, depending on your creativity. 🙂

Parallax with [FlxBackdrop]

If you want repeated backgrounds in your parallax scrolling, just modify the following lines from the above code:

package;

import flixel.FlxState;
import flixel.FlxG;
// import flixel.FlxSprite;
import flixel.addons.display.FlxBackdrop;

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

        // Create image that scrolls at x2 speed based on the camera's scroll
        // var bg:FlxSprite = new FlxSprite(0,0);
        // bg.loadGraphic("assets/images/highwayz - Copy.jpg");
        // bg.scrollFactor.x = 2;
        var bg:FlxBackdrop = new FlxBackdrop("assets/images/highwayz - Copy.jpg", 2, 0, true, false);

        // Create image that scrolls at x3 speed based on the camera's scroll
        // var fg:FlxSprite = new FlxSprite(0,0);
        // fg.loadGraphic("assets/images/highwayz_floor.jpg");
        // fg.scrollFactor.x = 3;
        var fg:FlxBackdrop = new FlxBackdrop("assets/images/highwayz_floor.jpg", 3, 0, true, false);

        // move the floor lower so we can see the background.
        ...

        // Add the backdrops in order.
        ...
    }

    ...
}

package;

import flixel.FlxState;

import flixel.FlxG;

// import flixel.FlxSprite;

import flixel.addons.display.FlxBackdrop;

class MenuState extends FlxState

{

override public function create():Void

{

super.create();

// Create image that scrolls at x2 speed based on the camera's scroll

// var bg:FlxSprite = new FlxSprite(0,0);

// bg.loadGraphic("assets/images/highwayz - Copy.jpg");

// bg.scrollFactor.x = 2;

var bg:FlxBackdrop = new FlxBackdrop("assets/images/highwayz - Copy.jpg", 2, 0, true, false);

// Create image that scrolls at x3 speed based on the camera's scroll

// var fg:FlxSprite = new FlxSprite(0,0);

// fg.loadGraphic("assets/images/highwayz_floor.jpg");

// fg.scrollFactor.x = 3;

var fg:FlxBackdrop = new FlxBackdrop("assets/images/highwayz_floor.jpg", 3, 0, true, false);

// move the floor lower so we can see the background.

...

// Add the backdrops in order.

...

}

...

}

And here’s the result:

There’s nothing much on the API page for FlxBackdrop, so I guess the usage is straight-forward.

HaxeFlixel Tutorial – Multiple Cameras

May 2, 2015WY Leong Leave a comment

If you check the flixel-demos Github page, you can find sample code on how to implement split screen camera, as shown on the demo page.

In this tutorial, we will create a simple platformer which implements 4 cameras. The purpose is to demonstrate that it is possible to have multiple cameras with different properties.

Setup

As usual, let’s create a new template HaxeFlixel project from the terminal:

flixel tpl -n "MyCameraTest2"

1	flixel tpl -n "MyCameraTest2"

We won’t be needing any assets, because we’ll use the default HaxeFlixel graphics.

Code

First, let’s create a map:

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.tile.FlxTilemap;

class MenuState extends FlxState
{
	var level:FlxTilemap;

    override public function create():Void
    {
        super.create();

        // Set the camera background as white for visibility sake
        FlxG.camera.bgColor = 0xFFFFFFFF;

        // Create level
        var levelData:Array<Int> = [
			1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,
			1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
			1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
			1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,
			1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,
			1,1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,
			1,1,1,1,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,1,
			1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,
			1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,
			1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,
			1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,
			1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,
			1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,
			1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,
			1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
		];
		level = new FlxTilemap();
		level.loadMap(flixel.util.FlxStringUtil.arrayToCSV(levelData, 20), GraphicAuto, 8, 8, FlxTilemap.AUTO);
		add(level);
    }

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

    override public function destroy():Void
    {
        super.destroy();
    }
}

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.tile.FlxTilemap;

class MenuState extends FlxState

{

var level:FlxTilemap;

override public function create():Void

{

super.create();

// Set the camera background as white for visibility sake

FlxG.camera.bgColor = 0xFFFFFFFF;

// Create level

var levelData:Array<Int> = [

1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,

1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,

1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,

1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,

1,1,1,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,1,

1,1,1,1,1,1,0,0,0,1,1,0,0,0,0,0,0,0,0,1,

1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,

1,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,

1,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,

1,1,1,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,

1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1

];

level = new FlxTilemap();

level.loadMap(flixel.util.FlxStringUtil.arrayToCSV(levelData, 20), GraphicAuto, 8, 8, FlxTilemap.AUTO);

add(level);

}

override public function update():Void

{

super.update();

}

override public function destroy():Void

{

super.destroy();

}

And here’s the result when you build it with lime test neko :

And now let’s add a playable character, complete with collision and movement logic:

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.tile.FlxTilemap;
import flixel.FlxSprite;

class MenuState extends FlxState
{
	var level:FlxTilemap;
	var player:FlxSprite;

    override public function create():Void
    {
        super.create();

        // Set the camera background as white for visibility sake
        ...

        // Create level
        ...

		// Create player
        player = new FlxSprite(50, 20);
        player.makeGraphic(5, 10, 0xFFFF0000); // create red square as player
        player.acceleration.y = 800; // add gravity
        add(player);
    }

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

        // Collide player with level.
        FlxG.collide(level, player);

        // Reset velocity by default, if not moving
        player.velocity.x = 0;

        // Move player
        if (FlxG.keys.pressed.LEFT) player.velocity.x = -100;
        if (FlxG.keys.pressed.RIGHT) player.velocity.x = 100;

        // Jump player only if touching ground
        if (FlxG.keys.pressed.UP && player.isTouching(flixel.FlxObject.FLOOR)) player.velocity.y = -200;
    }

    override public function destroy():Void
    {
        super.destroy();
    }
}

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.tile.FlxTilemap;

import flixel.FlxSprite;

class MenuState extends FlxState

{

var level:FlxTilemap;

var player:FlxSprite;

override public function create():Void

{

super.create();

// Set the camera background as white for visibility sake

...

// Create level

...

// Create player

player = new FlxSprite(50, 20);

player.makeGraphic(5, 10, 0xFFFF0000); // create red square as player

player.acceleration.y = 800; // add gravity

add(player);

}

override public function update():Void

{

super.update();

// Collide player with level.

FlxG.collide(level, player);

// Reset velocity by default, if not moving

player.velocity.x = 0;

// Move player

if (FlxG.keys.pressed.LEFT) player.velocity.x = -100;

if (FlxG.keys.pressed.RIGHT) player.velocity.x = 100;

// Jump player only if touching ground

if (FlxG.keys.pressed.UP && player.isTouching(flixel.FlxObject.FLOOR)) player.velocity.y = -200;

}

override public function destroy():Void

{

super.destroy();

}

And here’s how it’ll look:

Although it isn’t shown, the camera takes up the full area of the screen (in the case above, it’s 640 x 480). We can resize the cameras to only fit a portion of the screen — and along with this, we can create multiple cameras, to achieve split-screen multiplayer effects. Let’s add some code to make this happen:

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.tile.FlxTilemap;
import flixel.FlxSprite;
import flixel.FlxCamera;

class MenuState extends FlxState
{
	var level:FlxTilemap;
	var player:FlxSprite;

    override public function create():Void
    {
        super.create();

        // Set the camera background as white for visibility sake
        ...

        // Create level
        ...

		// Create player
        ...

        // Create cameras

        // We want 4 cameras on screen, so each camera should be
        // half in width and height.
        var halfW:Int = Std.int(FlxG.width/2);
        var halfH:Int = Std.int(FlxG.height/2);

        // Create new cameras
		var cam1 = createCamera(0, 0, halfW, halfH, 0xFF00FF00);
		var cam2 = createCamera(halfW*2, 0, halfW, halfH, 0xFFFFFF00);
		var cam3 = createCamera(0, halfH*2, halfW, halfH, 0xFF00FFFF);
		var cam4 = createCamera(halfW*2, halfH*2, halfW, halfH, 0xFFFF00FF);

		// Use reset() to delete the current existing camera and replace
		// it with a new one. To add more cameras, use add().
		FlxG.cameras.reset(cam1);
		FlxG.cameras.add(cam2);
		FlxG.cameras.add(cam3);
		FlxG.cameras.add(cam4);
    }

    function createCamera (X:Int, Y:Int, W:Int, H:Int, C:Int):FlxCamera
	{
		// Create a new camera with new x/y position, and at w/h sizes
		var camera:FlxCamera = new FlxCamera(X, Y, W, H);
		camera.bgColor = C;
		return camera;
	}

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

        // Collide player with level.
        ...

        // Reset velocity by default, if not moving
        ...

        // Move player
        ...

        // Jump player only if touching ground
        ...
    }

    override public function destroy():Void
    {
        super.destroy();
    }
}

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.tile.FlxTilemap;

import flixel.FlxSprite;

import flixel.FlxCamera;

class MenuState extends FlxState

{

var level:FlxTilemap;

var player:FlxSprite;

override public function create():Void

{

super.create();

// Set the camera background as white for visibility sake

...

// Create level

...

// Create player

...

// Create cameras

// We want 4 cameras on screen, so each camera should be

// half in width and height.

var halfW:Int = Std.int(FlxG.width/2);

var halfH:Int = Std.int(FlxG.height/2);

// Create new cameras

var cam1 = createCamera(0, 0, halfW, halfH, 0xFF00FF00);

var cam2 = createCamera(halfW*2, 0, halfW, halfH, 0xFFFFFF00);

var cam3 = createCamera(0, halfH*2, halfW, halfH, 0xFF00FFFF);

var cam4 = createCamera(halfW*2, halfH*2, halfW, halfH, 0xFFFF00FF);

// Use reset() to delete the current existing camera and replace

// it with a new one. To add more cameras, use add().

FlxG.cameras.reset(cam1);

FlxG.cameras.add(cam2);

FlxG.cameras.add(cam3);

FlxG.cameras.add(cam4);

}

function createCamera (X:Int, Y:Int, W:Int, H:Int, C:Int):FlxCamera

{

// Create a new camera with new x/y position, and at w/h sizes

var camera:FlxCamera = new FlxCamera(X, Y, W, H);

camera.bgColor = C;

return camera;

}

override public function update():Void

{

super.update();

// Collide player with level.

...

// Reset velocity by default, if not moving

...

// Move player

...

// Jump player only if touching ground

...

}

override public function destroy():Void

{

super.destroy();

}

Note: The FlxG has a variable camera that controls the first main camera, whereas the cameras variable holds an list of all the cameras. Be careful not to make typos here.

Now when you test, you’ll get this:

Notice that the background of each camera is of a different colour, but the screen is still showing the same content (one red player moving around). What this means to us, is that we know each camera has properties that can be customised individually.

Now, by knowing this, we can expand on the code to do the following:

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.tile.FlxTilemap;
import flixel.FlxSprite;
import flixel.FlxCamera;

class MenuState extends FlxState
{
	var level:FlxTilemap;
	var player1:FlxSprite;
	var player2:FlxSprite;
	var player3:FlxSprite;
	var player4:FlxSprite;

    override public function create():Void
    {
        super.create();

        // Set the camera background as white for visibility sake
        ...

        // Create level
        ...

		// Create player
        player1 = createPlayer(20, 20, 0xFFFF0000);
        player2 = createPlayer(140, 10, 0xFF00FF00);
        player3 = createPlayer(20, 70, 0xFF0000FF);
        player4 = createPlayer(140, 50, 0xFFFF00FF);
        add(player1);
        add(player2);
        add(player3);
        add(player4);

        // Create cameras

        // We want 4 cameras on screen, so each camera should be
        // half in width and height.
        var halfW:Int = Std.int(FlxG.width/2);
        var halfH:Int = Std.int(FlxG.height/2);

        // Create new cameras
		var cam1 = createCamera(0, 0, halfW, halfH, 0xFFFFFFFF, player1);
		var cam2 = createCamera(halfW*2, 0, halfW, halfH, 0xCCFFFFFF, player2);
		var cam3 = createCamera(0, halfH*2, halfW, halfH, 0x99FFFFFF, player3);
		var cam4 = createCamera(halfW*2, halfH*2, halfW, halfH, 0x66FFFFFF, player4);

		// Use reset() to delete the current existing camera and replace
		// it with a new one. To add more cameras, use add().
		FlxG.cameras.reset(cam1);
		FlxG.cameras.add(cam2);
		FlxG.cameras.add(cam3);
		FlxG.cameras.add(cam4);
    }

    function createPlayer (X:Int, Y:Int, C:Int):FlxSprite
    {
    	var player = new FlxSprite(X, Y);
        player.makeGraphic(5, 10, C); // create red square as player
        player.acceleration.y = 800; // add gravity
        return player;
    }

    function createCamera (X:Int, Y:Int, W:Int, H:Int, C:Int, P:FlxSprite):FlxCamera
	{
		// Create a new camera with new x/y position, and at w/h sizes
		var camera:FlxCamera = new FlxCamera(X, Y, W, H);
		camera.bgColor = C;
		camera.follow(P);
		return camera;
	}

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

        // Collide player with level.
        // NOTE: there is a better way to write collisions between
        // the level and players, but let's ignore that for now.
        FlxG.collide(level, player1);
        FlxG.collide(level, player2);
        FlxG.collide(level, player3);
        FlxG.collide(level, player4);

        // Reset velocity by default, if not moving
        player1.velocity.x = 0;
        player2.velocity.x = 0;
        player3.velocity.x = 0;
        player4.velocity.x = 0;

        // Move player
        if (FlxG.keys.pressed.A) player1.velocity.x = -100;
        if (FlxG.keys.pressed.S) player1.velocity.x = 100;
        if (FlxG.keys.pressed.W && player1.isTouching(flixel.FlxObject.FLOOR)) player1.velocity.y = -200;

        if (FlxG.keys.pressed.F) player2.velocity.x = -100;
        if (FlxG.keys.pressed.G) player2.velocity.x = 100;
        if (FlxG.keys.pressed.T && player2.isTouching(flixel.FlxObject.FLOOR)) player2.velocity.y = -200;

        if (FlxG.keys.pressed.J) player3.velocity.x = -100;
        if (FlxG.keys.pressed.K) player3.velocity.x = 100;
        if (FlxG.keys.pressed.I && player3.isTouching(flixel.FlxObject.FLOOR)) player3.velocity.y = -200;

        if (FlxG.keys.pressed.LEFT) player4.velocity.x = -100;
        if (FlxG.keys.pressed.RIGHT) player4.velocity.x = 100;
        if (FlxG.keys.pressed.UP && player4.isTouching(flixel.FlxObject.FLOOR)) player4.velocity.y = -200;
    }

    override public function destroy():Void
    {
        super.destroy();
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.tile.FlxTilemap;

import flixel.FlxSprite;

import flixel.FlxCamera;

class MenuState extends FlxState

{

var level:FlxTilemap;

var player1:FlxSprite;

var player2:FlxSprite;

var player3:FlxSprite;

var player4:FlxSprite;

override public function create():Void

{

super.create();

// Set the camera background as white for visibility sake

...

// Create level

...

// Create player

player1 = createPlayer(20, 20, 0xFFFF0000);

player2 = createPlayer(140, 10, 0xFF00FF00);

player3 = createPlayer(20, 70, 0xFF0000FF);

player4 = createPlayer(140, 50, 0xFFFF00FF);

add(player1);

add(player2);

add(player3);

add(player4);

// Create cameras

// We want 4 cameras on screen, so each camera should be

// half in width and height.

var halfW:Int = Std.int(FlxG.width/2);

var halfH:Int = Std.int(FlxG.height/2);

// Create new cameras

var cam1 = createCamera(0, 0, halfW, halfH, 0xFFFFFFFF, player1);

var cam2 = createCamera(halfW*2, 0, halfW, halfH, 0xCCFFFFFF, player2);

var cam3 = createCamera(0, halfH*2, halfW, halfH, 0x99FFFFFF, player3);

var cam4 = createCamera(halfW*2, halfH*2, halfW, halfH, 0x66FFFFFF, player4);

// Use reset() to delete the current existing camera and replace

// it with a new one. To add more cameras, use add().

FlxG.cameras.reset(cam1);

FlxG.cameras.add(cam2);

FlxG.cameras.add(cam3);

FlxG.cameras.add(cam4);

}

function createPlayer (X:Int, Y:Int, C:Int):FlxSprite

{

var player = new FlxSprite(X, Y);

player.makeGraphic(5, 10, C); // create red square as player

player.acceleration.y = 800; // add gravity

return player;

}

function createCamera (X:Int, Y:Int, W:Int, H:Int, C:Int, P:FlxSprite):FlxCamera

{

// Create a new camera with new x/y position, and at w/h sizes

var camera:FlxCamera = new FlxCamera(X, Y, W, H);

camera.bgColor = C;

camera.follow(P);

return camera;

}

override public function update():Void

{

super.update();

// Collide player with level.

// NOTE: there is a better way to write collisions between

// the level and players, but let's ignore that for now.

FlxG.collide(level, player1);

FlxG.collide(level, player2);

FlxG.collide(level, player3);

FlxG.collide(level, player4);

// Reset velocity by default, if not moving

player1.velocity.x = 0;

player2.velocity.x = 0;

player3.velocity.x = 0;

player4.velocity.x = 0;

// Move player

if (FlxG.keys.pressed.A) player1.velocity.x = -100;

if (FlxG.keys.pressed.S) player1.velocity.x = 100;

if (FlxG.keys.pressed.W && player1.isTouching(flixel.FlxObject.FLOOR)) player1.velocity.y = -200;

if (FlxG.keys.pressed.F) player2.velocity.x = -100;

if (FlxG.keys.pressed.G) player2.velocity.x = 100;

if (FlxG.keys.pressed.T && player2.isTouching(flixel.FlxObject.FLOOR)) player2.velocity.y = -200;

if (FlxG.keys.pressed.J) player3.velocity.x = -100;

if (FlxG.keys.pressed.K) player3.velocity.x = 100;

if (FlxG.keys.pressed.I && player3.isTouching(flixel.FlxObject.FLOOR)) player3.velocity.y = -200;

if (FlxG.keys.pressed.LEFT) player4.velocity.x = -100;

if (FlxG.keys.pressed.RIGHT) player4.velocity.x = 100;

if (FlxG.keys.pressed.UP && player4.isTouching(flixel.FlxObject.FLOOR)) player4.velocity.y = -200;

}

override public function destroy():Void

{

super.destroy();

}

When you test, you will see that this is starting to look like a 4-player split-screen game:

Please excuse the erratic movements — I was mashing my keyboard to simulate 4 players moving around in their individual screens.

Anyway, I hope this tutorial gives you an idea of how multiple cameras can be used (e.g. for mini-maps or split-screen multiplayers). You can refer to the FlxCamera API for more info. This concludes the tutorial on creating multiple cameras in HaxeFlixel.

HaxeFlixel Tutorial – Using The Camera

April 25, 2015WY Leong Leave a comment

Today we’re going to cover the FlxCamera class, and its common uses in HaxeFlixel. Here’s a list we’ll be going through:

Camera shake
Camera flash/fade/fill
Camera follow/lerp/bounds

Project Setup

First, let’s create a template HaxeFlixel project, as usual:

flixel tpl -n "MyCameraTest"

1	flixel tpl -n "MyCameraTest"

To demonstrate camera scrolling and follow functions, let’s create a large CSV map data. Copy the data below, save it as map-data.csv, and put it in your /assets/data folder:

11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11
11,11,11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11,11,11,64,11,11,11,11,11,11
11,11,11,99,11,11,11,11,11,65,11,11,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,11,64,11,65,11,11,11,11,11,11
11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11
11,11,64,11,11,65,11,11,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,64,11,11,11,11,11,11,11,11,11
11,11,11,11,65,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11
11,11,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,64,11,11,11,11,11,11,11
11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,65,11,11,11,65,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,11,11,64,64,11,11,11,11,11,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,11
11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,11,11,11,65,11,11,11,11
11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,11,11,65,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,12,11,11,11,11,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11
11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,64,65,11,11,11,11,11,11,11,11,11,12,11,11
11,65,11,11,11,11,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,65,11,11,11,11
11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,65,11,11,11,11,11
11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11,11,11,64,11,11,11,11,11,11

11,11,11,99,11,11,11,11,11,65,11,11,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,11,64,11,65,11,11,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,64,11,11,65,11,11,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,64,11,11,11,11,11,11,11,11,11

11,11,11,11,65,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11

11,11,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,64,11,11,11,11,11,11,11

11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,65,11,11,11,65,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,11,11,64,64,11,11,11,11,11,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,11

11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,11,11,11,65,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,11,11,65,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,12,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,12,11,11,11,11,11,11,11,11,64,11,11,11,11,11,11,11,11,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,11,11,64,65,11,11,11,11,11,11,11,11,11,12,11,11

11,65,11,11,11,11,11,11,11,11,11,65,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,65,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,65,11,11,11,11,11

11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11

For the image tilesheet, let’s go to OpenGameArt.org and use one of the tiny 16 basic spritesheets. Download the basictiles.png (a.k.a. basictiles_2.png) and put it in the project’s /assets/images folder.

Now we can begin coding.

Map & Player Setup

We will not be loading map data using TMX file this time — for simplicity sake, we just load using CSV file. We’ll skip the explanation and jump straight to setting up the map code. Let’s start with the MenuState.hx:

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.tile.FlxTilemap;
import flixel.FlxSprite;
import openfl.Assets;

class MenuState extends FlxState
{
	var map:FlxTilemap;
    var player:FlxSprite;

    override public function create():Void
    {
        super.create();

        map = new FlxTilemap();
        var mapData:String = Assets.getText("assets/data/map-data.csv");
        var mapImage:String = "assets/images/basictiles_2.png";
        map.loadMap(mapData, mapImage, 16, 16);
        add(map);
    }

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

    override public function destroy():Void
    {
        super.destroy();
    }
}

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.tile.FlxTilemap;

import flixel.FlxSprite;

import openfl.Assets;

class MenuState extends FlxState

{

var map:FlxTilemap;

var player:FlxSprite;

override public function create():Void

{

super.create();

map = new FlxTilemap();

var mapData:String = Assets.getText("assets/data/map-data.csv");

var mapImage:String = "assets/images/basictiles_2.png";

map.loadMap(mapData, mapImage, 16, 16);

add(map);

}

override public function update():Void

{

super.update();

}

override public function destroy():Void

{

super.destroy();

}

If you build with lime test neko now, you should see this:

Note: If the map doesn’t show up, make sure your .csv file does not end with an empty line.

Let’s set the resolution lower so we can zoom in on the map. In the Main.hx, change the resolution width/height from 640×480 to 320×240:

	var gameWidth:Int = 320; // Width of the game in pixels (might be less / more in actual pixels depending on your zoom).
	var gameHeight:Int = 240; // Height of the game in pixels (might be less / more in actual pixels depending on your zoom).

1 2	var gameWidth:Int = 320; // Width of the game in pixels (might be less / more in actual pixels depending on your zoom). var gameHeight:Int = 240; // Height of the game in pixels (might be less / more in actual pixels depending on your zoom).

Now if you build again with lime test neko , you should get this:

Oh, note that the pillar tile is going to be our player tile. Please excuse the poor choice of graphic; We’re just using one placeholder tilesheet. 🙂

Now, let’s quickly parse the player object so we can move on to the camera stuff:

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.tile.FlxTilemap;
import flixel.FlxSprite;
import openfl.Assets;
import flixel.util.FlxPoint;

class MenuState extends FlxState
{
    var map:FlxTilemap;
    var player:FlxSprite;

    override public function create():Void
    {
        super.create();

        map = new FlxTilemap();
        var mapData:String = Assets.getText("assets/data/map-data.csv");
        var mapImage:String = "assets/images/basictiles_2.png";
        map.loadMap(mapData, mapImage, 16, 16);
        add(map);

        // Note: tile 99 is going to be our player object
        var playerCoords:Array<FlxPoint> = map.getTileCoords(99, false);
        var playerPosition:FlxPoint = playerCoords[0];
        player = new FlxSprite(playerPosition.x, playerPosition.y);

        // Note: when loading graphic for FlxSprite, the default
        // index is 0, so we reset it back to 99 (the player's tile image)
        player.loadGraphic(mapImage, false, 16, 16);
        player.animation.frameIndex = 99;

        add(player);

        // Reset the tile under the player to "11", the grass tile
        var playerTiles:Array<Int> = map.getTileInstances(99);
        var playerTile:Int = playerTiles[0];
        map.setTileByIndex(playerTile, 11, true);
    }

    ...
}

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.tile.FlxTilemap;

import flixel.FlxSprite;

import openfl.Assets;

import flixel.util.FlxPoint;

class MenuState extends FlxState

{

var map:FlxTilemap;

var player:FlxSprite;

override public function create():Void

{

super.create();

map = new FlxTilemap();

var mapData:String = Assets.getText("assets/data/map-data.csv");

var mapImage:String = "assets/images/basictiles_2.png";

map.loadMap(mapData, mapImage, 16, 16);

add(map);

// Note: tile 99 is going to be our player object

var playerCoords:Array<FlxPoint> = map.getTileCoords(99, false);

var playerPosition:FlxPoint = playerCoords[0];

player = new FlxSprite(playerPosition.x, playerPosition.y);

// Note: when loading graphic for FlxSprite, the default

// index is 0, so we reset it back to 99 (the player's tile image)

player.loadGraphic(mapImage, false, 16, 16);

player.animation.frameIndex = 99;

add(player);

// Reset the tile under the player to "11", the grass tile

var playerTiles:Array<Int> = map.getTileInstances(99);

var playerTile:Int = playerTiles[0];

map.setTileByIndex(playerTile, 11, true);

}

...

}

There shouldn’t be any difference visually when you build, — we just have a player object which we can control.

Now let’s add some player input in the update function:

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

        // Reset velocity by default, if not moving
        player.velocity.set(0,0);

        // Move player
        if (FlxG.keys.pressed.UP) player.velocity.y = -100;
        if (FlxG.keys.pressed.DOWN) player.velocity.y = 100;
        if (FlxG.keys.pressed.LEFT) player.velocity.x = -100;
        if (FlxG.keys.pressed.RIGHT) player.velocity.x = 100;
    }

override public function update():Void

{

super.update();

// Reset velocity by default, if not moving

player.velocity.set(0,0);

// Move player

if (FlxG.keys.pressed.UP) player.velocity.y = -100;

if (FlxG.keys.pressed.DOWN) player.velocity.y = 100;

if (FlxG.keys.pressed.LEFT) player.velocity.x = -100;

if (FlxG.keys.pressed.RIGHT) player.velocity.x = 100;

}

And if you build now, you should be able to control the pillar… er, player:

Great! Now let’s move on to the main content of today’s tutorial — using the camera.

The reason why we took quite a few steps to setup the game is so that we have a visual reference, to know the camera functions are working. If you started with a simple empty black screen with a blue box in the middle, it would’ve been difficult to tell if the camera actually shook, or if the camera actually follows the player as you move.

Camera Shake

The simplest way to use the camera shake can be written as follows:

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

        // Reset velocity by default, if not moving
        player.velocity.set(0,0);

        // Move player
        if (FlxG.keys.pressed.UP) player.velocity.y = -100;
        if (FlxG.keys.pressed.DOWN) player.velocity.y = 100;
        if (FlxG.keys.pressed.LEFT) player.velocity.x = -100;
        if (FlxG.keys.pressed.RIGHT) player.velocity.x = 100;

        // Shake camera
        if (FlxG.keys.pressed.ONE) FlxG.camera.shake(0.01, 0.5);
        if (FlxG.keys.pressed.TWO) FlxG.camera.shake(0.01, 0.5, null, true, flixel.FlxCamera.SHAKE_VERTICAL_ONLY);
        if (FlxG.keys.pressed.THREE) FlxG.camera.shake(0.01, 0.5, null, true, flixel.FlxCamera.SHAKE_HORIZONTAL_ONLY);
    }

override public function update():Void

{

super.update();

// Reset velocity by default, if not moving

player.velocity.set(0,0);

// Move player

if (FlxG.keys.pressed.UP) player.velocity.y = -100;

if (FlxG.keys.pressed.DOWN) player.velocity.y = 100;

if (FlxG.keys.pressed.LEFT) player.velocity.x = -100;

if (FlxG.keys.pressed.RIGHT) player.velocity.x = 100;

// Shake camera

if (FlxG.keys.pressed.ONE) FlxG.camera.shake(0.01, 0.5);

if (FlxG.keys.pressed.TWO) FlxG.camera.shake(0.01, 0.5, null, true, flixel.FlxCamera.SHAKE_VERTICAL_ONLY);

if (FlxG.keys.pressed.THREE) FlxG.camera.shake(0.01, 0.5, null, true, flixel.FlxCamera.SHAKE_HORIZONTAL_ONLY);

}

You can refer to the FlxCamera API on how to the function callback and whatnot. If you’re not sure how callbacks are written, try reading the Button events & callback tutorial here.

Notice how when the screen shakes, there’s a visible black area around the screen’s edges:

From a quick search, this page reveals a simple solution. Just add the following lines in your create function to extend the camera size:

    override public function create():Void
    {
        super.create();

        ...

        // Note: tile 99 is going to be our player object
        ...

        // Note: when loading graphic for FlxSprite, the default
        // index is 0, so we reset it back to 99 (the player's tile image)
        ...

        // Reset the tile under the player to "11", the grass tile
        ...

        // Extend the camera a little to cover for shake area
        var ext = 50;
        FlxG.camera.setSize(FlxG.width + ext, FlxG.height + ext);
        FlxG.camera.setPosition( - ext / 2, - ext / 2);
    }

override public function create():Void

{

super.create();

...

// Note: tile 99 is going to be our player object

...

// Note: when loading graphic for FlxSprite, the default

// index is 0, so we reset it back to 99 (the player's tile image)

...

// Reset the tile under the player to "11", the grass tile

...

// Extend the camera a little to cover for shake area

var ext = 50;

FlxG.camera.setSize(FlxG.width + ext, FlxG.height + ext);

FlxG.camera.setPosition( - ext / 2, - ext / 2);

}

Note that the ext value is arbitrary, as long as the camera shake’s intensity doesn’t go beyond the extended range.

And now there won’t be any visible black area when the screen shakes:

Camera Flash/Fade/Fill

Camera flash can be used for situations such as lightning flash, or explosions. Let’s just modify the existing camera shake test buttons like this:

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

        // Reset velocity by default, if not moving
        ...

        // Move player
        ...

        // Shake camera
        var duration = 0.5;
        if (FlxG.keys.pressed.ONE)
        {
            // Shake vertically AND horizontally, and flash white color.
            FlxG.camera.shake(0.01, duration);
            FlxG.camera.flash(0xFFFFFFFF, duration);
        }
        if (FlxG.keys.pressed.TWO)
        {
            // Shake vertically only, and flash red color.
            FlxG.camera.shake(0.01, duration, null, true, flixel.FlxCamera.SHAKE_VERTICAL_ONLY);
            FlxG.camera.flash(0xFFFF0000, duration);
        }
        if (FlxG.keys.pressed.THREE)
        {
            // Shake horizontally only, and flash black color.
            FlxG.camera.shake(0.01, duration, null, true, flixel.FlxCamera.SHAKE_HORIZONTAL_ONLY);
            FlxG.camera.flash(0xFF000000, duration);
        }
    }

override public function update():Void

{

super.update();

// Reset velocity by default, if not moving

...

// Move player

...

// Shake camera

var duration = 0.5;

if (FlxG.keys.pressed.ONE)

{

// Shake vertically AND horizontally, and flash white color.

FlxG.camera.shake(0.01, duration);

FlxG.camera.flash(0xFFFFFFFF, duration);

}

if (FlxG.keys.pressed.TWO)

{

// Shake vertically only, and flash red color.

FlxG.camera.shake(0.01, duration, null, true, flixel.FlxCamera.SHAKE_VERTICAL_ONLY);

FlxG.camera.flash(0xFFFF0000, duration);

}

if (FlxG.keys.pressed.THREE)

{

// Shake horizontally only, and flash black color.

FlxG.camera.shake(0.01, duration, null, true, flixel.FlxCamera.SHAKE_HORIZONTAL_ONLY);

FlxG.camera.flash(0xFF000000, duration);

}

Now you should get this when you test:

The camera’s fade and fill functions are similar to flash .

fade will gradually fill the screen with a color — the opposite of flash. fill instantly fills the screen with a certain colour. These two functions can be used hand-in-hand for situations like fading in or out between screens. You can check out the FlxCamera API for more info.

Camera Follow/Lerp/Bounds

To get the camera to follow something (in this case, the player), you can just write it like this:

    override public function create():Void
    {
        super.create();

        ...

        // Note: tile 99 is going to be our player object
        ...

        // Note: when loading graphic for FlxSprite, the default
        // index is 0, so we reset it back to 99 (the player's tile image)
        ...

        // Reset the tile under the player to "11", the grass tile
        ...

        // Extend the camera a little to cover for shake area
        ...

        // Follow the pillar... er, player.
        FlxG.camera.follow(player);
    }

override public function create():Void

{

super.create();

...

// Note: tile 99 is going to be our player object

...

// Note: when loading graphic for FlxSprite, the default

// index is 0, so we reset it back to 99 (the player's tile image)

...

// Reset the tile under the player to "11", the grass tile

...

// Extend the camera a little to cover for shake area

...

// Follow the pillar... er, player.

FlxG.camera.follow(player);

}

And here’s the result when you move around:

At first glance, there are three problems:

The camera scroll is too rigid (no deadzone).
The camera movement is not smooth (no lerping).
The camera can move out of bounds (shows the black area).

Let’s go fix each of the problems above.

1) To fix the rigid scroll issue, you need to add “deadzones” in the camera (an area within the screen that won’t scroll the camera). HaxeFlixel has a few presets which can be used in the follow function, as indicated in the API page. Here’s an example usage, by modifying the existing code:

        // Follow the pillar... er, player.
        FlxG.camera.follow(player, flixel.FlxCamera.STYLE_TOPDOWN);

1 2	// Follow the pillar... er, player. FlxG.camera.follow(player, flixel.FlxCamera.STYLE_TOPDOWN);

Note that we added the preset STYLE_TOPDOWN and now it’ll automatically follow the player, with a little deadzone, as demonstrated below:

2) To add smooth camera scrolling (lerping the movement), you can just add additional values to the follow function, like this (refer to the API):

        // Follow the pillar... er, player.
        FlxG.camera.follow(player, flixel.FlxCamera.STYLE_TOPDOWN, null, 10);

1 2	// Follow the pillar... er, player. FlxG.camera.follow(player, flixel.FlxCamera.STYLE_TOPDOWN, null, 10);

And now the camera will lag a little when the player moves:

3) To prevent the camera from moving out of bounds, you just need to set the bounds of the map, like this:

    override public function create():Void
    {
        super.create();

        ...

        // Note: tile 99 is going to be our player object
        ...

        // Note: when loading graphic for FlxSprite, the default
        // index is 0, so we reset it back to 99 (the player's tile image)
        ...

        // Reset the tile under the player to "11", the grass tile
        ...

        // Extend the camera a little to cover for shake area
        ...

        // Follow the pillar... er, player.
        ...

        // Set the camera bounds
        FlxG.camera.setBounds(0, 0, map.width, map.height);
    }

override public function create():Void

{

super.create();

...

// Note: tile 99 is going to be our player object

...

// Note: when loading graphic for FlxSprite, the default

// index is 0, so we reset it back to 99 (the player's tile image)

...

// Reset the tile under the player to "11", the grass tile

...

// Extend the camera a little to cover for shake area

...

// Follow the pillar... er, player.

...

// Set the camera bounds

FlxG.camera.setBounds(0, 0, map.width, map.height);

}

And this will give you the result:

There’s a lot of other things you can experiment with in FlxCamera, so go ahead and try them all out! The information above should be enough to give you a rough idea of what’s possible with the FlxCamera — they’re very handy in prototyping games.

This concludes today’s tutorial on HaxeFlixel’s camera. In the next post, we’ll try something more advanced with the camera — split screens and parallax scrolling.

HaxeFlixel Tutorial – Custom App Icon

April 18, 2015WY Leong 1 Comment

This is supposed to be an easy step, but I fumbled for an hour figuring this out. So here’s a tutorial to help those who may have had difficulty like me — to add a custom icon to a HaxeFlixel build.

According to a HaxeFlixel page here, we learn that we can include the icon in the Project.xml file. Whenever you create a new HaxeFlixel project, there is this line at the bottom of the Project.xml file:

	<!--Place custom nodes like icons here (higher priority to override the HaxeFlixel icon)-->

1	<!--Place custom nodes like icons here (higher priority to override the HaxeFlixel icon)-->

What can we add here? According to the OpenFL XML format page, the syntax can be as follows:

<icon path="icon.png" size="64" />
<icon path="icon.png" width="96" height="96" />
<icon path="icon.svg" />

It wasn’t mentioned what exactly “path” means. Anyway, I figured it out after doing some searching, and found this Google forum thread. Read on for a summary of what I learned.

The path="icon.png" above implies you can put your icon file in your root folder (where your Project.xml is), but in other cases we could put them in another folder such as /assets/images or /assets/icons .

If your icon file is in the /assets/images folder, then the simplest code would be as follows:

<icon path="assets/icons/icon.svg" />

1	<icon path="assets/icons/icon.svg" />

Now when you build your game with lime test neko , you should see that your application has the icon — by checking the /export/<target>/neko/bin folder (in the example below, I used the flixel.svg icon):

But what if the icon is still showing the default HaxeFlixel logo? Referring back to the Google forum thread link mentioned above, you may need to try the following:

1) Removing the icon in the Flixel XML

Locate the include.xml in the flixel folder, then comment or remove this line: <icon path="assets/images/logo/HaxeFlixel.svg" /> . For OSX, the path would default to “/usr/lib/haxe/lib/flixel/3,3,6”. I’m not familiar with the path for Windows and Linux, but I hope it doesn’t take too long for you to find it. 🙂

2) Clearing the cache

Delete your HaxeFlixel project’s /export folder and rebuild your game (i.e. lime test neko ). The app icon does not get regenerated after you build your game for the first time, so you have to clear the cache for the icon to be updated.

3) Check your SVG icon

I was using this flixel svg icon as a test, and somehow the icon didn’t appear correctly when I built the game. I had to open the SVG file with SublimeText, and change the data a little, from this:

<svg width="128" height="128" viewBox="0 0 4 4" version="1" xmlns="http://www.w3.org/2000/svg">

1	<svg width="128" height="128" viewBox="0 0 4 4" version="1" xmlns="http://www.w3.org/2000/svg">

… to this:

<svg width="4" height="4" viewBox="0 0 4 4" version="1" xmlns="http://www.w3.org/2000/svg">

1	<svg width="4" height="4" viewBox="0 0 4 4" version="1" xmlns="http://www.w3.org/2000/svg">

In a nutshell, the width and height needs to match the viewBox property. Otherwise, the icon will appear weird, e.g. as a tiny image instead of the full icon.

Also, the width and height needs to be the same, otherwise the resulting icon will appear stretched.

This concludes the tutorial on including a custom icon into your HaxeFlixel game.

A Programming Devblog

Infrequent updates

Menu

Widgets

Search

HaxeFlixel Tutorial – Particles and Emitters

Setup

Introduction

Default Particle Emitters

Custom Particle Images

Animating Particles

Fire Smoke Trail

Explosions

Explosions With Particle Gravity

Closure

HaxeFlixel Tutorial – Parallax Scrolling

Setup

Code Setup

Parallax with [scrollFactor]

Parallax with [FlxBackdrop]

HaxeFlixel Tutorial – Multiple Cameras

Setup

Code

HaxeFlixel Tutorial – Using The Camera

Project Setup

Map & Player Setup

Camera Shake

Camera Flash/Fade/Fill

Camera Follow/Lerp/Bounds

HaxeFlixel Tutorial – Custom App Icon

1) Removing the icon in the Flixel XML

2) Clearing the cache

3) Check your SVG icon