Animate enables you to create sprite sheet or texture atlas animations and export them for mobile apps and game engines.
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.
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.
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,
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||Variable: Based on the image dimension.|
|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.|
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)
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.
Animate helps you to export animations to gaming platforms and mobile applications. Want to view the animation on your mobile phones or game engine? Watch the tutorial at the end of this example and follow these steps.
How to export animations for mobile apps or gaming engines
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:
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. Optimize dimensions
- When Optimize dimensions option is checked, it removes empty pixels from bitmaps and dimensions are not in power of two (default option). This is applicable for all the bitmaps generated.
- When Optimize dimensions option is unchecked, bitmaps are generated based on the selected dimensions.
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. Resolution Choose any value ranging from 0.3-3.0 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:
- MaxRects (default)
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. Optimize Animation.json file
- When Optimize animation.json file option is checked, this option removes indentation, decomposed matrix and shortens the names used (default option).
- When Optimize animation.json file option is unchecked, this option exports with indentation and with meaningful names.
The generated output folder for texture atlas contains the following files:
This file contains information about the Animation. Identical frames are optimized and consolidated in Animation.json file by default.
This file contains information about spritesheet.png file.
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.
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:
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.
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.
As an animator, you can continue to author content in vector format and export as
1. Create a canvas document. Select File>New to display the New Document window.
2. Select the Advanced tab and click HTML5 Canvas. A new FLA document opens.
3. Click File > Publish Settings. If Export document as texture is enabled in Basic tab, Image Settings tab shows Texture Publishing options. By default, all the symbols are included in Texture publishing. To selectively choose symbols for textures, click settings icon adjacent to it.
By default, texture publishing is set at 2X resolution. Also,
Texture publishing is applicable only to HTML5 Canvas document type.
Choosing a vector or raster file is like a choice between file sizes and performance. HTML5 platforms are optimized for raster content. So, for some complex shapes, it is better to pre-convert vector images to raster. For some of the basic content, you can still use vector content. Animate provides this option to you through a partial symbol selection dialog. Partial symbol selection allows you to choose symbols that should be converted to raster while keeping the remaining as vectors.
To open partial symbol selection, click Change in Publish settings dialog and select a symbol from the list. By default, all symbols are selected.
In Animate, bitmap textures improve the performance of animations in different platforms. Want to reduce the complexity of vectors with bitmap textures? Watch the tutorial at the end of this example and follow these steps.