November 2014 - RAVALMATIC game studio

Companies are always thriving in order to step up their performance, and every little bit helps. In fact, we are no different. Thus, we like to pick up proper tools, matching to our needs. And our last decision was to implement TexturePacker.

TexturePacker is a spritesheet building software. And the best at it, if you ask us. Why? May you ask. Well, there’s a lot say then. We’ve tested pretty much all other options, both browser based or native software, and we came to feel what makes it different.

First of all it’s fast. Ridiculously fast. It takes less than half a minute to just take all your sprites and convert them into a functional spritesheet. Moreover, it’s also easy. Default settings fit in most scenarios, which really helps with newcomer fellows. And this can be extrapolated to anyone who wants to start building spritesheets as well.

Then, it is a powerful tool too. It lets you save your spritesheets in a wide pool of over 40 supported data formats. We mainly use JSON files, as we work with HTML5, but it also supports the most popular frameworks, like Corona, Unity or Cocos2D. It really has a lot of options to toy with in search of the blending or look you’re after, be it with preloaded settings, or adjusting values one-by-one. Special mention to the “Reduce border artifacts” option that prevents halos from appearing in OpenGL, which we found utterly helpful.

To sum up, it’s continuously being updated, keeping up with all the frameworks it works with, preventing those pesky incompatibilities that happen from time to time and mess up your day.

And last but not least, it’s low priced. We like to see it this way: A lifetime license that includes one year of updates costs around 30€. Then you can add up more years of updates for the same price.

Summarizing, we invested in TexturePacker because it offers us ease of use and performance, at an affordable price for an indie studio.

TexturePacker is available on www.codeandweb.com.

Loading time is critical on mobile html5games. Some optimizations can be achieved by reducing the size and the quantity of the assets to be uploaded without giving up quality.

We’ll describe some of the basic things that can be done to minimize loading time. They are quite standard, followed by most developers and include optimizations on these fronts:

Audio – Code – Graphics

Audio

Our game Foot Chinko contains more than 30 audio effects, that’s a lot. We wrapped them in just 1 audio file with this open source application:
Tõnis Tiigi Audio Sprite on github

The resulting file is called audio sprite. Size wasn’t reduced but the amount of assets indeed, and this helped a lot to keep loading time low.

Game Engine – code

We are currently implementing Phaser for all our html5 games. Our cute Pocahontas Slots doesn’t make use of all the capabilities of this great and robust framework. It doesn’t need the physics module, for example. Instead of referencing this file in the index.html:

phaser.min.js (709kb)

we include the smaller:

phaser-no-physics.min.js (472kb)

Don’t forget to minimize your code too.

Graphics

Choose a good and unique resolution, all assets of your game will be dependent of this initial decision. We usually work with the iPad2 resolution, that is 1024 x 768 px. Our games look alright on desktop and devices with a big display without punishing players with smaller resolution devices.

Did you know about texture atlas?

http://en.wikipedia.org/wiki/Texture_atlas

A good program to generate them is Texture Packer. Once you’ve packed all the images into a texture atlas is time to compress the resulting png. We use an online tool called tinypng for that. This is the last step before releasing the production game.

In case you need a simple background image with a color gradient, for example, let’s say for the sky, generate a bitmap procedurally.

Stepping up performance with TexturePacker

It’s time to optimize the loading time of html5 games