Getting Started With Haxe, NME, And FlashDevelop

Introduction

Haxe is gaining a lot of popularity as of late, but it’s still quite the new language. That being said, it’s tricky to find proper documentation for everything you need on the internet, like you could for say AS3 or C++. I’ve heard a number of people say they tried to get Haxe running, but ran into problems, and simply couldn’t be bothered trying to figure things out. I wrote this getting started guide as idiot proof as a I possibly could (hence the 5 images for some steps), and my hope is that anyone, absolutely anyone, could follow this guide and get Haxe, NME, and FlashDevelop up and running on their machine. The guide isn’t nearly as long as it seems, and I don’t skip a single step, so you should be good to go by the end of this.

Step 1 – Downloading Haxe and NME

Before you can get started with Haxe and NME, you’ll need to download, and install them on your computer. To do this, simply head over to the NME  Download Page, and select the install method that fits your machine (Windows, OSX, Linux).

*Note that Haxe and NME are two different things. We’ll be using both together, but one could install Haxe without NME. The above download contains both Haxe and NME in one download, and is our solution to cross platform magic.

Step 2 – Installing Haxe and NME

I’ve only experienced the setup on a Windows machine, but I’m quite convinced that the process is similar on all platforms.

Simply locate the file you downloaded in the previous step, and run it on your computer. Follow the very simple install instructions, and you should see the following:

Step 3 – NME Setup

Now that Haxe and NME are installed on your machine, we need to setup NME. Unfortunately, NME doesn’t have a setup application, and must be done from the command line. This is extremely simple if you have instructions though, so follow along.

Start by opening a command prompt. On Windows XP, go to Start > Run then type cmd. On Windows 7, go to start, and type in cmd under search, then press enter.

Once the command prompt is up, type the following, and press enter.

nme setup windows

You’ll be asked to install Visual Studio C++ Express, simply press “y” to everything (even if you already have it), and allow it to install. I already had it, but was asked if I wanted to download a service pack. Regardless of what you’re asked, simply say yes, and allow everything to install.

Haxe and NME are now installed on your computer.

Step 4 – Testing Your Installation

Now that Haxe is installed, we’ll quickly test a few commands to ensure the installation was successful.

In the command prompt, type the following:

haxe

If Haxe is installed properly, you should see the following optional commands:

 

Additionally, type in the following:

haxelib

You should see the following:

 

If both of the above worked, great, if not, feel free to drop a comment and I’ll attempt to troubleshoot the issue with you.

*Take note of the “upgrade” command. Typing haxelib upgrade into the command prompt will automatically update all libraries you have installed, including NME, which is extremely useful for keeping up with updates.

Step 5 – Downloading FlashDevelop

Now that Haxe and NME are on our  machine, we’ll need an IDE (integrated development environment) to work with. If you’re on Windows, the hands-down option is FlashDevelop. Head over to the official FlashDevelop site to download the latest version now.

On the main page you’ll see this button:

Click that button, and you’ll be taken to the download page. Scroll down the page to the download section, and click the link to begin your download.

If you’re not using Windows, or simply want to try another IDE, another popular choice is Sublime Text 2, though I won’t be covering how to get started with that, and you’ll be on your own.

 Step 6 – Installing FlashDevelop

Locate the installer you downloaded in the previous step, and run it. Proceed to install everything (specifically Flex SDK, AIR SDK, and Flash Player), and create whatever shortcuts you see fit. The installation process should look as follows, and will take a few minutes due to downloading the SDKs.

*The Flex SDK and Air SDK won’t be used for Haxe, but it’s still a good idea to download them to get the most out of FlashDevelop.

 Step 7 – Creating A Test Project

Now that Haxe, NME, and FlashDevelop are all installed, we can go ahead and make our first project. To do this, simply open FlashDevelop, then go to Project >New Project

 

You’ll then have a screen come up with a somewhat overwhelming number of options, but fear not, everything is quite straightforward. Simply navigate your eyes to the “Haxe” section (below the initial AS3 section), and select the NME Project option.

Once you’ve selected the NME Project option, proceed to the bottom of the New Project page to fill out your project information. The first field is the project name, quite self-explanatory. Next is the project location, also self-explanatory. Lastly is the package field, which I personally leave blank. On the bottom of this page, you’ll notice a check box for “Create directory for project”; if you’ve yet to create a folder for this project, check this box, otherwise, point to your pre-created directory in the location field (second field we filled out). Once everything is filled out, press OK and your project will be created.

Step 8 – Configuring Your Test Project

Before we test our project, it’s best we familiarize ourselves with how NME project information is stored, and how it varies from a typical AS3 project in FlashDevelop.

First off, close FlashDevelop, and locate your project directory on your computer. Once you’ve located your project folder, open it up, and take a look at the files in front of you. You should have the following:

assets
bin
src
application.nmml
YourProjectName.hxproj
nme-readme.txt

The “assets” folder is simple, this is where you store your graphics, audio, fonts, etc. The “bin” folder, is where all of your final compiled projects will end. Within that folder you’ll find locations for SWF, EXE, and all other files for targets you’ve compiled to. Next is the “src” folder, this is where all of your project code goes (aside from libraries, but that’s not important right now). Next is the YourProjectName.hxproj, obviously I’m substituting the name here for whatever your project is called, but the extension .hxproj is always the same. This is the file that FlashDevelop uses to manage your project, and is the file you’ll open when you wish to work on your Haxe project in FlashDevelop. Lastly, the “nme-readme.txt” file. This is simply a hand-holding file for anyone new to NME, and I highly suggest you give it a quick read, in addition to following this guide.

