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

HaxeFlixel Tutorial – Creating A Simple Button

March 28, 2015WY Leong 2 Comments

Before playing a game, there usually is a menu of buttons, right? While this seems like a trivial topic, I personally had some difficulty figuring out how to create buttons (not just in HaxeFlixel) beyond the default skin.

Let’s go through the easiest way to create a button by referring to the HaxeFlixel cheat sheet (FlxButton section). Assuming you created a new HaxeFlixel template, let’s modify the MenuState.hx, like this:

package;

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

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

        var button:FlxButton = new FlxButton(50, 50, "Click here", OnClickButton);
        add(button);
    }

    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();

var button:FlxButton = new FlxButton(50, 50, "Click here", OnClickButton);

add(button);

}

function OnClickButton():Void

{

trace("clicked!");

}

override public function update():Void

{

super.update();

}

override public function destroy():Void

{

super.destroy();

}

And now it should look like this when you build it with lime test neko :

Now, what if we wanted a custom skin for the button? You could watch a 12-minute video tutorial by varomix WEY below…

… Or you could continue reading below, at your own pace. Let’s assume you’ve watched the video above and still didn’t understand, so let’s start from the beginning then.

Buttons typically have 3 states, and such, we’d need 3 images — the default button, the hovered button, and the pressed button.

So let’s head over to OpenGameArt.org and find a button spritesheet to use, perhaps this one: UI Orbs by StumpyStrust. Download the zip file and extract its contents. Let’s just use one image from the pack — “bnw.png” — and put it in your /assets/images folder. Take note of the size of the button — each button image is 128×128, and combined, becomes 384×128.

Now if you modify the code like this:

    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, "Click here", OnClickButton);

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

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

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, "Click here", OnClickButton);

// Load an image to the button

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

// Add button to the stage

add(myButton);

}

You’ll get this result, which is undesirable:

This is because it assumes the button is the full image itself (384×128). Now, if we write the code like this:

    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, "Click here", OnClickButton);

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

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

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, "Click here", OnClickButton);

// Load an image to the button

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

// Add button to the stage

add(myButton);

}

… The button now looks fine and works out of the box.

Coincidentally, the order of the button images correspond with the mouse state — normal, hover, pressed. Convenient, huh?

One last thing — you can just remove the “Click here” text on the button like this:

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

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

Okay, so now we know how to make a simple button, and execute code when the player clicks on it. In the upcoming posts, we’ll go in-depth — event/callbacks.

A Programming Devblog

Infrequent updates

Menu

Widgets

Search

button

HaxeFlixel Tutorial – 9-slice Images and Buttons

Setup

9-slice Images

9-slice Buttons

HaxeFlixel Tutorial – Button Events, Callbacks

HaxeFlixel Tutorial – Creating A Simple Button