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 – 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.

A Programming Devblog

Infrequent updates

Menu

Widgets

Search

9-slice

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 – 9-slice Images and Buttons

Setup

9-slice Images

9-slice Buttons