HaxeFlixel Tutorial – Sliders

April 11, 2015WY Leong Leave a comment

Today we’ll be covering some basics on FlxSlider. Sliders are commonly used in options menu, e.g. music volume.

For the purpose of simplicity, let’s proceed with this goal — a slider that can adjust the x/y position of a player object.

Note: It seems the FlxSlider only has a horizontal bar, no vertical version.

Setup

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

flixel tpl -n "MySliderTest"

1	flixel tpl -n "MySliderTest"

Creating The Player

Let’s create a player object in the default starting class for HaxeFlixel projects — the MenuState.hx:

package;

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

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

        // Create a blue square as the player
        var myPlayer = new FlxSprite(200, 200);
        myPlayer.makeGraphic(20, 30, 0xFF0000FF);
        add(myPlayer);
    }

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

    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 a blue square as the player

var myPlayer = new FlxSprite(200, 200);

myPlayer.makeGraphic(20, 30, 0xFF0000FF);

add(myPlayer);

}

override public function update():Void

{

super.update();

}

override public function destroy():Void

{

super.destroy();

}

You should see this when you build with lime test neko :

Creating The Slider

The slider is not part of the basic flixel package — we need to use the flixel-addons haxelib. Go to the Project.xml file and uncomment the line as shown below:

	<!--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" />

Now that the haxelib is included, you can use FlxSlider. In the MenuState.hx, let’s add the following code:

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.FlxSprite;
import flixel.addons.ui.FlxSlider;

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

        // Create a blue square as the player
        ...

        // Create a slider and track the "x" property
        var mySliderH = new FlxSlider(myPlayer,"x",10,10,200,500,300,40,15,0xFFFF0000,0xFF00FF00);
        add(mySliderH);

        // Create a slider and track the "y" property
        var mySliderV = new FlxSlider(myPlayer,"y",10,100,200,400,300,40,15,0xFFFF0000,0xFF00FF00);
        add(mySliderV);
    }

    ...
}

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.FlxSprite;

import flixel.addons.ui.FlxSlider;

class MenuState extends FlxState

{

override public function create():Void

{

super.create();

// Create a blue square as the player

...

// Create a slider and track the "x" property

var mySliderH = new FlxSlider(myPlayer,"x",10,10,200,500,300,40,15,0xFFFF0000,0xFF00FF00);

add(mySliderH);

// Create a slider and track the "y" property

var mySliderV = new FlxSlider(myPlayer,"y",10,100,200,400,300,40,15,0xFFFF0000,0xFF00FF00);

add(mySliderV);

}

...

}

And here’s the output:

It’s a little ugly, but it works out of the box. We’ll polish the aesthetics later.

Referring to the new() function in the API page, here’s an illustration for quick reference:

Note — the Thickness parameter affects both the handle AND the bar’s thickness.

Improving The Slider

Now, how do we improve the slider? Let’s list down a few things we may want to do:

Have an image for the handle
Have an image for the bar
Replace the labels with custom font and text
Play sound on event (hover, click)
Trigger a callback on value change, for whatever reason

That’s a handful of things, so let’s tackle them one by one.

Setup (again)

Before we proceed, let’s download some placeholder resources. Let’s use Kenney’s UI Pack — it contains some sounds, fonts and graphics in one package.

For graphics, put these in the /assets/images folder: blue_sliderDown.png and blue_panel.png.

For the audio, put these in the /assets/sounds folder: rollover1.ogg and switch3.ogg.

For the font, put this in the /assets/data folder: kenvector_future.ttf.

Code Cleanup

Let’s clean up the code a little — adhering to the DRY principle:

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

        // Make background lighter for visibility sake
        FlxG.camera.bgColor = 0xFF555555;

        // Create a blue square as the player
        var myPlayer = new FlxSprite(200, 200);
        myPlayer.makeGraphic(20, 30, 0xFF0000FF);
        add(myPlayer);

        // Declare variables for visibility sake
        var sX = 10; // slider X
        var sY = 10; // slider Y
        var sMin = 200; // slider MinValue
        var sMax = 500; // slider MaxValue
        var sW = 400; // slider width
        var sH = 40; // handle/slider height
        var sT = 20; // handle/slider thickness

        // Create the sliders. We don't provide color parameters
        // because we're using custom images already.
        var mySliderH = new FlxSlider(myPlayer,"x",sX,sY,sMin,sMax,sW,sH,sT);
        var mySliderV = new FlxSlider(myPlayer,"y",sX,sY+80,sMin,sMax,sW,sH,sT);

        // Add the sliders to the game
        add(mySliderH);
        add(mySliderV);
    }

override public function create():Void

{

super.create();

// Make background lighter for visibility sake

FlxG.camera.bgColor = 0xFF555555;

// Create a blue square as the player

var myPlayer = new FlxSprite(200, 200);

myPlayer.makeGraphic(20, 30, 0xFF0000FF);

add(myPlayer);

// Declare variables for visibility sake

var sX = 10; // slider X

var sY = 10; // slider Y

var sMin = 200; // slider MinValue

var sMax = 500; // slider MaxValue

var sW = 400; // slider width

var sH = 40; // handle/slider height

var sT = 20; // handle/slider thickness

// Create the sliders. We don't provide color parameters

// because we're using custom images already.

var mySliderH = new FlxSlider(myPlayer,"x",sX,sY,sMin,sMax,sW,sH,sT);

var mySliderV = new FlxSlider(myPlayer,"y",sX,sY+80,sMin,sMax,sW,sH,sT);

// Add the sliders to the game

add(mySliderH);

add(mySliderV);

}

And here’s the updated output:

Updating The Slider Body

