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! :)