TexturePacker is a famous tool for game developers and web page designers. It’s nice and clean, easy and professional.

There are lots of tutorials about how to use TexturePacker for creating your games, you can find them here.

I use to make Unity games with the help of TexturePacker and enjoy it very much. Just drag images into TexturePacker, choose “Unity” as a target data format, export it and use it in Unity.

But this time, I switch to develop a HTML5 game. Game engine changed, program editor changed, game runtime changed, the only constant is TexturePackerlittle_heart.

Here we go.

 

The first step, find a javascript game library you prefer. I use a lib from China and called “Laya Air” because it support typescript, you can download it here if you like.

Decompress the files to your project folder, your folder should be something like this:

textpacker_tutorial_1

Second, open your TexturePacker and drag your images into it:

textpacker_tutorial_2

 

Choose “Data Format” as JSON (Hash) (not JSON (Array)) and make sure the data file path point to your project folder. As you can see, your images will be arranged nice and tightly by TexturePacker, this will be a great memory and GPU saver for your game. The default options is good enough for me, you may also want to tweak them so it will meet all your needs.

Click the “Publish sprite sheet” button if your’re satisfied with your atlas. Now your folder should be like this:

textpacker_tutorial_3

Here the new “game.json” is your data file and “game.png” is your atlas.

The last thing is to type. Open JetBrains WebStorm or any other editor you prefer, let’s do some programming.

As you can see, Laya Air read the json file directly, when loaded, any single picture can be picked up from your atlas easily, without any hacking or conversion!

TexturePacker does full support for Laya Air, even there’s no Laya Air option in the support list. If you are using another game engine, whether it’s famous or not, I bet TexturePack should support it, too.

My Web Storm can convert a typescript file into a javascript file automatically if you have Node installed. If you don’t want to install it, javascript is also available:

Show time, create a HTML file to run the game in browser.

 

textpacker_tutorial_4

Our HTML5 game is online!

I know it’s not pretty, but it shows a full process from separated images to atlas and then from code to visual game stage. The rest job is up to you, make it beautiful, playable and interesting.

textpacker_tutorial_5

Developing games with the help of TexturePacker is pleasant and fun. So what are you waiting for? Download TexturePacker here and make your own games!