The body property is a FlxSprite. That means we can modify the image by using loadGraphic , or create a complicated Sprite image and load it into the body. In our case, the default FlxSprite does not have 9-slice capabilities. But wait! We can create a 9-slice image, then load that image into the slider’s body. Awesome hack, huh? Let’s try that now:

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.FlxSprite;
import flixel.addons.ui.FlxSlider;
import flixel.addons.ui.FlxUI9SliceSprite;

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

        // Make background lighter for visibility sake
        ...

        // Create a blue square as the player
        ...

        // Declare variables for visibility sake
        ...

        // Create the sliders. We don't provide color parameters
        // because we're using custom images already.
        ...

        // Declare variables for the sliced image.
        // Note the sliced image's width/height matches the slider.
        var bodyImage = "assets/images/blue_panel.png";
        var bodyRect = new flash.geom.Rectangle(0,0,sW,sT);
        var bodySlice = [10,10,90,90]; // Refer to the blue_panel.png for the x1,y1,x2,y2 slice points
        var bodySprite = new FlxUI9SliceSprite(0,0,bodyImage,bodyRect,bodySlice); // create the 9-slice image

        // Copy the resulted 9-slice image into the slider's body image
        // and center the body between the handle
        mySliderH.body.loadGraphicFromSprite(bodySprite);
        mySliderH.body.y += (mySliderH.handle.height/2) - (mySliderH.body.height/2);

        // Add the sliders to the game
        ...
    }

    ...
}

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.FlxSprite;

import flixel.addons.ui.FlxSlider;

import flixel.addons.ui.FlxUI9SliceSprite;

class MenuState extends FlxState

{

override public function create():Void

{

super.create();

// Make background lighter for visibility sake

...

// Create a blue square as the player

...

// Declare variables for visibility sake

...

// Create the sliders. We don't provide color parameters

// because we're using custom images already.

...

// Declare variables for the sliced image.

// Note the sliced image's width/height matches the slider.

var bodyImage = "assets/images/blue_panel.png";

var bodyRect = new flash.geom.Rectangle(0,0,sW,sT);

var bodySlice = [10,10,90,90]; // Refer to the blue_panel.png for the x1,y1,x2,y2 slice points

var bodySprite = new FlxUI9SliceSprite(0,0,bodyImage,bodyRect,bodySlice); // create the 9-slice image

// Copy the resulted 9-slice image into the slider's body image

// and center the body between the handle

mySliderH.body.loadGraphicFromSprite(bodySprite);

mySliderH.body.y += (mySliderH.handle.height/2) - (mySliderH.body.height/2);

// Add the sliders to the game

...

}

...

}

And here’s the output:

Updating The Slider Handle

We can do the same thing (loading a 9-sliced image) for the handle, but it’s unnecessary in this case. So let’s do it in a simpler way, and update the code as follows:

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

        // Make background lighter for visibility sake
        ...

        // Create a blue square as the player
        ...

        // Declare variables for visibility sake
        ...

        // Create the sliders. We don't provide color parameters
        // because we're using custom images already.
        ...

        // Declare variables for the sliced image.
        // Note the sliced image's width/height matches the slider.
        ...

        // Copy the resulted 9-slice image into the slider's body image
        // and center the body between the handle
        ...

        // Load the handle image as a non-sliced sprite
        var handleImage = "assets/images/blue_sliderDown.png";
        mySliderH.handle.loadGraphic(handleImage);

        // Reposition the handle to center of bar
        mySliderH.handle.y = mySliderH.body.y - (mySliderH.handle.height/2) + (mySliderH.body.height/2);

        // Add the sliders to the game
        ...
    }

override public function create():Void

{

super.create();

// Make background lighter for visibility sake

...

// Create a blue square as the player

...

// Declare variables for visibility sake

...

// Create the sliders. We don't provide color parameters

// because we're using custom images already.

...

// Declare variables for the sliced image.

// Note the sliced image's width/height matches the slider.

...

// Copy the resulted 9-slice image into the slider's body image

// and center the body between the handle

...

// Load the handle image as a non-sliced sprite

var handleImage = "assets/images/blue_sliderDown.png";

mySliderH.handle.loadGraphic(handleImage);

// Reposition the handle to center of bar

mySliderH.handle.y = mySliderH.body.y - (mySliderH.handle.height/2) + (mySliderH.body.height/2);

// Add the sliders to the game

...

}

And this is how it looks:

Updating The Text

We can easily format the slider’s text like this:

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

        // Make background lighter for visibility sake
        ...

        // Create a blue square as the player
        ...

        // Declare variables for visibility sake
        ...

        // Create the sliders. We don't provide color parameters
        // because we're using custom images already.
        ...

        // Declare variables for the sliced image.
        // Note the sliced image's width/height matches the slider.
        ...

        // Copy the resulted 9-slice image into the slider's body image
        // and center the body between the handle
        ...

        // Load the handle image as a non-sliced sprite
        ...

        // Reposition the handle to center of bar
        ...

        // Update the texts
        var fontPath = "assets/data/kenvector_future.ttf";
        var fontSize = 12;
        var fontColor = 0xFFFFFFFF;
        mySliderH.minLabel.setFormat(fontPath, fontSize, fontColor, "right");
        mySliderH.maxLabel.setFormat(fontPath, fontSize, fontColor, "left");
        mySliderH.nameLabel.setFormat(fontPath, fontSize, fontColor, "center");
        mySliderH.valueLabel.setFormat(fontPath, fontSize, fontColor, "center");
        mySliderH.nameLabel.text = "The awesome X position";

        // Add the sliders to the game
        ...
    }

override public function create():Void

