User Guide Cancel

Export animations for mobile apps and game engines

Search
Animate

Animate

Open app
  1. Adobe Animate User Guide
  2. Introduction to Animate
    1. What's New in Animate
    2. Visual Glossary
    3. Animate system requirements
    4. Animate keyboard shortcuts
    5. Work with Multiple File Types in Animate
  3. Animation
    1. Animation basics in Animate
    2. How to use frames and keyframes in Animate
    3. Frame-by-frame animation in Animate
    4. How to work with classic tween animation in Animate
    5. Brush Tool
    6. Motion Guide
    7. Motion tween and ActionScript 3.0
    8. About Motion Tween Animation
    9. Motion tween animations
    10. Creating a Motion tween animation
    11. Using property keyframes
    12. Animate position with a tween
    13. How to edit motion tweens using Motion Editor
    14. Editing the motion path of a tween animation
    15. Manipulating motion tweens
    16. Adding custom eases
    17. Creating and applying Motion presets
    18. Setting up animation tween spans
    19. Working with Motion tweens saved as XML files
    20. Motion tweens vs Classic tweens
    21. Shape tweening
    22. Using Bone tool animation in Animate
    23. Work with character rigging in Animate
    24. How to use mask layers in Adobe Animate
    25. How to work with scenes in Animate
  4. Interactivity
    1. How to create buttons with Animate
    2. Convert Animate projects to other document type formats
    3. Create and publish HTML5 Canvas documents in Animate
    4. Add interactivity with code snippets in Animate
    5. Creating custom HTML5 Components
    6. Using Components in HTML5 Canvas
    7. Creating custom Components: Examples
    8. Code Snippets for custom Components
    9. Best practices - Advertising with Animate
    10. Virtual Reality authoring and publishing
  5. Workspace and workflow
    1. Creating and managing Paint brushes
    2. Using Google fonts in HTML5 Canvas documents
    3. Using Creative Cloud Libraries and Adobe Animate
    4. Use the Stage and Tools panel for Animate
    5. Animate workflow and workspace
    6. Using web fonts in HTML5 Canvas documents
    7. Timelines and ActionScript
    8. Working with multiple timelines
    9. Set preferences
    10. Using Animate authoring panels
    11. Create timeline layers with Animate
    12. Export animations for mobile apps and game engines
    13. Moving and copying objects
    14. Templates
    15. Find and Replace in Animate
    16. Undo, redo, and the History panel
    17. Keyboard shortcuts
    18. How to use the timeline in Animate
    19. Creating HTML extensions
    20. Optimization options for Images and Animated GIFs
    21. Export settings for Images and GIFs
    22. Assets Panel in Animate
  6. Multimedia and Video
    1. Transforming and combining graphic objects in Animate
    2. Creating and working with symbol instances in Animate
    3. Image Trace
    4. How to use sound in Adobe Animate
    5. Exporting SVG files
    6. Create video files for use in Animate
    7. How to add a video in Animate
    8. Draw and create objects with Animate
    9. Reshape lines and shapes
    10. Strokes, fills, and gradients with Animate CC
    11. Working with Adobe Premiere Pro and After Effects
    12. Color Panels in Animate CC
    13. Opening Flash CS6 files with Animate
    14. Work with classic text in Animate
    15. Placing artwork into Animate
    16. Imported bitmaps in Animate
    17. 3D graphics
    18. Working with symbols in Animate
    19. Draw lines & shapes with Adobe Animate
    20. Work with the libraries in Animate
    21. Exporting Sounds
    22. Selecting objects in Animate CC
    23. Working with Illustrator AI files in Animate
    24. Applying blend modes
    25. Arranging objects
    26. Automating tasks with the Commands menu
    27. Multilanguage text
    28. Using camera in Animate
    29. Graphic filters
    30. Sound and ActionScript
    31. Drawing preferences
    32. Drawing with the Pen tool
  7. Platforms
    1. Convert Animate projects to other document type formats
    2. Custom Platform Support
    3. Create and publish HTML5 Canvas documents in Animate
    4. Creating and publishing a WebGL document
    5. How to package applications for AIR for iOS
    6. Publishing AIR for Android applications
    7. Publishing for Adobe AIR for desktop
    8. ActionScript publish settings
    9. Best practices - Organizing ActionScript in an application
    10. How to use ActionScript with Animate
    11. Accessibility in the Animate workspace
    12. Writing and managing scripts
    13. Enabling Support for Custom Platforms
    14. Custom Platform Support Overview
    15. Working with Custom Platform Support Plug-in
    16. Debugging ActionScript 3.0
    17. Enabling Support for Custom Platforms
  8. Exporting and Publishing
    1. How to export files from Animate CC
    2. OAM publishing
    3. Exporting SVG files
    4. Export graphics and videos with Animate
    5. Publishing AS3 documents
    6. Export animations for mobile apps and game engines
    7. Exporting Sounds
    8. Best practices - Tips for creating content for mobile devices
    9. Best practices - Video conventions
    10. Best practices - SWF application authoring guidelines
    11. Best practices - Structuring FLA files
    12. Best Practices to optimize FLA files for Animate
    13. ActionScript publish settings
    14. Specify publish settings for Animate
    15. Exporting projector files
    16. Export Images and Animated GIFs
    17. HTML publishing templates
    18. Working with Adobe Premiere Pro and After Effects
    19. Quick share and publish your animations
  9. Troubleshooting
    1. Fixed issues
    2. Known issues

 

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 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 or multiple images of the desired dimension. 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

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.

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.

  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.

