Haxe Game Development Essentials: Create games on multiple platforms from a single codebase using Haxe and the HaxeFlixel engine

OpenFL is a framework built on top of Haxe; it adds additional API functionality and provides build tools to streamline your workflow. Most of the API changes it introduces are meant to help mimic the ActionScript 3 API. For example, it adds support for Flash's Stage 3D mode, text formatting, and bitmap data.

OpenFL also uses the Lime library, which is a library that helps to ensure consistent cross-platform support so that builds for different platforms don't behave radically differently. It covers things such as cross-platform audio, rendering, and asset management.

Some of our build commands will be executed using Lime, and that's pretty much all we'll be directly using it for.

HaxeFlixel is a game engine that's built on top of OpenFL. It was originally based on the ActionScript 3 game engine named Flixel, and has since branched off on its own. It's well documented and has a solid community, making it an ideal engine for people who want to learn how to make games with Haxe.

HaxeFlixel supports the following features:

That's just a handful of the features of the engine; it's very robust. HaxeFlixel will help us start building high-quality games much faster than doing everything from scratch.

Go to http://haxe.org/download/ and download the installer for your operating system. Run the installer; be sure to install both Haxe and Neko when given the option.

This will install the Haxe framework, which includes Haxelib, a useful tool for installing Haxe frameworks and libraries. You will typically use this to install all Haxe libraries, which will make the installation of OpenFL and HaxeFlixel incredibly straightforward.

To install OpenFL, open a command window (or terminal on OS X and Linux). Next, run the following commands:

haxelib install openfl
haxelib -notimeout run openfl setup

These two commands will download, install, and set up the OpenFL framework and all of the libraries it needs. The notimeout flag prevents the setup from timing out before it completes. This is useful because the OpenFL setup will download quite a number of files, and it can time out if your internet connection is a little slow.

When asked if you want to install OpenFL, press Y. On Mac and Linux, you may be asked to enter your password. After this, OpenFL will be installed and you'll be good to go!

Before installing HaxeFlixel, it's important to install a code-editing tool, because you will be prompted to choose one during the HaxeFlixel setup. Your operating system will be a factor in choosing the best tool for you.

Windows users are able to use FlashDevelop, which is a fully featured IDE that will work with Haxe out of the box. The best part of using FlashDevelop is that you can debug your games by targeting Flash and using the Flash debug player. This will allow you to put in breakpoints, see console logs, and inspect variables. You can download the latest version by going to http://flashdevelop.org. If you are using Windows, I highly recommend using it.

For Mac and Linux users, the best tool available is Sublime Text 2. It's a solid code-editing tool, though it lacks support for breakpoints, console logs, and variable inspection. You can download the latest version by going to http://sublimetext.com. You can also use Sublime Text on Windows if you prefer it.

To make Sublime Text a more effective Haxe editing tool, you should install the Haxe plugin. The easiest way to install it is using package control, which you can install using the steps located at https://packagecontrol.io/installation#st2.

After installing package control, use Ctrl + Shift + P (Windows or Linux) or cmd + Shift + P (Mac) to bring up the command palette. Start typing in package and then navigate down to Install Package. You will then see a list of available packages to install. Type in Haxe to find the package named Haxe. Install that and you're good to go!

To install HaxeFlixel, run these commands:

haxelib install flixel
haxelib install flixel-tools
haxelib run flixel-tools setup

You will then be prompted several times during the setup. Here's what you should do:

If you ever need to change these settings, you can run the Flixel tools setup command again.

Haxe and OpenFL will build to Flash out of the box, so there's not really anything special you have to do in order to deploy to Flash. That said, to debug Flash content you should download the Flash debug player.

On Windows, you will be able to place breakpoints and inspect variables; on Mac, you will just get popups with stack traces when you get errors, which is still very useful. Unfortunately, Linux users will be unable to debug Flash in the browser, but you will still be able to use the content debugger application.

You can download the debug versions of the Flash player at https://www.adobe.com/support/flashplayer/downloads.html.

To debug Flash in a browser, you will need to download different plugins based on the browser you intend to use. Here are some quick guidelines you can follow:

OpenFL makes getting the tools you need to deploy to Android much easier than it typically is. Normally, this would involve downloading some tools and installing a bunch of SDKs. OpenFL has a tool that will guide you through the process as fast as possible.

Before using OpenFL's tool, ensure that you have the Java runtime installed. You can download it from https://java.com/en/download/. After installing the runtime, you can begin the Android setup process.

For Windows users, run this command to get started:

openfl setup android

For Mac and Linux users, run the command using sudo, like so:

sudo openfl setup android

After using sudo, you will have to enter your password to continue.

You will then be prompted several times during the setup. Here's what you should do:

The setup process for iOS development is much simpler. Of course, in order to develop iOS games, you will need to use Max OS X and be a member of Apple's iOS developer program. You can sign up for the program by going here: https://developer.apple.com/programs/ios/. You will also need to install the latest version of Xcode, Apple's development tool, to develop iOS and OS X applications. You can download it by going to the Mac App store and searching for Xcode.

After Xcode has been installed, run this command in the terminal:

sudo lime setup ios

After using sudo, you will have to enter your password to continue.

When asked to download and install Apple Xcode, press N. This is only for users who haven't installed Xcode yet. It's easier to just install Xcode in advance like we did.

HaxeFlixel can also be built to desktop targets. When you want to build your games for a particular desktop operating system, you will need to use that operating system to make the build. For example, you can't build a Mac game on Windows or vice versa.

When building for Windows, you will need to install a version of Visual Studio, Microsoft's application development tool that can build C++ and can target Windows 32-bit. If you don't already have a copy of Visual Studio that meets the requirements, you can download Visual Studio C++ 2010 Express at http://go.microsoft.com/?linkid=9709949.

After installing Visual Studio, you will also need to run this command:

openfl setup windows

When building for OS X, you will need to install Xcode. If you didn't install Xcode as part of the iOS setup, please refer to the section on how to download and install it.

Once Xcode is installed, run this command:

openfl setup mac

When asked to download and install Apple Xcode, press N.

When building for Linux, there are no special setup steps. You will just need to be running Linux when making builds.

To create a project, open up a command or terminal window and navigate to the folder in which you want your game's folder to be created.

After doing this, enter this command:

flixel tpl -n "HelloWorld"

This will create a new folder using the standard HaxeFlixel project template. It will also create project files for your code-editing tool of choice, allowing for quick integration out of the box.

A number of Haxe classes with the file extension .hx will be created. These are the base files you need to get a basic HaxeFlixel project up and running. We'll be going over the project's structure throughout the book, so it's not important to know what everything means right now.

Now that we have a project set up, we can run it to see what we get out of the box.

If you're running FlashDevelop, select Debug from the drop-down list next to the play button and then select flash from the drop-down list next to that. After this, hit the play button to run your project.

For Sublime Text users, you can press Ctrl + Enter to run the project using the Haxe package that was installed earlier.

To create a build using the command line, navigate to your project's folder and enter this command:

lime test flash

The project should build and then open with your operating system's default application for running .swf files. When the .swf file loads, you'll briefly see the HaxeFlixel logo and then you'll be presented with a blank screen.

We're going to need the image that we want to display, so let's get that now. In the assets provided for this chapter, there is an image named HelloWorld.png. Copy it to the images folder under assets in your project's directory.

Now that we have the image copied to the template project, let's add the traditional Hello World image to the screen.

Open MenuState.hx and navigate to the Create function. It will look like this:

override public function create():Void
{
  super.create();
}

After super.create();, add the following lines:

var helloWorldText = new FlxSprite();
helloWorldText.loadGraphic(AssetPaths.HelloWorld__png);
add(helloWorldText);

This will create a new variable of the FlxSprite class. It will then load in the image we just copied over, and then finally add the image to the screen. We'll go into more detail about how to use the FlxSprite class and work with loaded assets later, but that's a quick rundown of what's happening.

All that's left to do is to run the project to see your changes! In FlashDevelop, you just need to press the play button. For Sublime Text users, press Ctrl + Enter.

To create a build using the command line, enter the test command again:

lime test flash

That's it! You should see your SWF load and display the text Hello world!. If something along the way didn't work, take some time to review the chapter to see where things went wrong.