{

super.create();

// Make background lighter for visibility sake

...

// Create a blue square as the player

...

// Declare variables for visibility sake

...

// Create the sliders. We don't provide color parameters

// because we're using custom images already.

...

// Declare variables for the sliced image.

// Note the sliced image's width/height matches the slider.

...

// Copy the resulted 9-slice image into the slider's body image

// and center the body between the handle

...

// Load the handle image as a non-sliced sprite

...

// Reposition the handle to center of bar

...

// Update the texts

var fontPath = "assets/data/kenvector_future.ttf";

var fontSize = 12;

var fontColor = 0xFFFFFFFF;

mySliderH.minLabel.setFormat(fontPath, fontSize, fontColor, "right");

mySliderH.maxLabel.setFormat(fontPath, fontSize, fontColor, "left");

mySliderH.nameLabel.setFormat(fontPath, fontSize, fontColor, "center");

mySliderH.valueLabel.setFormat(fontPath, fontSize, fontColor, "center");

mySliderH.nameLabel.text = "The awesome X position";

// Add the sliders to the game

...

}

Now, the slider looks a lot better already, with the updated text and font:

Adding Sound

There are only two events which you can attach a sound to — the hover and click events. So, since it’s there, we might as well make the best of it:

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

        // Make background lighter for visibility sake
        ...

        // Create a blue square as the player
        ...

        // Declare variables for visibility sake
        ...

        // Create the sliders. We don't provide color parameters
        // because we're using custom images already.
        ...

        // Declare variables for the sliced image.
        // Note the sliced image's width/height matches the slider.
        ...

        // Copy the resulted 9-slice image into the slider's body image
        // and center the body between the handle
        ...

        // Load the handle image as a non-sliced sprite
        ...

        // Reposition the handle to center of bar
        ...

        // Update the texts
        ...

        // Add sound events - on hover, and on click
        mySliderH.hoverSound = "assets/sounds/rollover1.ogg";
        mySliderH.clickSound = "assets/sounds/switch3.ogg";

        // Add the sliders to the game
        ...
    }

override public function create():Void

{

super.create();

// Make background lighter for visibility sake

...

// Create a blue square as the player

...

// Declare variables for visibility sake

...

// Create the sliders. We don't provide color parameters

// because we're using custom images already.

...

// Declare variables for the sliced image.

// Note the sliced image's width/height matches the slider.

...

// Copy the resulted 9-slice image into the slider's body image

// and center the body between the handle

...

// Load the handle image as a non-sliced sprite

...

// Reposition the handle to center of bar

...

// Update the texts

...

// Add sound events - on hover, and on click

mySliderH.hoverSound = "assets/sounds/rollover1.ogg";

mySliderH.clickSound = "assets/sounds/switch3.ogg";

// Add the sliders to the game

...

}

I can’t demonstrate the sound through image or GIF, but you should be able to hear the sound when you test the game.

Event Callback

Finally, we most probably need to do something when a value changes on the slider. Perhaps, for example, when the player’s x-position is updated, we play the player’s “victory” animation. To add an event, just add a function to the callback property, like this:

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.FlxSprite;
import flixel.addons.ui.FlxSlider;
import flixel.addons.ui.FlxUI9SliceSprite;

class MenuState extends FlxState
{
	var _sliderH:FlxSlider;

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

        // Make background lighter for visibility sake
        ...

        // Create a blue square as the player
        ...

        // Declare variables for visibility sake
        ...

        // Create the sliders. We don't provide color parameters
        // because we're using custom images already.
        ...

        // Declare variables for the sliced image.
        // Note the sliced image's width/height matches the slider.
        ...

        // Copy the resulted 9-slice image into the slider's body image
        // and center the body between the handle
        ...

        // Load the handle image as a non-sliced sprite
        ...

        // Reposition the handle to center of bar
        ...

        // Update the texts
        ...

        // Add sound events - on hover, and on click
        ...

        // Add callback event
        _sliderH = mySliderH;
        mySliderH.callback = onValueChange;

        // Add the sliders to the game
        ...
    }

    function onValueChange (newValue:Float)
    {
    	// Since "newValue" may not be sufficient sometimes, we can
    	// make a class-scope reference using _sliderH, and modify
    	// its properties instead.

    	// NOTE: this value is actually outdated.
    	trace("old value : " + _sliderH.valueLabel.text);

    	// NOTE: the "newValue" is actually percentage value (0 to 1),
    	// so, use the "value" property instead.
    	trace("new value (percentage): " + newValue);
    	trace("new value : " + _sliderH.value);
    }

    ...
}

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.FlxSprite;

import flixel.addons.ui.FlxSlider;

import flixel.addons.ui.FlxUI9SliceSprite;

class MenuState extends FlxState

{

var _sliderH:FlxSlider;

override public function create():Void

{

super.create();

// Make background lighter for visibility sake

...

// Create a blue square as the player

...

// Declare variables for visibility sake

...

// Create the sliders. We don't provide color parameters

// because we're using custom images already.

...

// Declare variables for the sliced image.

// Note the sliced image's width/height matches the slider.

...

// Copy the resulted 9-slice image into the slider's body image

// and center the body between the handle

...

// Load the handle image as a non-sliced sprite

...

// Reposition the handle to center of bar

...

// Update the texts

...

// Add sound events - on hover, and on click

...

// Add callback event

_sliderH = mySliderH;

mySliderH.callback = onValueChange;

// Add the sliders to the game

...

}

function onValueChange (newValue:Float)

{

// Since "newValue" may not be sufficient sometimes, we can

// make a class-scope reference using _sliderH, and modify

// its properties instead.

// NOTE: this value is actually outdated.

trace("old value : " + _sliderH.valueLabel.text);

// NOTE: the "newValue" is actually percentage value (0 to 1),

// so, use the "value" property instead.

trace("new value (percentage): " + newValue);

trace("new value : " + _sliderH.value);

}

...

}

And this concludes the slider tutorial.

In case you wonder why I am doing a lengthy tutorial on HaxeFlixel slider — it’s because the FlxSlider is the very first thing I attempted to learn in HaxeFlixel, and considering my lack of Haxe/HaxeFlixel knowledge back then, I couldn’t even figure it out. Now that I am more familiar with it, I figure I’d write a tutorial on it to test my understanding. I guess I’ve learned a lot! 🙂