Export animations to mobile apps or gaming engines

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.

  1. In the Library, right click the movie clip.

  2. Select Generate Sprite Sheet.

  3. In the Sprite Sheet dialog box, select the required options.

  4. Click Export.

How to export animations for mobile apps or gaming engines

Watch the video to know about other options to export animations.

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: 

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

  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.
    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:

    • Basic 
    • 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.

  4. You can choose to export the symbol into multiple bitmaps based on the dimension.

    Generate texture atlas for multiple bitmaps

     For assets exceeding the size of selected image dimension, a warning is displayed.

  5. To preview the texture atlas output, click Preview tab.

    Preview the texture atlas after creating it

  6. 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. Identical frames are optimized and consolidated in Animation.json file by default.

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. 

Texture publishing

As an animator, you can continue to author content in vector format and export as vector or raster format for HTML 5 platforms. An option to export animations as a texture atlas has been added in publish settings to enhance the performance of the animations.

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. 

Though, this option may increase the size of the assets, it improves the performance. Also, you can increase the resolution of images in terms of 2x and 3x the original resolution of the images for targeting HiDPI displays. To change the resolution settings, click the spanner icon adjacent to Export document as texture option as shown in the screenshot below. Drag the numbers adjacent to Resolution to get the multiples of 2x and 3x.

By default, texture publishing is set at 2X resolution. Also, range for resolution can be changed from 0.3 - 3X.

 Texture publishing is applicable only to HTML5 Canvas document type.

Export document as texture enabled
Export document as texture enabled

Export document as texture enabled

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.

Change partial symbol selection
Change partial symbol selection

Select the symbols of your choice from the list. 

Partial symbol selection
Partial symbol selection

Improve graphics performance through Bitmap Textures

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.

  1. In the Properties Inspector panel, click Publish Settings.

  2. In the Basic tab, select the spanner icon adjacent to Export document as texture.

  3. In the Image Settings tab, click Change and select the symbols of your choice.

  4. Click OK.

How to publish your assets as bitmap textures to improve performance

Watch the video to know how animations with bitmap textures perform.

 Adobe

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now
Adobe MAX 2024

Adobe MAX
The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Adobe MAX

The Creativity Conference

Oct 14–16 Miami Beach and online

Register Now

Legal Notices    |    Online Privacy Policy