Getting started with TexturePacker and TreSensa Game Engine (TGE)

This short tutorial shows you how to generate your first sprite sheet and include it into your TGE project.

It is done in a few minutes - and makes your software development much easier. Promised!

1.
Open TexturePacker, select TreSensa as framework.

TexturePacker: Select TreSensa as framework

2.
Add sprites ...

Drag & drop sprites
onto TexturePacker.


... or folders

TexturePacker adds
all sprites inside the folder
and updates the texture
when the content changes.

Add Sprites to TexturePacker

3.
Set output files
Set the data file location to somewhere in your js/game directory. Set the texture file location to somewhere in your assets/images folder.

Set the output path for your files

4.
Make sure Trim mode is set to Trim, and size constraints is POT (Power of 2).

Set trim mode and size constraints

5.
Click Publish sprite sheet to write the sprite sheet and .js file to your TreSensa project.

TexturePacker: Click Publish sprite sheet

6.
Add the generated .js file to the source list in your TGE project's GameConfig file.

7.

Add a 'sheet' tag with the location of the sprite sheet to every affected image in your asset list.

{ id:'play_button', url:'images/play_button.png',
sheet:'images/spritesheet.png' }

8.
That's it! The sprite sheet is updated after each publish.

Do you want to read more?

Head over to our TreSensa tutorials section.

Do you have any feedback or questions?