HaxeFlixel Tutorial – Creating A Simple Text

April 8, 2015WY Leong Leave a comment

Today we’re going to create simple texts in HaxeFlixel, using FlxText.

Setup

Let’s begin with a template HaxeFlixel project by using the following command:

flixel tpl -n "MyTextTest"

1	flixel tpl -n "MyTextTest"

As usual, we will begin coding from MenuState.hx file.

Simple Text

Now let’s add a simple text onto the screen. You can refer to the post here (check the links mentioned) or here (FlxText section) on how to add text, but in case you’re lazy, here’s the code:

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.FlxSprite;
import flixel.text.FlxText;

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

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

        // For illustration purpose, show a 150-width box
        // behind the text.
        var box = new FlxSprite(100, 50);
        box.makeGraphic(150, 150, 0x99FF0000);
        add(box);

        // Add a basic text. Note how the text auto-wraps when
        // it exceeds the width, which we set as "150" below.
        var text = "The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
        var myText = new FlxText(100,50,150,text,12,false);
        add(myText);
    }

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

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

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.FlxSprite;

import flixel.text.FlxText;

class MenuState extends FlxState

{

override public function create():Void

{

super.create();

// Set the background color for visibility sake

FlxG.camera.bgColor = 0xFF999999;

// For illustration purpose, show a 150-width box

// behind the text.

var box = new FlxSprite(100, 50);

box.makeGraphic(150, 150, 0x99FF0000);

add(box);

// Add a basic text. Note how the text auto-wraps when

// it exceeds the width, which we set as "150" below.

var text = "The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";

var myText = new FlxText(100,50,150,text,12,false);

add(myText);

}

override public function update():Void

{

super.update();

}

override public function destroy():Void

{

super.destroy();

}

If you build using lime test neko , the output would look like this:

Text with custom font

Here’s how to create a text with custom font. We assume your custom font is named “kenvector_future.ttf” and you have put it in your HaxeFlixel project’s assets/data/ folder. You just need to create a new FlxText, and use setFormat() to update its properties.

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.FlxSprite;
import flixel.text.FlxText;

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

        // Set the background color for visibility sake
        ...

        // For illustration purpose, show a 150-width box
        // behind the text.
        ...

        // Add a basic text. Note how the text auto-wraps when
        // it exceeds the width, which we set as "150" below.
        ...

        // Add a text using custom font.
        var myCustomText = new FlxText(300,50,150,text,12);
        myCustomText.setFormat("assets/data/kenvector_future.ttf");
        add(myCustomText);
    }

    ...
}

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.FlxSprite;

import flixel.text.FlxText;

class MenuState extends FlxState

{

override public function create():Void

{

super.create();

// Set the background color for visibility sake

...

// For illustration purpose, show a 150-width box

// behind the text.

...

// Add a basic text. Note how the text auto-wraps when

// it exceeds the width, which we set as "150" below.

...

// Add a text using custom font.

var myCustomText = new FlxText(300,50,150,text,12);

myCustomText.setFormat("assets/data/kenvector_future.ttf");

add(myCustomText);

}

...

}

And now the output would look like this:

Note that you can use setFormat to modify other properties too — check the API for more info.

To further demonstrate how else you can further modify the properties using setFormat , here’s an example:

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

        // Set the background color for visibility sake
        ...

        // For illustration purpose, show a 150-width box
        // behind the text.
        ...

        // Add a basic text. Note how the text auto-wraps when
        // it exceeds the width, which we set as "150" below.
        ...

        // Add a text using custom font.
        ...

        // Add a text with default font, but added properties.
        var myFancyText = new FlxText(100,250,150,text,12,false);
        myFancyText.setFormat(null, 12, 0xFF00FF00, "right", FlxText.BORDER_SHADOW, 0xFF0000FF);
        myFancyText.borderSize = 8; // mess around with the shadow border size
        add(myFancyText);
    }

override public function create():Void

{

super.create();

// Set the background color for visibility sake

...

// For illustration purpose, show a 150-width box

// behind the text.

...

// Add a basic text. Note how the text auto-wraps when

// it exceeds the width, which we set as "150" below.

...

// Add a text using custom font.

...

// Add a text with default font, but added properties.

var myFancyText = new FlxText(100,250,150,text,12,false);

myFancyText.setFormat(null, 12, 0xFF00FF00, "right", FlxText.BORDER_SHADOW, 0xFF0000FF);

myFancyText.borderSize = 8; // mess around with the shadow border size

add(myFancyText);

}

And here’s the output:

Text Filters

You can also add filters to texts — check out the possible filters at the API page. The problem a beginner would have with the API is — there isn’t any explanation on how to use it. So, here’s an example:

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

        // Set the background color for visibility sake
        ...

        // For illustration purpose, show a 150-width box
        // behind the text.
        ...

        // Add a basic text. Note how the text auto-wraps when
        // it exceeds the width, which we set as "150" below.
        ...

        // Add a text using custom font.
        ...

        // Add a text with default font, but added properties.
        ...

        // Add a text with filter
        var myFilterText = new FlxText(300,250,150,text,12,false);
        myFilterText.addFilter(new flash.filters.BlurFilter());
        add(myFilterText);
    }

override public function create():Void

{

super.create();

// Set the background color for visibility sake

...

// For illustration purpose, show a 150-width box

// behind the text.

...

// Add a basic text. Note how the text auto-wraps when

// it exceeds the width, which we set as "150" below.

...

// Add a text using custom font.

...

// Add a text with default font, but added properties.

...

// Add a text with filter

var myFilterText = new FlxText(300,250,150,text,12,false);

myFilterText.addFilter(new flash.filters.BlurFilter());

add(myFilterText);

}

And here is the result:

I believe with the setFormat and addFilter functions above, you will be able to create texts that suit most of your needs. This concludes the tutorial on creating simple text in HaxeFlixel.

