HaxeFlixel Tutorial – Custom App Icon

This is supposed to be an easy step, but I fumbled for an hour figuring this out. So here’s a tutorial to help those who may have had difficulty like me — to add a custom icon to a HaxeFlixel build.

According to a HaxeFlixel page here, we learn that we can include the icon in the Project.xml file. Whenever you create a new HaxeFlixel project, there is this line at the bottom of the Project.xml file:

What can we add here? According to the OpenFL XML format page, the syntax can be as follows:

It wasn’t mentioned what exactly “path” means. Anyway, I figured it out after doing some searching, and found this Google forum thread. Read on for a summary of what I learned.

The path="icon.png"  above implies you can put your icon file in your root folder (where your Project.xml is), but in other cases we could put them in another folder such as /assets/images  or /assets/icons .

If your icon file is in the /assets/images  folder, then the simplest code would be as follows:

Now when you build your game with lime test neko , you should see that your application has the icon — by checking the /export/<target>/neko/bin  folder (in the example below, I used the flixel.svg icon):

Screen Shot 2015-04-01 at 10.19.36 PM

But what if the icon is still showing the default HaxeFlixel logo? Referring back to the Google forum thread link mentioned above, you may need to try the following:

1) Removing the icon in the Flixel XML

Locate the include.xml in the flixel folder, then comment or remove this line:  <icon path="assets/images/logo/HaxeFlixel.svg" /> . For OSX, the path would default to “/usr/lib/haxe/lib/flixel/3,3,6”. I’m not familiar with the path for Windows and Linux, but I hope it doesn’t take too long for you to find it. 🙂

2) Clearing the cache

Delete your HaxeFlixel project’s /export  folder and rebuild your game (i.e.  lime test neko ). The app icon does not get regenerated after you build your game for the first time, so you have to clear the cache for the icon to be updated.

3) Check your SVG icon

I was using this flixel svg icon as a test, and somehow the icon didn’t appear correctly when I built the game. I had to open the SVG file with SublimeText, and change the data a little, from this:

… to this:

In a nutshell, the width and height needs to match the viewBox property. Otherwise, the icon will appear weird, e.g. as a tiny image instead of the full icon.

Also, the width and height needs to be the same, otherwise the resulting icon will appear stretched.

This concludes the tutorial on including a custom icon into your HaxeFlixel game.