HaxeFlixel Tutorial – Creating A Simple Button

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:

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:

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:

… 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:

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.

2 thoughts on “HaxeFlixel Tutorial – Creating A Simple Button

  1. your code have error

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

    must be

    myButton.loadGraphic(“assets/images/bnw.png”, true, 128, 128);
    or not worked for animation button

    english is not my native language

    • WY Leong says:

      Hi, thanks for your reply! I don’t have time to test the code right now, but if it works for you, then that’s great. 😀

Leave a Reply

Your email address will not be published. Required fields are marked *