Haxe Tutorial – Upgrading/Downgrading Haxelibs

April 5, 2015WY Leong 3 Comments

This isn’t really HaxeFlixel related, but I encountered an issue when I recently upgraded my haxelibs.

Haxelib is a collection of haxe (.hx) files that expand on existing Haxe language to make life easier for the developer. OpenFL, a game framework, is a haxelib. HaxeFlixel is also a haxelib that expands on OpenFL.

The issue I faced was — I upgraded my OpenFL version from 2.2.8 to 3.0.0-beta. The framework apparently has been overhauled, and as a result, broke HaxeFlixel’s API. In fact, I couldn’t even get an empty HaxeFlixel template project to compile.

So here’s a note for awareness:

Use this command to upgrade all your existing libraries to the latest version:

haxelib upgrade

1	haxelib upgrade

Use this command to check the library info (which mentions the library versions):

haxelib info <library name>

// examples
haxelib info flixel
haxelib info openfl

haxelib info <library name>

// examples

haxelib info flixel

haxelib info openfl

Use this command to upgrade/downgrade your library:

haxelib set openfl 2.2.8

1	haxelib set openfl 2.2.8

As such, I had to downgrade my OpenFL version to 2.2.8 in order for HaxeFlixel to work again. So, if you ever encounter a problem with compiling your code even though it was never modified, check if the haxelib upgrades broke anything. 🙂

EDIT:

Ashiq brought up an idea in the comments, which I overlooked — you can set your haxelib versions for your individual projects. This would help ensure your older projects do not risk getting broken by future haxelib upgrades.

As shown in the OpenFL XML format page, you just have to go to your Project.xml file and add a “version” property to your include code, something like this:

<haxelib name="actuate" version="1.0.0" />

1	<haxelib name="actuate" version="1.0.0" />

HaxeFlixel Tutorial – 9-slice Images and Buttons

April 4, 2015WY Leong Leave a comment

To handle 9-slice images and buttons, we will have to look into the flixel.addons.ui package, where we find FlxUI9SliceSprite (API). Thankfully, there is the flixel-ui Github page which includes a very lengthy readme of how to use the UI addons:

https://github.com/HaxeFlixel/flixel-ui

Unfortunately, it still takes some effort for beginners like myself to figure out how to use it, because the information focuses on using XML to generate and format the UI components. As such, we’re going to proceed with the tutorial below using only code, to illustrate usage without XML.

Setup

Let’s create a new template HaxeFlixel project for this tutorial:

flixel tpl -n "My9SliceTest"

1	flixel tpl -n "My9SliceTest"

Now let’s find some placeholder images. We’ll be using this image, taken from Kenney’s UI pack (visit the website www.kenney.ul for more awesome stuff, btw!) — “blue_button07.png“:

Right-click the image above, and save it into your HaxeFlixel project’s /assets/images folder. Now we can begin coding.

9-slice Images

In case you’re not sure how 9-slice works, here’s an image to demonstrate:

In a nutshell, 9-slice images preserve the resolution of the borders. It’s most commonly used in dialogue boxes and button images.

Before we can use the flixel.addons.ui.FlxUI9SliceSprite class, we will need to include the haxelib. Go to your Project.xml and enable the following code:

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

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

Now you can start using it. Here’s how we add a simple 9-slice image:

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.FlxSprite;
import flixel.addons.ui.FlxUI9SliceSprite;
import flash.geom.Rectangle;

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

        // Make the screen background lighter for visibility sake
        FlxG.camera.bgColor = 0xFF999999;

        // This is a normal image, which cannot be resized
        var myImage = new FlxSprite(10, 10);
        myImage.loadGraphic("assets/images/blue_button07.png");
        add(myImage);

        // This is a basic 9-slice image with default skin
        var myDefaultImage1 = new FlxUI9SliceSprite(100, 10, null, new Rectangle(0,0,50,50));
        var myDefaultImage2 = new FlxUI9SliceSprite(100, 70, null, new Rectangle(0,0,100,50));
        var myDefaultImage3 = new FlxUI9SliceSprite(100, 130, null, new Rectangle(0,0,50,100));
        add(myDefaultImage1);
        add(myDefaultImage2);
        add(myDefaultImage3);

        // This is a 9-slice image with the image loaded and sliced
        var _graphic:String = "assets/images/blue_button07.png";
        // This is the [x1,y1,x2,y2] slice points in the image.
        // x1,y1 is the top-left, x2,y2 is the bottom-right.
        var _slice:Array<Int> = [10,10,40,40];
        var myCustomImage1 = new FlxUI9SliceSprite(210, 10, _graphic, new Rectangle(0,0,50,50), _slice);
        var myCustomImage2 = new FlxUI9SliceSprite(210, 70, _graphic, new Rectangle(0,0,100,50), _slice);
        var myCustomImage3 = new FlxUI9SliceSprite(210, 130, _graphic, new Rectangle(0,0,50,100), _slice);
        add(myCustomImage1);
        add(myCustomImage2);
        add(myCustomImage3);
    }

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

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

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.FlxSprite;

import flixel.addons.ui.FlxUI9SliceSprite;

import flash.geom.Rectangle;

class MenuState extends FlxState

