User Manual

Using Texture Packers

What is texture packing?

It's common to find sprites or UI images bundled as separate images. Texture packing is combining those separate images into a single texture atlas.

This has several advantages including:

Tools

Here are some texture packing tools that are compatible with PlayCanvas.

TexturePacker Online (free)

(Website)

A free browser tool that is able to do the basics of texture packing.

  1. Clear the texture atlas.
  2. Add your sprites/UI images.
  3. Data format should be kept as JSON hash.
  4. Download .png for the texture atlas.
  5. Download .json for the frame data.

Texture Packer tool

(Website)

TexturePacker is a paid tool for download that has many more features and options for creating texture atlases. These include more control over the layout of the sprites/UI images and being able to set up 9 slicing.

Basic steps:

  1. Add your sprites/UI images.
  2. Set Output files -> Framework as PlayCanvas.
  3. Click on Publish sprite sheet to create the texture atlas and JSON frame data.

Creating frames in Sprite Editor

Once you have uploaded the texture atlas file into the Editor and created a texture atlas asset, open the Sprite Editor.

Click on 'Upload Texture Packer JSON' and select the JSON frame data file to upload.

This will create frames in the texture atlas that you can create sprite assets from.

When updating the texture atlas later in development, as long as the sprite filenames and frame names remain the same, the following will happen when uploading the new frame data: