How to create and use sprite sheets with Cocos Creator 3.x

Andreas Löw
Last updated:
How to create and use sprite sheets with Cocos Creator 3.x

Who is this tutorial for?

This tutorial is designed for developers who want to create games using Cocos Creator and want to optimize their game's performance by using TexturePacker. We will cover how to use TexturePacker to create and optimize sprite sheets, and how to use Cocos Creator to bring your game to life with animations. Whether you're a beginner or an experienced game developer, this tutorial will provide you with the skills and tools you need to create stunning games with ease. Let's get started!

Optional: Install Cocos Creator

If you haven't yet installed Cocos Creator 3.7.2 or a newer version, you'll need to do that before we can proceed. To get started, head over to https://www.cocos.com/en/creator-download and download the Cocos Dashboard. Once you have that, you can use it to install Cocos Creator.

It's important to use version 3.7.2 or newer, as older versions had some issues reloading sprite sheets after they were updated.

Optional: Create a new project

Once installed, launch Cocos Creator and create a new Empty (2D) project.

Create a new Empty 2D Project in Cocos Creator
Create a new Empty 2D project.

Install TexturePacker

Download TexturePacker using the provided button:

Download TexturePacker 7.11.0
for Windows
Also available for macOS and Linux

To install, 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 icon into the Applications folder.

Once installed, start TexturePacker. In the startup screen, select Try TexturePacker Pro. This enables all features and optimizations for 7 days. After that, you can still create sprite sheets for Cocos Creator, but some of the advanced features will be disabled.

Download Assets

Download the assets for this tutorial using the following link: raw-assets.zip

Next, extract the assets into your project in a folder called raw-assets. Be careful not to put them into the existing assets folder in the project.

The assets folder is used for the files that Cocos Creator works with directly. We'll create the sprite sheets outside of Cocos Creator and then import the already-packed spritesheets.

Create Your Sprite Sheet

To create the sprite sheet, follow these steps:

  1. Open TexturePacker.
  2. Drag and drop the sprites folder (located inside raw-assets) onto it. You should see a layout similar to the following:
Create a sprite sheet for Cocos Creator using TexturePacker
Create a sprite sheet for Cocos Creator using TexturePacker
  1. Click the Framework button in the top right corner and select CocosCreator.
  2. Click the folder icon next to the Data file widget and save the file as sprites.plist inside the assets folder of the project.

The default settings should work just fine. Click Publish sprite sheet in the toolbar to finalize the process.

The sprite sheet might look unusual at first: All sprites may be rotated, and they might not appear aligned in the sheet. This is intentional. TexturePacker detects transparency and removes it from the sprites—this is called trimming. It also rotates sprites if needed to achieve a better layout. Cocos Creator reads these optimizations from the sprites.plist. When using the sprites in the editor, they behave like the original sprites. The removed transparency speeds up rendering because the game engine does not have to process transparent pixels.

Adding a Sprite to Your Scene in Cocos Creator

Switch back to Cocos Creator. In the Assets panel at the bottom left, you should already see the sprite sheet. Cocos Creator automatically detects the sprite sheet and displays all the sprites it contains.

As TexturePacker has already trimmed the sprites, it is highly recommended to disable Cocos Creator's trim feature before using the sprites:

  • Select all sprites of the sprite sheet in Cocos Creator's Assets panel (select the first sprite, then press CTRL-A)
  • In the Inspector panel, change the Trim Type to None and save the change.

If you already have added a sprite to the scene without changing this setting, you can select the corresponding sprite component node in the Hierarchy panel and adjust the following parameters in the Inspector:

  • Size Mode: Set this to RAW
  • Trim: Turn this setting off

If you don't change these settings, your sprites may still work, but they might not behave as expected. This is because the sprites will be trimmed by Cocos Creator. This usually isn't a problem as long as you don't play animations.

If you see stretched or distorted sprites, or if the animations are wobbly, check these settings.

Animating the Sprites

To create an animation, select the sprite in the scene.

Click Add Component → Animation → Animation:

Add the Animation Component to the Sprite
Add the animation component to the sprite

This adds an animation component to the sprite node. In the next step we create an animation clip:

Create an animation clip in Cocos Creator
Create an animation clip and save it as walk.anim

Click on the icon on the right side of the Default Clip edit field, then click Create and enter a file name for the newly created animation clip (save it inside the assets folder). The new clip is automatically selected as the Default clip.

With the sprite selected in the scene, switch to the Animation panel at the bottom. Click Enter animation editing mode:

Create a sprite frame animation in Cocos Creator
Add the sprite frame property to the animation clip.

Click the + next to Property List. Select cc.Sprite → spriteFrame. Ensure the timeline cursor is at position 0. If not, sprites will be inserted at unexpected positions.

Select the character-walk_01..08 animation frames in the Assets panel and drop them onto the left side of the timeline. You should see a tooltip with frame:0 offset:0

"Drag & drop the animation frames to the spriteFrame property"
Drag & drop the animation frames to the spriteFrame property

Change the WrapMode to Loop and set the Speed to 0.1.

Click the Play button in the panel's toolbar to preview the animation. Your character should now be animated and running in place.

Now that you have successfully created a sprite sheet, imported it into Cocos Creator, and animated a sprite, you can continue experimenting and add more complex animations and interactions to your game. Good luck, and have fun creating your game!

Final Notes

TexturePacker has several optimization options that worked with cocos2d-x but are unfortunately not supported in Cocos Creator.

Please make sure to use these settings:

  • Trim mode: Trim - the first 4 all work depending on your needs - but Polygon outline is not supported
  • Multipack: Off or Manual both work. Manual allows you to pack multiple sprite sheets at the same time in a single TexturePacker project. Auto seems to work, too but does not work properly in Cocos Creator. As soon as a sprite switches from a sheet to another, the link in Cocos Creator to that sprite is broken!

What's next?

Read our A beginner's guide to PNG optimization to learn how you can reduce the size of your game.