{

override public function create():Void

{

super.create();

// Make the screen background lighter for visibility sake

FlxG.camera.bgColor = 0xFF999999;

// This is a normal image, which cannot be resized

var myImage = new FlxSprite(10, 10);

myImage.loadGraphic("assets/images/blue_button07.png");

add(myImage);

// This is a basic 9-slice image with default skin

var myDefaultImage1 = new FlxUI9SliceSprite(100, 10, null, new Rectangle(0,0,50,50));

var myDefaultImage2 = new FlxUI9SliceSprite(100, 70, null, new Rectangle(0,0,100,50));

var myDefaultImage3 = new FlxUI9SliceSprite(100, 130, null, new Rectangle(0,0,50,100));

add(myDefaultImage1);

add(myDefaultImage2);

add(myDefaultImage3);

// This is a 9-slice image with the image loaded and sliced

var _graphic:String = "assets/images/blue_button07.png";

// This is the [x1,y1,x2,y2] slice points in the image.

// x1,y1 is the top-left, x2,y2 is the bottom-right.

var _slice:Array<Int> = [10,10,40,40];

var myCustomImage1 = new FlxUI9SliceSprite(210, 10, _graphic, new Rectangle(0,0,50,50), _slice);

var myCustomImage2 = new FlxUI9SliceSprite(210, 70, _graphic, new Rectangle(0,0,100,50), _slice);

var myCustomImage3 = new FlxUI9SliceSprite(210, 130, _graphic, new Rectangle(0,0,50,100), _slice);

add(myCustomImage1);

add(myCustomImage2);

add(myCustomImage3);

}

override public function update():Void

{

super.update();

}

override public function destroy():Void

{

super.destroy();

}

In case you’re wondering how the _slice works, here’s an illustration:

This should be the result when you build with lime test neko :

9-slice Buttons

If you look at the FlxUITypedButton API page, the descriptions are not helpful in telling you how to use the 9-slicing. However, if you look into the code (FlxUITypedButton.hx on Github), you will discover that there are in fact, annotated comments for the function.

Before we proceed, let’s add the following images into the /assets/images folder:

blue_button08.png

green_button07.png

sheet_button.png

Now let’s update the code like this:

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.FlxSprite;
import flixel.addons.ui.FlxUI9SliceSprite;
import flixel.addons.ui.FlxUITypedButton;
import flash.geom.Rectangle;

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

        // Make the screen background lighter for visibility sake
        ...

        // This is a normal image, which cannot be resized
        ...

        // This is a basic 9-slice image with default skin
        ...

        // This is a 9-slice image with the image loaded and sliced
        ...

        // This is a 9-slice button with default skin
        var myButton = new FlxUITypedButton(100, 240);
        myButton.resize(100,50);
        add(myButton);

        // This is a 9-slice button with 3 different images for the 3 states
        var myButton9Slice = new FlxUITypedButton(210, 240);
        var _graphic_up:String = "assets/images/blue_button07.png";
        var _graphic_hover:String = "assets/images/green_button07.png";
        var _graphic_down:String = "assets/images/blue_button08.png";
        var _graphicArray:Array<String> = [_graphic_up, _graphic_hover, _graphic_down];
        var _sliceArray:Array<Array<Int>> = [_slice, _slice, _slice]; // all 3 buttons have same slicing
        myButton9Slice.loadGraphicSlice9(_graphicArray, 100, 50, _sliceArray);
        add(myButton9Slice);

        // This is a 9-slice button with 3 images in one spritesheet for the 3 states
        // Note: images are processed VERTICALLY
        // Note: image sheet's height must be at least 3 button's height
        // (for each state; up, hover, down), otherwise the game will crash.
        // E.g. if the original button size is 50x50, then the spritesheet
        // size must be AT LEAST 50x150.
        var myButton9Slice2 = new FlxUITypedButton(320, 240);
        var _graphic_sheet:String = "assets/images/sheet_button.png";
        myButton9Slice2.loadGraphicSlice9([_graphic_sheet], 150, 100, _sliceArray, FlxUI9SliceSprite.TILE_NONE, -1, false, 49, 49);
        add(myButton9Slice2);
    }

    ...
}

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.FlxSprite;

import flixel.addons.ui.FlxUI9SliceSprite;

import flixel.addons.ui.FlxUITypedButton;

import flash.geom.Rectangle;

class MenuState extends FlxState

{

override public function create():Void

{

super.create();

// Make the screen background lighter for visibility sake

...

// This is a normal image, which cannot be resized

...

// This is a basic 9-slice image with default skin

...

// This is a 9-slice image with the image loaded and sliced

...

// This is a 9-slice button with default skin

var myButton = new FlxUITypedButton(100, 240);

myButton.resize(100,50);

add(myButton);

// This is a 9-slice button with 3 different images for the 3 states

var myButton9Slice = new FlxUITypedButton(210, 240);

var _graphic_up:String = "assets/images/blue_button07.png";

var _graphic_hover:String = "assets/images/green_button07.png";

var _graphic_down:String = "assets/images/blue_button08.png";

var _graphicArray:Array<String> = [_graphic_up, _graphic_hover, _graphic_down];

var _sliceArray:Array<Array<Int>> = [_slice, _slice, _slice]; // all 3 buttons have same slicing

myButton9Slice.loadGraphicSlice9(_graphicArray, 100, 50, _sliceArray);

add(myButton9Slice);

// This is a 9-slice button with 3 images in one spritesheet for the 3 states

// Note: images are processed VERTICALLY

// Note: image sheet's height must be at least 3 button's height

// (for each state; up, hover, down), otherwise the game will crash.

// E.g. if the original button size is 50x50, then the spritesheet

// size must be AT LEAST 50x150.

var myButton9Slice2 = new FlxUITypedButton(320, 240);

var _graphic_sheet:String = "assets/images/sheet_button.png";

myButton9Slice2.loadGraphicSlice9([_graphic_sheet], 150, 100, _sliceArray, FlxUI9SliceSprite.TILE_NONE, -1, false, 49, 49);

add(myButton9Slice2);

}

...

}

The code above demonstrates 3 parts:

Default 9-sliced button (with default skin)
9-sliced button using 3 separate images as the 3 states (up, hover, down)
9-sliced button using one image spritesheet

It may take a while to understand what the function parameters mean — in fact, I recommend you check the Github FlxUITypedButton.hx page, and look for the loadGraphicSlice9 function’s comments and read the parameter descriptions.

However, if you want a rundown of what to take note of, here’s some points:

