Create a texture atlas with Animate CC for your favorite game engines

As a game developer, you could have spent days or months to create your most passionate game ever with all the cool features loaded in it. When you want to distribute the game as a mobile app or an application, if the file size is huge, it would be difficult to distribute it as a mobile app owing to performance issues. In such a scenario, using a texture atlas to create animations for your game is an ideal solution. With the June 2017 release of Animate CC, you can create a texture atlas and import it into any of your favorite game engines.

In this post, learn how to create a texture atlas and import it into the Unity game engine by using a plug-in. Here are the assets that can help you get started:

  • Click here to download Joker.zip file. It consists of Joker.fla sample file for creating your texture atlas. In the sample file, you can see a nice animation of Pinocchio moving over an Atlas ball.
  • Click here to download the sample plug-in to import texture atlas animations into Unity.

A step-by-step approach to generating a texture atlas in Animate and importing it in Unity is depicted in the following flow diagram.

Generating a texture atlas

  1. To begin with, let us load the Joker.fla file with all its symbols in Animate CC. You can find the Joker.fla file as part of the texture atlas sample zip file.
  2. Click the Library panel in Animate CC to view the symbols associated with the Joker.fla file.
  3. Right-click the PinocchioBall symbol and choose Generate Texture Atlas. A Generate Texture Atlas pop-up dialog appears.
  4. Select the desired export options and click Export. For more details on each of the export options, refer to the texture-atlas feature.
  5. The output folder of the texture atlas consists of the following three files:
  • json file consists of the information about the Joker animation
  • json file consists of the information on spritesheet.png file
  • png file consists of the bitmap representation of unique textures required to reconstruct the animation

Importing the texture atlas to Unity

Download the sample plug-in for Unity. The plug-in is available at the beginning of this blog post.

  1. Open Unity and create a 2D Unity project.
  2. Move the WrapperPlugin.cs and Plugin.cs files to the Assets folder. To locate the Assets folder, you can click Assets > Show in Explorer.
  3. Create the Resources folder under Assets and move the generated texture atlas files (Animation.json, spritemap.json, and spritemap.png)
  4. Drag and Drop WrapperPlugin.cs on the main camera in Unity. You can click Main Camera in the left pane of Unity and verify the WrapperPlugin in Property inspector.
  5. Click the Play button in Unity to view the output.

The animation file should play in Unity just as it plays in the above animated GIF file.

Hope this blog post helped you learn how to create a texture atlas in Animate and import it into the Unity game engine. You can customize the plug-in and use it for any of your other favorite game engines. If you have any further queries or feedback, you are welcome to leave a comment at the end of this blog. Apart from the texture atlas feature, the June release of Animate CC brings a bunch of new and enhanced features for Animate designers and developers, such as packaging and distributing HTML5 custom components and ease presets for classic and shape tween.

For more information on all the features introduced in the June 2017 release, see What’s New in Animate CC.