How to create and use sprite sheets with LayaAir

Learn how to create an optimized sprite sheet with TexturePacker and use it in a LayaAir project.

Prerequisites:

• LayaAir installed and a project created.
• A set of sprites (PNGs) you want to pack.

Install TexturePacker

Download and install TexturePacker:

To install it, follow these steps:

For Windows:

1. Double-click the TexturePacker.msi file to start the installation process.

For macOS:

1. Open the TexturePacker.dmg file.
2. Drag and drop the TexturePacker.app into your Applications folder.

Once installed, start TexturePacker and select Try TexturePacker Pro to unlock all features for 7 days.

Create your sprite sheet in TexturePacker

1. Open TexturePacker.
2. Drag and drop your sprites into the app. You should see a layout similar to this:

3. Click the Framework button (top-right) and select LayaAir. Click the folder icon next to Data file and set its file name to mysprites.atlas inside your project's assets folder.
4. Click Publish sprite sheet to generate the .atlas and .png file.

Use the sprite sheet in LayaAir IDE

Switch back to LayaAir. In the Assets panel (bottom left) you should already see the newly created sprite sheet. LayaAir scans the assets folder and shows all sprite sheets including all the sprites they contain. Now you can drag and drop sprites into a scene or animation:

Important: Preload the sprite sheet before playing

If you press Play and see no sprites, the sheet is likely not preloaded. Sprite sheets must be loaded before the scene runs, otherwise you might see an error like:

Failed to load 'mysprites/walk_01.png'

To preload:

1. Select the scene node in the Hierarchy panel.
2. Drag the sprite sheet from the assets onto the [+] button of the Preloads list to add it to the list:

Press Play again, your sprites should now render correctly.

Next steps

• Organize animations: Name files with a common prefix (e.g., run_01.png, run_02.png, ...) for easier animation creation.
• Faster loads: Use TexturePacker's Multipack for large projects to split content into multiple smaller sheets.
• Iterate quickly: Re-publish from TexturePacker — LayaAir will automatically detect updates in the Assets panel.