When loading separate 3 separate images for the button, make sure _graphicArray and _sliceArray are of equal length. For buttons, the length must be 3, and for toggle buttons, the length is 6. (We’ll talk about toggle buttons some other day!)
When loading one spritesheet for the button, make sure to specify the original image size. In the code above, it’s the last two values 49, 49 part in Line 51.
When loading one spritesheet for the button, you can either specify just one slice array data, or 3 slice array data. I.e. Line 51, the _sliceArray value can also be written as [_slice] or [_slice,_slice,_slice] .

Here is a screenshot of how the screen should look like in the end, after adding the three 9-slice button code above:

And this is a GIF of the buttons in action, to further illustrate the button’s states (up, hover, down):

This concludes the tutorial for 9-slice images and buttons. I hope it wasn’t too confusing — It took me a while to figure it out, and it took me even longer to find a way to write the tutorial in an understandable way.

In the next post, we move on to another most commonly used component — Text in HaxeFlixel.

HaxeFlixel Tutorial – Button Events, Callbacks

April 2, 2015WY Leong Leave a comment

In the Simple Button tutorial, we covered how to create a simple default button (which comes with text). If you check the API, you’ll notice that FlxButton is extended from FlxTypedButton, which does not include text. This means, we can actually use the functions in FlxTypedButton from FlxButton.

One thing that stumped me as a beginner was that the API did not explain how to use the callback events; the onUp, onDown, onOver and onOut variables are exposed, but there was no example on how to use them. I tried these, but it didn’t work:

// This doesn't work
myButton.onUp = OnButtonUp;

// This doesn't work either
myButton.onUp = function () { trace("up"); };

// This doesn't work too
myButton.onUp = new FlxButtonEvent(OnButtonUp);

// This doesn't work

myButton.onUp = OnButtonUp;

// This doesn't work either

myButton.onUp = function () { trace("up"); };

// This doesn't work too

myButton.onUp = new FlxButtonEvent(OnButtonUp);

It turns out, after some Googling, the answer here, in the upgrade guide page, that explains that you have to set the callbacks within those variables:

package;

import flixel.FlxState;
import flixel.FlxG;
import flixel.ui.FlxButton;

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

        // Set the background to something lighter so we can see
        // the button easily
        FlxG.camera.bgColor = 0xFF999999;

        // Create the button
        var myButton:FlxButton = new FlxButton(50, 50, "", OnClickButton);

        // Load an image to the button
        myButton.loadGraphic("assets/images/bnw.png", false, 128, 128);

        // Add events to button
        myButton.onUp.callback = OnButtonUp;
        myButton.onDown.callback = OnButtonDown;
        myButton.onOver.callback = OnButtonOver;
        myButton.onOut.callback = OnButtonOut;

        // Add button to the stage
        add(myButton);
    }

    function OnButtonUp():Void
    {
        trace("button up");
    }

    function OnButtonDown():Void
    {
        trace("button down");
    }

    function OnButtonOver():Void
    {
        trace("button over");
    }

    function OnButtonOut():Void
    {
        trace("button out");
    }

    function OnClickButton():Void
    {
        trace("clicked!");
    }

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

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

package;

import flixel.FlxState;

import flixel.FlxG;

import flixel.ui.FlxButton;

class MenuState extends FlxState

{

override public function create():Void

{

super.create();

// Set the background to something lighter so we can see

// the button easily

FlxG.camera.bgColor = 0xFF999999;

// Create the button

var myButton:FlxButton = new FlxButton(50, 50, "", OnClickButton);

// Load an image to the button

myButton.loadGraphic("assets/images/bnw.png", false, 128, 128);

// Add events to button

myButton.onUp.callback = OnButtonUp;

myButton.onDown.callback = OnButtonDown;

myButton.onOver.callback = OnButtonOver;

myButton.onOut.callback = OnButtonOut;

// Add button to the stage

add(myButton);

}

function OnButtonUp():Void

{

trace("button up");

}

function OnButtonDown():Void

{

trace("button down");

}

function OnButtonOver():Void

{

trace("button over");

}

function OnButtonOut():Void

{

trace("button out");

}

function OnClickButton():Void

{

trace("clicked!");

}

override public function update():Void

{

super.update();

}

override public function destroy():Void

{

super.destroy();

}

Note: the OnButtonUp will replace the OnClickButton callback that was set in the new FlxButton(...) — they use the same onUp event handler.

Okay, we now know how to add callback to the button events. What if you want to trigger the callbacks with arguments? According to the upgrade guide page, you can do this (Let’s reduce the code to just one onDown event for simplicity sake):

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

        // Set the background to something lighter so we can see
        // the button easily
        FlxG.camera.bgColor = 0xFF999999;

        // Create the button
        var myButton:FlxButton = new FlxButton(50, 50);

        // Load an image to the button
        myButton.loadGraphic("assets/images/bnw.png", false, 128, 128);

        // Add events to button
        myButton.onDown.callback = OnButtonDown.bind(42);

        // Add button to the stage
        add(myButton);
    }

    function OnButtonDown(val:Int):Void
    {
        trace("button down : " + val);
    }

override public function create():Void

{

super.create();

// Set the background to something lighter so we can see

// the button easily

FlxG.camera.bgColor = 0xFF999999;

// Create the button

var myButton:FlxButton = new FlxButton(50, 50);

// Load an image to the button

myButton.loadGraphic("assets/images/bnw.png", false, 128, 128);

// Add events to button

myButton.onDown.callback = OnButtonDown.bind(42);

// Add button to the stage

add(myButton);

}

function OnButtonDown(val:Int):Void

{

trace("button down : " + val);

}

It sounds straight-forward, but … let’s say we have 3 buttons, and we want to know which button the player clicked on. How do we code that? There are two ways I could think of.

