How To Make Sprite Animations In Flash

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.

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

Sprite Sail

A sprite sheet is a bitmap prototype file that contains several smaller graphics in a tiled grid arrangement. Past compiling several graphics into a single file, you lot enable Animate and other applications to utilise the graphics while only needing to load a single file. This loading efficiency can exist helpful in situations such as game development where performance is specially of import.

You tin can create a sprite sheet from a selection of any combination of picture show 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 announced as a split graphic in the sprite sheet. If you consign from the Stage, any transforms (scaling, skewing, and then on) you have applied to the symbol case are preserved in the image output.

Texture atlas

Texture atlas is a collection of textures every bit a single big image or multiple images of the desired dimension. Y'all tin optimize your game by creating a texture atlas and using it in your game app.

In Breathing, you can create a texture atlas from symbols such as pic clips, graphics, or buttons. You tin 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, whatsoever transforms (scaling, skewing, and so on) you take applied to the symbol case are preserved in the image output.

Divergence between a sprite sheet and texture atlas

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

To create a sprite sheet, perform the following steps:

Export animations to mobile apps or gaming engines

Animate helps yous to export animations to gaming platforms and mobile applications. Want to view the animation on your mobile phones or game engine? Spotter the tutorial at the terminate of this case and follow these steps.

How to consign animations for mobile apps or gaming engines

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

Gaming developers can use Animate to orchestrate animations and consign them equally 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:

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

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 past default.

spritemap.json

This file contains data well-nigh 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.

Yous tin can apply the generated texture atlas in any game engines such equally Unity with the suitable importer plug-in.

Importing texture atlas to Unity

You lot 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 past performing the following steps:

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

Unity plug-in supports colour furnishings 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.

Every bit an animator, you can continue to writer content in vector format and export as vector or raster format for HTML v platforms. An option to export animations equally 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 brandish the New Document window.

2. Select the Advanced tab and clickHTML5 Canvas. A new FLA certificate opens.

3. ClickFile > Publish Settings. IfExport document every bit texture is enabled in Basic tab,Prototype 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 selection may increment the size of the assets, information technology 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 every bit texture choice as shown in the screenshot below. Drag the numbers next to Resolution to go the multiples of 2x and 3x.

By default, texture publishing is fix at 2X resolution. Likewise, range for resolution can be changed from 0.iii - 3X.

Texture publishing is applicable but to HTML5 Sheet certificate 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 bones content, you lot can even so use vector content. Animate provides this option to y'all through a fractional symbol selection dialog. Fractional symbol selection allows you to cull 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 listing. By default, all symbols are selected.

Select the symbols of your choice from the list.

Meliorate graphics functioning through Bitmap Textures

In Animate, bitmap textures amend the performance of animations in different platforms. Want to reduce the complexity of vectors with bitmap textures? Sentinel the tutorial at the end of this example and follow these steps.