Flash Professional CS6: Creating and using Spritesheets with starling

Flash Professional CS6: Creating and using Spritesheets with starling:
Flash Professional CS6 release brings in several exciting new features and one of the features worth elaborating is the Sprite Sheet Generator feature.
In simple words, 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 Flash Professional and other applications to use the graphics while only needing to load a single file.
The biggest advantage of using Sprite Sheets is that the GPU does not have to load all graphic assets on to the primary memory. By having to load only a single file, (the sprite sheet, that contains all necessary graphics), the performance of the GPU is enhanced significantly.
Here’s a bird’s eye view of how Sprite Sheets work:

How does spritesheet speedup the render

As you can see spritesheets can be loaded into the GPU at once and hence, will reduce the draw calls as all Flash assets are loaded at once..
With the Sprite Sheet generator feature available with Flash Professional CS6, you can now contain all your Flash assets in to a Sprite Sheet at the click of a button!
Creating a Sprite Sheet
To create a Sprite Sheet of your assets in Flash Professional, follow the steps below:

1. Select one or more symbols in the Library or symbol instances on the Stage. The selection can also contain bitmaps.
   
   <insert screen shots of the assets before the sprite sheet is created>


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


3. In the Generate Sprite Sheet dialog box, select Starling as the Data Format.


4. Click Export.

The picture below is how the spritesheet looks once generated from Flash Pro.

A typical snapshot of a spritesheet created using Flash Pro

For more information, see Create a Sprite Sheet.
How to leverage the Sprite Sheet you just generated?
Starling is a pure ActionScript 3 library that mimics the conventional Flash display list architecture. In contrast to conventional display objects, however, all content is rendered directly by the GPU (Graphics Processing Unit) — providing a rendering performance unlike anything before. This is made possible by Stage3D technology available with Flash.  For more information, see http://gamua.com/starling/.
Starling provides a set of APIs to use the spritesheet generated using Flash Pro CS6. The APIs are similar to the AS3 Display List API.
Mapping Flash Professional library to Starling:

1. Download and unzip the latest starling framework from http://gamua.com/starling/


2. Launch Flash Professional CS6.


3. In Flash Professional CS6, go to File > ActionScript Settings… > click the Library Path tab.


4. Click the   button to add a new Library path.


5. Enter the path to the location where you unzipped Starling or browse to the location by clicking the   button.
   
   


6. Click Ok.


7. Now that you have added the Starling framework to the library. You can start using spritesheet that you created from Flash Pro right back in it.


8. Starling can consume spritesheet exported as JSON ( A png and an xml file combo ).

Using Starling to access the spritesheet using starling:

• Create a new AS3 FLA with the name SpriteSheet


• Create a document class SpriteSheet.as

In SpriteSheet.as put the following code:

package  { 
 import flash.display.Sprite;
 import starling.display.Sprite;
 import starling.core.Starling;

 public class Spritesheet extends Sprite 
 {
  private var myStarling:Starling;  
  public function Spritesheet() 
  {
   //Create a new instance of starling 
   myStarling = new Starling(SpriteSheetExample,stage);
   myStarling.start();
  }
 } 
}

Create the SpriteSheetExample class that the starling instance calls !

package  {
   import starling.display.Sprite;
   import starling.events.Event;
   import starling.core.Starling;
   import starling.textures.TextureAtlas;
   import starling.textures.Texture;
   import starling.display.MovieClip;
   import flash.display.Bitmap;

   public class SpriteSheetExample extends Sprite
   {
     [Embed(source="/mySpritesheet.xml",mimeType="application/octet-stream")]
     private var AnimData:Class;
     [Embed(source="/mySpritesheet.png")]
     private var AnimTexture:Class;  
     public function SpriteSheetExample() 
     {
 super(); 
 this.addEventListener(Event.ADDED_TO_STAGE, initialize);
     }

protected function initialize(e:Event):void
     {
  var hungryHeroTexture:Texture = Texture.fromBitmap(new AnimTexture());
        var hungryHeroXmlData:XML = XML(new AnimData());
 var hungryHeroTextureAtlas:TextureAtlas = 
                                new TextureAtlas(hungryHeroTexture, hungryHeroXmlData);
        //Fetch the sprite sequence form the texture using their name
 var _mc:MovieClip = new MovieClip(hungryHeroTextureAtlas.getTextures("fly_"), 20);   
 addChild(_mc);
 Starling.juggler.add(_mc);
     }  
  } 
}

Note:

• The fly_ value in the getTextures method specifies the sequence of images that are present in the SpriteSheet. For example in this case it would be fly_1,fly_2 and so on. On specifying this parameter, the GPU loads the sequence of images from the SpriteSheet.


• 20 value in the getTextures method specifies the frame rate of the animation or graphic that is loaded in to the GPU from the SpriteSheet. Substitute this value with the number of frames you have created for your graphic.

Test the movie and your animation should be running on GPU ! Make sure that you publish the movie with render mode as “Direct” . For more information on how you can use SpriteSheets created in Flash Professional CS6 with the Starling framework, see SpriteSheets in Flash Professional CS6 Video Tutorial by Hemanth Sharma.
Credits:

Hemanth Sharma, Gaming Evangelist @Adobe, for his extremely knowledgeable inputs and the really cool graphic assets. See hsharma.com for more of his creations.

DIGITAL JUICE