Create a sprite sheet or texture atlas and export your animations for mobile apps and game engines. Import a texture atlas to Unity or any of your favorite game engines by using the plug-in.

Overview

Animate CC enables you to create sprite sheet or texture atlas animations and export them for mobile apps and game engines. 

Sprite Sheet

A sprite sheet is a bitmap image file that contains several smaller graphics in a tiled grid arrangement. By compiling several graphics into a single file, you enable Animate and other applications to use the graphics while only needing to load a single file. This loading efficiency can be helpful in situations such as game development where performance is especially important.

Sprite Sheet
A sprite sheet containing the sprites in a frame-by-frame animation.

You can create a sprite sheet from a selection of any combination of movie clips, button symbols, graphic symbols, or bitmaps. You can select items in the Library panel or on the Stage, but not both. Each bitmap and each frame of the selected symbols appear as a separate graphic in the sprite sheet. If you export from the Stage, any transforms (scaling, skewing, and so on) you have applied to the symbol instance are preserved in the image output.

Texture atlas

Texture atlas is a collection of textures as a single large image. You can optimize your game by creating a texture atlas and using it in your game app. 

In Animate, you can create a texture atlas from symbols such as movie clips, graphics, or buttons. You can select items in the Library panel or on the Stage, but not both. Each vector and each keyframe of the selected symbols appear as a separate bitmap in the texture atlas. If you export from the Stage, any transforms (scaling, skewing, and so on) you have applied to the symbol instance are preserved in the image output.

Difference between a sprite sheet and texture atlas

You can use either sprite sheet or texture atlas in your mobile apps as per your requirement. Some of the key differences between sprite sheet and texture atlas are provided in the following table. 

Feature Sprite Sheet Texture Atlas
Performance in mobile apps Low High
Efficiency in loading app High, as there is no computation Low, as there is JSON file computation 
Size Occupies more size Occupies less size
Quality of animation Medium High
Number of files generated Two files: one bitmap and one json Three files: one bitmap and two json files
Number of bitmaps generated Based on number of frames used in sprite sheet, number of bitmap files can also increase resulting in the increase of sprite sheet size Only unique bitmaps are generated in sprite, thus reducing the total size.

Creating a sprite sheet

To create a sprite sheet, perform the following steps: 

  1. Select one or more symbols in the Library or symbol instances on the Stage. The selection can also contain bitmaps.

  2. Right-click the selection and choose Generate Sprite Sheet.

    generate-spritesheet
  3. In the Generate Sprite Sheet dialog box, select the required options, and then click Export.

    Export option Description
    Image dimension The total size in pixels of the sprite sheet. The default setting is Autosize, which sizes the sheet to fit all the sprites you include.
    Image format The file format of the exported sprite sheet. PNG 8 bit and PNG 32-bit support using a transparent background (alpha channel). PNG 24 bit and JPG do not support transparent backgrounds. Generally, the visual difference between PNG 8 bit and PNG 32 bit is small. PNG 32-bit files are four times as large as 8-bit PNG bit files.
    Border Padding Padding around the edges of the sprite sheet, in pixels.
    Shape Padding Padding between each image within the sprite sheet, in pixels.
    Algorithm

    The technique used for packing the images into the sprite sheet. There are two options:

    • Basic (default)
    • MaxRects
    Data Format The internal format used for the image data. Choose the format that best suits your intended workflow for the sprite sheet after export.
    Rotate Rotates the sprites 90°. This option is only available for some data formats.
    Trim This option saves space on the sprite sheet by trimming unused pixels from each symbol frame added to the sheet.
    Stack Frames Selecting this option prevents duplicate frames within the selected symbols from being duplicated in the resulting sprite sheet.

Exporting sprite sheet animation for mobile apps

Exporting sprite sheet animation for mobile apps
Train Simple - Matthew Pizzi

Creating a texture atlas

