HaxeFlixel Tutorial – Sliders

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:

Creating The Player

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

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

Screen Shot 2015-03-27 at 5.58.10 PM

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:

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

And here’s the output:

Screen Shot 2015-03-27 at 6.29.37 PM

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:

slider-tutorial-ss1

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:

And here’s the updated output:

Screen Shot 2015-03-27 at 10.33.39 PM

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:

And here’s the output:

Screen Shot 2015-03-27 at 10.41.36 PM

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:

And this is how it looks:

Screen Shot 2015-03-27 at 10.45.38 PM

Updating The Text

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

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

Screen Shot 2015-03-27 at 10.57.21 PM

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:

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:

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

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.