Atlas assets

Atlas, also called a Sprite Sheet, is a common art asset in game development. Atlas is an asset for merging multiple pictures into a large picture through a special tool, and indexing through a file such as a .plist. Atlas assets available for Cocos Creator consist of a .plist and at least one .png file, although usually many .png files make up an Atlas. The following is an image file used in an Atlas:

Why use atlas assets

In a game, using an Atlas composed of multiple pictures as art assets has the following advantages:

• The blank area around each picture will be removed when synthesizing the Atlas, plus various optimization algorithms can be implemented as a whole. After synthesizing the Atlas, the game package and memory consumption can be greatly reduced.
• When multiple Sprites are rendering pictures from the same atlas, these Sprites can be processed using the same rendering batch, which greatly reduces the CPU’s computing time and improves operating efficiency.

For a more comprehensive explanation, you can watch a teaching video: What is a Sprite Sheet from CodeAndWeb.

Atlas Assets

To generate an Atlas, you should first prepare a set of original pictures. Example:

Next, use special software to generate the Atlas. Examples:

• TexturePacker 4.x
• Zwoptex

When using these software packages to generate an Atlas, please select a .plist file in Cocos2d-x format. The resulting Atlas files are a .plist and .png with the same name. Example: myAtlas.plist and myAtlas.png.

When using TexturePacker software, please note that use v4.x only, v3.x and below is not supported.

Importing Atlas Assets

Drag the .plist and the .png files shown above into the Assets panel at the same time. You can generate Atlas assets that can be used in the editor and scripts.

Atlas and SpriteFrame

In the Image Resource Document, the relationship between Texture and SpriteFrame was introduced. After importing the Atlas, we can see that the Atlas is of type Atlas and can be expanded by clicking the triangle icon on the left. After expanding, we can see that the Atlas contains many sub-assets of type SpriteFrame. Assets are pictures that can be used and referenced individually.

The use of the Sprite Frame is the same as that described in the image asset. Please refer to the related documents.