Gaming developers can use Animate to orchestrate animations and export them as texture atlas to Unity game engine or any other favorite gaming platforms. 

The process of generating a texture atlas in Animate and importing it in Unity is depicted in the following diagram: 

flow-diagram-Texture-Atlas
An illustration depicting the workflow for generating texture atlas and importing it into Unity.

To generate texture atlas of your animation, perform the following steps: 

  1. In Animate, you can generate a texture atlas for a selected symbol from the Library or symbol instance on the stage. 

  2. Right-click the symbol and select Generate Texture Atlas from the menu. Generate Texture Atlas window appears. 

    generate-texture-atlas (2)
    Generate texture atlas
  3. Choose the appropriate export options for texture atlas. 

    Export option Description
    Image dimension The total size in pixels of the texture atlas. The default setting is Autosize, which sizes the sheet to fit all the images you include.
    Image format The file format of the exported sprite sheet. PNG 8 bit and PNG 32-bit support using a transparent background (alpha channel). Generally, the visual difference between PNG 8 bit and PNG 32 bit is small. PNG 32-bit files are four times as large as 8-bit PNG bit files.
    Border Padding Padding around the edges of the texture atlas, in pixels
    Shape Padding Padding between each image within the texture atlas, in pixels.
    Algorithm

    The technique used for packing the images into the texture atlas. There are two options:

    • Basic (default)
    • MaxRects
    Data Format The internal format used for the image data. The default is the JSON format.
    Rotate Rotates the images in 90°. This option is only available for some data formats.
    Flatten skewed objects to bitmap Select this option if you are using skewed transforms for your objects. Animate converts these objects into bitmap images as some of the game engines do not interpret skew transforms appropriately. 
  4. To preview the texture atlas output, click Preview tab.

    texture-atlas-preview
    Preview the texture atlas after creating it
  5. Click Browse and choose the destination path in your computer for the output file or enter the path in the text area and click Export

The generated output folder for texture atlas contains the following files:

Animation.json

This file contains information about the Animation. 

spritemap.json

This file contains information about spritesheet.png file.

spritemap.png

For the exported symbol, this file contains Bitmap representation of all the minimum unique textures required to reconstruct back the animation.

You can use the generated texture atlas in any game engines such as Unity with the suitable importer plug-in.

Importing texture atlas to Unity

You can import the Animate generated texture atlas files to your favorite game engines. To import the texture atlas files, you can create plug-ins corresponding to your game engines. A sample import plug-in is provided for Unity tool. 

Import the texture atlas into Unity by performing the following steps: 

  1. In Unity, create a project at any specific location. At this location, a folder is created with Assets sub folder in it. 

  2. Create two sub folders under Assets as Resources and Editor

  3. Click here to download the sample import plug-in for Unity. Choose Unity Plugin from the Downloads tab and choose the corresponding version to download. 

    The unity-plugin.zip consists of Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs, and Effect.shader files.

    Download of the sample signifies your agreement to the Terms of Use and Online Privacy Policy. 

  4. Move the texture atlas files such as Animation.json, spritemap.json, spritemap.png, and the unity plug-in files such as Plugin.cs and Effect.shader to Assets > Resources.

  5. Move the AnimateEditor.cs and WrapperPlugin.cs files to Assets folder. 

  6. In Unity, click AnimateEditor.cs file and drag it to Main Camera.

  7. Play. Playing your project splits the sprite map to different sprites.

  8. Move AnimateEditor.cs to Editor.

  9. In Unity, click WrapperPlugin.cs file and drag it to Main Camera. Also, deselect or remove AnimateEditor.cs from Main Camera.

  10. Play or publish the output as per your requirement. 

You can even customize the plug-in by modifying the WrapperPlugin.cs file as per your requirement. 

Unity plug-in supports color effects for Animate generated texture atlas files. Also, the plug-in supports masking through layers. The masking feature is applicable only for Unity 2017 release onwards. 

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy