We have developed a lot of HTML5 games lately using Haxe and the Flambe framework. There’s a few 3rd party tools that have come in handy while building these games and would be good for any developer or designer to be aware of.
If you don’t have Haxe and/or Flambe installed, follow Kipp’s previous blog post about how to install Haxe with NME. Then go here: https://github.com/aduros/flambe and follow the install guide to get started with the Flambe framework.
Sublime Text 3
Sublime Text 3 is a great text editor that has a lot of built in languages and even more that you can add support for. There’s even a Package Manager you can install that has auto-updates and allows you to easily install a language package of your choosing. Luckily, there’s one already built for Haxe! Open Sublime Text and Package Control by pressing cmd + shift + p. Install the Haxe package.
There’s a weird problem with the path for Flambe and Sublime Text 3, so install this Mac Path Fix here. Once that’s complete, simply drag the root of your project into sublime text. Open any .hx file and press ctrl+shift+b to open a menu where you can choose which build target you want to deploy to. Once you’ve selected a build target, simply press ctrl+enter to launch the application!
Make sure that you have the Flambe server running from your root project as well. Open Terminal and change directory to your project root. Then run ‘flambe serve’ (without quotes) to run the Flambe server for your project. Now you’re all set! Sublime Text should now automatically run your designated build target.
Glyph Designer & Particle Designer
We use Glyph Designer for all localized text in a game. It’s a great easy-to-use application for creating stylized fonts that can easily be edited or duplicated at any time. Designers should definitely become familiar with this software so they know the limitations of what can be done. The main thing to keep in mind is all the settings you can tweak are on a per-character basis. Meaning in Photoshop, try to stay away from adding effects that are added to a word as a whole because it could be difficult to replicate in Glyph Designer. Another thing to avoid in Photoshop is skewing the text. It is allowed from our clients to give them the PSD so they can change any word to any language, but that rule is mostly meant for titles and special names. Try to avoid having to cut out the text as an image as much as possible.
This is a view of a new font in Glyph Designer. On the left you can quickly search for any fonts that are already loaded onto your computer. At the bottom left is the font size and type settings (bold, regular, etc).
Note: If you have multiple places that use the same font, but have different sizes, simply export the font at the largest size needed then scale it down in code.
The center shows a preview of what all of the glyphs will look like when you export it. All font settings are on the right and can be figured out pretty quickly just by playing with them, but let’s take a closer look.
This is the Texture Atlas settings. I’ve almost always used the default settings here, though feel free to play with the spacing and padding to see different effects they can have on your font.
The Glyph Fill and Glyph Stroke are exactly what they say. Change the color type between Solid, Gradient, or Image. When choosing colors, the only down fall is not being able set a color based on a hex value. I’ve found using the RGB Sliders and getting the color info from Photoshop works the easiest when trying to match colors. For the Glyph Stroke, all the settings here are pretty robust and is best to play with these numbers to get the results that you want.
These are the last of the options. Glyph shadow adds either an inner or outer shadow. You can change the direction the light source is coming from and the blur radius. If the color is too dark, remember you can adjust opacity in the color selection box under RGB Slider. The Included Glyphs settings are all of the characters that will be included in your file upon export. I’ve found for games that need localization it’s best to click the NEHE button, then copy/paste these characters into the text box:
Also, make sure Substitute Missing Glyphs is selected, this will try to make a character look like it’s for this font even if the font itself doesn’t support that character.
One of the great features of Glyph Designer is you can actually save as a Glyph Designer file in case you need to come back and edit the font at a later date. When you’re done with your font, click the Export button in the top right. I’ve never had to change the default settings here, but feel free to play around with it. When naming your font, it’s best to include any details you can in the name for anybody to quickly know what that font is about. I’ve been using this structure: fontName-color-size. Ex: arial-orange-64. That way anyone will know the size is 64 and it’s an orange Arial font. Simply click “Save” and it will save a PNG and .fnt file for that font to import into anything. In our case a Flambe game.
Particle Designer is another tool that developers can use to easily create particle effects that match anything you’re trying to do. The interface is super simple to use, and is already full of sample projects to use as a starting place for just about anything you can think of. There’s a great video tutorial here that walks you through all the settings.
You can download/purchase these here. Glyph Designer costs $39.99, and Particle Designer only costs $14.99. If you buy them together, you get a $3 discount! Yipee!
ImageAlpha and ImageOptim
These 2 programs go hand-in-hand. They’re both free and together create a very powerful png image compression software. Make sure you have both already downloaded, then follow these steps to optimize some images. For example, take this picture of famous model Derek Zoolander.
It’s original size is 841KB Saved for Web from Photoshop. This was a jpg with a white background that I quick selected and deleted, then Saved for Web to make a png. Simply drag and drop this image into ImageAlpha.
You can choose different backgrounds to check your image against, but it doesn’t save the image with that background. It’s only there to help you see the quality of the image before it’s saved out. ImageAlpha’s default settings are Median Cut and Dithered. I’ve never had to change any of those settings. The main setting of importance is the Color slider. If you have a really simple button that’s only using a few colors, you will see a huge savings in your file size. The Show Original button here just toggles the display back to the original image so you can compare them easily to see if you’ve cut out too many colors or not.
Now do a File -> Save As… (Cmd+Shift+S) to open this dialog box. Make sure that “Optimize with ImageOptim” is checked. ImageAlpha will automatically make the save directory the same as the image that you are editing. Now click Save. If you’re overwriting the original, another menu will show asking you to Replace the image.
ImageOptim will automatically open and start crunching down the image. Here’s the result of our Zoolander image.
Now our image is only 370KBs. A 57% file size savings and the quality is still amazing!
You can’t batch convert with ImageAlpha. If you drag and drop a bunch of images onto it, ImageAlpha will open a separate window for each image. It can go pretty quickly this way if you get into the rhythm of Save As, Close Window(Cmd+W). ImageOptim will queue up multiple images so don’t be afraid to work quickly. You can batch convert with ImageOptim, but you won’t get the file savings of reducing the amount of Colors in the image.
This tool should be used for more than just Haxe games. It’s great for anything you’re doing with PNGs. You might ask “Does it work with jpgs?” No. You should already be familiar with optimizing JPGs from Photoshop. A JPG won’t get much more compressed after that. You can download ImageAlpha here and ImageOptim here.
The last tool in my toolbox is called Flump. It’s a brilliant tool that can take custom Flash animations and export them into a format that is small on file size and easy to use. There’s already great instructions on the Flump GitHub page, so I won’t go into it again. The Flambe game framework has built-in Flump support for animations.
These tools have greatly helped the day-to-day workflow of our Flambe games. I’m sure they will help you too.