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!

Open TexturePacker, select TreSensa as framework.

TexturePacker: Select TreSensa as framework

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

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

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

Set trim mode and size constraints

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

TexturePacker: Click Publish sprite sheet

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


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' }

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?

By clicking 'Submit' you agree that the data entered above is sent to and stored by CodeAndWeb GmbH for the purpose of answering your request. The data is transmitted through an encrypted internet connection and processed according to our privacy policy. You can withdraw your consent at any time with effect for the future.