Import an animation into Cocos Creator 3

Understand the exported files

Choose cocos_creator_pack. The ZIP contains spritesheet.png, spritesheet.plist, AnimGenSpritePlayer.ts, animgen-manifest.json, and README.

The PLIST uses Cocos2d-x atlas format 3. The TypeScript file is an example Sprite component player; the package does not include a native AnimationClip or a complete game controller.

Import the atlas together

Keep the PNG and PLIST names unchanged and import both into the same Assets folder at the same time. The resulting SpriteAtlas exposes its individual SpriteFrame sub-assets. Cocos documents this paired import in its Atlas assets guide.

Import the player script and wait for compilation. Create a Sprite node, attach AnimGenSpritePlayer, then assign the imported SpriteAtlas to its atlas property.

Configure the player

The script sorts frame names numerically, displays the first frame, then advances by elapsed time. It offers play() and stop() for integration. After editing runtime behavior, test your own component rather than assuming it remains identical to the generated example.

Reuse one component for multiple exports

Each package uses the same AnimGenSpritePlayer class name. Do not import a second copy of that class for every animation in one project.

Reuse one player component, assign each node's atlas, FPS, and loop settings explicitly. The script embeds the pivot from the export that produced it. If other exports need different pivots, disable applyExportedPivot and configure each node's UITransform anchor yourself, or intentionally adapt your own reusable player.

Verify the result

Match frame count and FPS to animgen-manifest.json. Check the last-to-first seam, node scale, anchor, transparency, and draw order in a small scene before integrating gameplay.

If the node is blank, inspect script compilation, atlas assignment, the Sprite component, and whether the atlas has sub-assets. If it shows one entire sheet, make sure the SpriteAtlas rather than a standalone texture was used.

For missing frames, verify the PNG and PLIST are from the same export and were imported together. For anchor jumps across animations, check the per-export pivot handling above. See canvas and pivot and transparent formats.

The generated example targets Cocos Creator 3.x. Package checks do not replace importing and running it in your exact editor and target build.