Now that you know what everything is, go ahead and open the YourProject.hxproj file. This will open up FlashDevelop again, with your project files displayed on the far right, underneath the “Project” tab. Double click the application.nmml file, and stay calm as a bunch of intimidating text flies onto your screen. While all of this may or may not look completely foreign to you, it’s all quite simple. Unlike AS3 projects in FlashDevelop, project information for NME projects is stored as XML in this file; all you’re seeing here, is a bunch of information that tells FlashDevelop how to compile your project. Do no try to alter these settings by going to Project > Properties (like you would an AS3 project), as it will not work. Let’s take a look at some of this information more closely.

<window background="#000000" fps="60" />

This is simple, the first property is the background color of your project as a hex value (#000000 makes your background black, assuming you had no graphics on screen to cover it), and the second is the frames per second of your project (defaulted to 60, but personally I work with 30, so change that to 30 if you please).

<window width="800" height="480" unless="mobile" />

As you can probably gather, this is simply the width and height of your project, unless you’re targeting mobile, in which case more complex code will override this.

<!-- classpath, haxe libs -->
 <source path="src" />
 <haxelib name="nme" />

This part is extremely important, as this is where you tell FlashDevelop where your code and additional libraries are location. As you can see, the source path is set to “src”. As we already know, this is where your project’s code will go. The next line, is telling FlashDevelop where the NME library is, which is part of haxelib. If you had additional libraries, such as HaxePunk (Getting started with Haxepunk tutorial coming soon), you’d list them here, with the same format.

Continuing on, you’ve got the path to your icon (used for EXEs and perhaps other projects, I haven’t tested this), your assets directory (and a rename rule, ignore this if you don’t understand it), as well as some technical information that I currently don’t know, or believe I don’t need to know.

Keep all the above information in mind, but most of all, just remember that this file is how you add libraries (like HaxePunk), and change your fps, project width, and project height. The rest is important, but you can look it up later if ever needed.

Step 9 – Testing Your Project

Now that we’ve created a project, it’s time to see if everything is in working order. Before we do this however, let’s set up a quick trace function to further let us know that everything is in working order.

Locate the “src” folder within FlashDevelop (under the Project tab), and press the small “+” button to expand that folder.

 

Double click Main.hx to open it, and take a quick look at the code. On line 27, you should notice a comment that says “entry point”. Just below this line, add the following call to the trace function, so we can further see that our project is up and running from the output panel (located at the bottom of FlashDevelop).

Lib.trace("Project is up and running");

 

*Note, comments are denoted by a // before them (or /* open, */ close, for multi-line comments), and are skipped by the compiler.

One last step before we compile our project, and that’s setting our target platform. To demonstrate the power of NME, we’ll start with Flash, and then target windows by making an EXE. At the top of FlashDevelop, you’ll see two drop-down menus. The left should be on “Debug”, and the right one set to “Flash”. If this isn’t the case, go ahead and change them to those values now. They should now look as follows:

Finally, it’s time to test our project. To do this, all wee need to do is go to Project > Test project; alternatively, we can press F5, or Ctrl + Enter (the latter being my personal choice).

 

If everything has worked, you should now have successfully compiled your first Haxe NME project, and should see an 800×600, empty black flash player window (assuming you didn’t change the hex value in the .nmml when we covered that in step 8), and the text “Project is running” in your output panel, like so:

*My window is only 512 x 448, I changed it so I could better fit this screenshot into the article.

 

Now let’s target Windows with an EXE, because that’s half the point of learning Haxe and NME! Go ahead and change the target platform to windows on the drop down menu, as we did with Flash.

 

Compile in whichever way you feel fit (Project > Test Project, F5, or Ctrl + Enter), and prepare to see your project run as an EXE. You should see the following when compiling is complete:

*The first compile may take a minute or two, as the entire NME library is compiled. Future compiles are much faster, and only take changes into consideration.

 

*Some antivirus software, such as Avast, will attempt to stop the execution of the EXE due to its “low reputation”, or some other reason. Simply ignore this, as all is well.

Conclusion

There you have it, your ability to program aside, you are now ready to start creating projects using Haxe and NME. Enjoy the cross-platform magic, increased performance where applicable (Flash Platform for sure), and bragging rights that come with using Haxe, but above all, have fun with it!

Further Resources

While this guide does get you up and running, I’m well aware that there are many changes between Haxe and AS3, or whatever other language you may be coming from. I will be working on some follow-up articles to this in the near future, ranging from learning the basic changes from AS3, to getting started with a HaxePunk (FlashPunk port) project. For now, feel free to ask questions in the comments below, and be sure to check out the following useful links.

AS3 Migration – A useful page on Haxe.org that covers the absolute basic changes in Haxe needed for someone coming from AS3.
Indirection – An inspirational piece that’s sure to get you excited about switching to Haxe.
lib.haxe.org - A list of libraries available through the haxelib library manager.
Pirate Pig Game Example – Joshua Granick provides us with an example NME game, source and all.
@NME – The genius behind NME. They’re quite active on Twitter, so if you have any questions, send them a tweet.