The first method is just to add and bind simple values for each button’s callback; In the case below, we use the strings “button 1”, “button 2”, and “button 3”.

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

        // Set the background to something lighter so we can see
        // the button easily
        FlxG.camera.bgColor = 0xFF999999;

        // Create the button
        var myButton1:FlxButton = new FlxButton(50, 50);
        var myButton2:FlxButton = new FlxButton(200, 50);
        var myButton3:FlxButton = new FlxButton(350, 50);

        // Load an image to the button
        myButton1.loadGraphic("assets/images/bnw.png", false, 128, 128);
        myButton2.loadGraphic("assets/images/bnw.png", false, 128, 128);
        myButton3.loadGraphic("assets/images/bnw.png", false, 128, 128);

        // Add events to button
        myButton1.onDown.callback = OnButtonDown.bind("button 1");
        myButton2.onDown.callback = OnButtonDown.bind("button 2");
        myButton3.onDown.callback = OnButtonDown.bind("button 3");

        // Add button to the stage
        add(myButton1);
        add(myButton2);
        add(myButton3);
    }

    function OnButtonDown(val:String):Void
    {
        trace("button down : " + val);
    }

override public function create():Void

{

super.create();

// Set the background to something lighter so we can see

// the button easily

FlxG.camera.bgColor = 0xFF999999;

// Create the button

var myButton1:FlxButton = new FlxButton(50, 50);

var myButton2:FlxButton = new FlxButton(200, 50);

var myButton3:FlxButton = new FlxButton(350, 50);

// Load an image to the button

myButton1.loadGraphic("assets/images/bnw.png", false, 128, 128);

myButton2.loadGraphic("assets/images/bnw.png", false, 128, 128);

myButton3.loadGraphic("assets/images/bnw.png", false, 128, 128);

// Add events to button

myButton1.onDown.callback = OnButtonDown.bind("button 1");

myButton2.onDown.callback = OnButtonDown.bind("button 2");

myButton3.onDown.callback = OnButtonDown.bind("button 3");

// Add button to the stage

add(myButton1);

add(myButton2);

add(myButton3);

}

function OnButtonDown(val:String):Void

{

trace("button down : " + val);

}

However, what if, for each button we click, we want to trigger something else within that button? We can pass the button itself as the value:

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

        // Set the background to something lighter so we can see
        // the button easily
        FlxG.camera.bgColor = 0xFF999999;

        // Create the button
        var myButton1:FlxButton = new FlxButton(50, 50);
        var myButton2:FlxButton = new FlxButton(200, 50);
        var myButton3:FlxButton = new FlxButton(350, 50);

        // Load an image to the button
        myButton1.loadGraphic("assets/images/bnw.png", false, 128, 128);
        myButton2.loadGraphic("assets/images/bnw.png", false, 128, 128);
        myButton3.loadGraphic("assets/images/bnw.png", false, 128, 128);

        // Add events to button
        myButton1.onDown.callback = OnButtonDown.bind(myButton1);
        myButton2.onDown.callback = OnButtonDown.bind(myButton2);
        myButton3.onDown.callback = OnButtonDown.bind(myButton3);

        // Add button to the stage
        add(myButton1);
        add(myButton2);
        add(myButton3);
    }

    function OnButtonDown(button:FlxButton):Void
    {
        trace("button down : " + button.x + "," + button.y);
    }

override public function create():Void

{

super.create();

// Set the background to something lighter so we can see

// the button easily

FlxG.camera.bgColor = 0xFF999999;

// Create the button

var myButton1:FlxButton = new FlxButton(50, 50);

var myButton2:FlxButton = new FlxButton(200, 50);

var myButton3:FlxButton = new FlxButton(350, 50);

// Load an image to the button

myButton1.loadGraphic("assets/images/bnw.png", false, 128, 128);

myButton2.loadGraphic("assets/images/bnw.png", false, 128, 128);

myButton3.loadGraphic("assets/images/bnw.png", false, 128, 128);

// Add events to button

myButton1.onDown.callback = OnButtonDown.bind(myButton1);

myButton2.onDown.callback = OnButtonDown.bind(myButton2);

myButton3.onDown.callback = OnButtonDown.bind(myButton3);

// Add button to the stage

add(myButton1);

add(myButton2);

add(myButton3);

}

function OnButtonDown(button:FlxButton):Void

{

trace("button down : " + button.x + "," + button.y);

}

Pretty cool, huh?

Note: There’s something quirky about the button event behaviour — the onDown event triggers even when you hold your mouse button down and hover over/hover out of the button. This also happens for onUp event. If you want the onDown/onUp to trigger only if the mouse is over the button, you can set allowSwiping to false.

One last thing — what about sound? e.g. Play a sound when the mouse hovers over and out of a button? Check the upgrade guide again, I think the example usage is straight forward. However, just in case you need an example, here is one, based on the code we’ve written above so far (assuming you have the audio file in the /assets/sounds folder):

myButton2.onDown.sound = FlxG.sound.load("assets/sounds/referee-whistle.wav");

1	myButton2.onDown.sound = FlxG.sound.load("assets/sounds/referee-whistle.wav");

I think that about sums up all there is to know about button handling. In the next post, I’ll attempt to cover 9-slice images, and if possible, 9-slice buttons.

A Programming Devblog

Infrequent updates

Menu

Widgets

Search

HaxeFlixel Tutorial – Sliders

Setup

Creating The Player

Creating The Slider

Improving The Slider

Setup (again)

Code Cleanup

Updating The Slider Body

Updating The Slider Handle

Updating The Text

Adding Sound

Event Callback

HaxeFlixel Tutorial – Creating A Simple Text

Setup

Simple Text

Text with custom font

Text Filters

Haxe Tutorial – Upgrading/Downgrading Haxelibs

HaxeFlixel Tutorial – 9-slice Images and Buttons

Setup

9-slice Images

9-slice Buttons

HaxeFlixel Tutorial – Button Events, Callbacks