HaxeFlixel Tutorial – 9-slice Images and Buttons

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:

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

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

tut-9slice-ss1In 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:

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

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

tut-9slice-ss2

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

Screen Shot 2015-03-21 at 10.45.35 AM

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_button08blue_button08.png

green_button07green_button07.png

sheet_buttonsheet_button.png

Now let’s update the code like this:

The code above demonstrates 3 parts:

  1. Default 9-sliced button (with default skin)
  2. 9-sliced button using 3 separate images as the 3 states (up, hover, down)
  3. 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:

Screen Shot 2015-03-22 at 4.11.03 AM

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

licecap-button-2

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.

Leave a Reply

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