Learn HaxeFlixel from Scratch (pt. 1): The Display List and Program Entry

And thus begins my foray into learning a new language with which to program games and mobile apps. I’ve always used FreeBASIC to fiddle with desktop games in the past, but I do all of my development on OS X these days and would love to target multiple platforms for whatever I come up with. FreeBASIC doesn’t fit the bill, but Haxe seems like a strong alternate contender… and lo and behold, there is a Haxe port of the Flash game library, Flixel, appropriately dubbed HaxeFlixel.

This blog post will be the first in a series of self-educational blog posts as I teach myself not just HaxeFlixel but Haxe and not just Haxe but ActionScript programming in general. I’m truly starting from scratch here, interpreted as “from nothing” as opposed to “from that awesome GUI based programming language for kids made by MIT.” If you’re following along, you’ll need to grab the full stack of Haxe + OpenFL + HaxeFlixel as described in the project’s Getting Started guide.

My earliest attempts to understand how HaxeFlixel worked were thwarted by my lack of general understanding of how ActionScript itself works. I saw classes being tossed around like Stage, Sprite, Event, and more with no real concept for what the program would look like from a high level. So, armed with my trusty IDE and command line grep, I started digging. And digging. And digging.

Apparently ActionScript (and by extension Haxe) programming involves classes upon classes upon classes. It’s quite common to start in a class 6 steps removed from its parent class in the hierarchy (where it typically terminates in an EventDispatcher, i.e. a class that can listen for and react to events – very handy). This makes things quite daunting, to be honest, but it gets more manageable as you start to piece together a picture of the main class families in use.

My first “aha” moment came when I finally stumbled upon an ActionScript (hereafter AS) concept known as the display list. This is basically the hierarchy of objects used in an AS / Haxe program to manage all application objects / logic / display:


It all starts with that top level Stage object and descends from there through the instance of your application’s “Main” class to the various display objects and containers used to actually show stuff to users / players.

Building on this bit of knowledge, we can actually tease out how a Haxe program gets going by examining the Main.hx generated when you create a new HaxeFlixel project (see the Hello World tutorial for an example, specifically the bit introducing “haxelib run flixel”). Stepping through the code, I see the following things happening:

  1. The Main.hx file contains the program’s entry point, the static function main(). This function simply adds an instance of our Main class to the root object container. (It does this using Lib.current, which appears to be a MovieClip object, so I’m not sure how Lib.current sits in relation to the root Stage. A worry for another day.) Note that our Main class is a child of Sprite, which can ultimately function as a Display Object or a Display Object Container in our hierarchy.
  2. Creating the new Main object involves setup through its parent constructors (done using super() in Haxe) and then a quick check to see if it has been added to the program’s global Stage object yet. If so, then we directly invoke Main’s init() function. If not, we add an EventListener to the Main object (because Sprites are ultimately children of EventDispatcher) that invokes init() once it’s been added to the Stage. This use of event listeners seems quite common and analogous to jQuery’s .ready() – i.e. wait until we’re sure everything’s in place before doing anything. Bonus reading in this Republic of Code event listener tutorial I found.
  3. init() removes that listener if it was added and then invokes initialize() to set the program’s alignment and scaling mode. I’ll have to research those later.
  4. Next, init() creates the actual FlxGame object (itself a child of the Sprite class), the heart and soul of a HaxeFlixel game. It adds this object as a child of the Main object.
  5. Finally, if the program is being compiled to C++ or neko (a language with a virtual machine that we can use for testing on OS X thanks to openfl), a simple keyboard event listener is added that exits the program if the escape key is pressed.
  6. The constructor of the program’s FlxGame object is primarily responsible for determining the dimensions and scale of the game and then invoking its parent’s constructor to set everything up, including pointing to the initial “FlxState” of the game. A State is comparable to a “view” of the game and may correspond to a menu or a game screen.
  7. The next post in this series will dig into what happens when the constructor of our program class’s parent FlxGame class executes.

That’s about all I can manage for tonight. I’ll keep trucking through learning the nature and structure of HaxeFlixel games and try to point out any tips I pick up along the way. HaxeFlixel still comes across to me as a work in progress, but it’s an open source project hosted on GitHub (whose community portal is Drupal powered, yay!), which just screams to me “fork me and fix things.”

I intend to oblige.


~ by roguewombat on August 3, 2013.

2 Responses to “Learn HaxeFlixel from Scratch (pt. 1): The Display List and Program Entry”

  1. I’ve been using Haxe (without Flixel) for a while now and I’m loving it. It was an easy transition from Java because they both use OOP and have very similar sytax. It must be much more difficult coming from FreeBASIC.

    I’ve had a ton of fun using it and plan on using it for a long time to come. The ability to target many platforms is awesome.

    If you need any help with the language feel free to ask me questions anywhere you can find me. Good to have another dev working with Haxe.

    • Thanks for the offer, Cap’n. It’s indeed worlds apart from FB, but fortunately by day I’m a PHP developer maintaining a variety of Drupal modules. The next version of Drupal (D8) is built on top of Symfony2, which is an OOP PHP framework. It seems PHP with namespaces and autoloading works similarly to Haxe, even if there are syntactical oddities within haxe (i.e. no “this” variable, super() instead of parent(), etc.).

      Honestly, the biggest breakthrough came when I discovered the display list. I told my wife it was like Flash / AS / Haxe stuff gives you a canvas on which you start painting, whereas in other languages I’m responsible for creating that canvas (if I even need one).

      Will definitely reach out if I get stuck, and I’m looking forward to gettin’ my RL on in Haxe in the near(ish) future. 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: