Starling Summary

Challenges of Multi-screen Development
The benefits of a one-vector to many-raster (various dimension/crops) is even more evident when considering multi-screen development. As of March 2012, a developer creating an app for iOS needs to consider at most these screen sizes – iPhone 3GS, iPhone 4, iPad1/2, iPad3. All all of those in portrait and layout. Now imagine launching that same app for Android (*MANY* devices) and Blackberry Tablet too. Wow! Now that is considerable of a) storage space and b) asset creation/management. Creating some or all of these assets in vector and converting them would certainly be an interesting proposition.

Tutorial with Dynamic TextureAtlas

I created a demo showing an effective, clean, scalable solution for assets in starling.  The demo shows an animated boy loaded with method 1 below. And using method 2 it shows a shape with animated blur (animated on timeline in flash) and it shows a static shape that was drawn in Flash. All assets are in the same swf which was embedded into the FLA.

Click here to see the running demo of that image (Flash Player 11 required).

The process is here;

1. Setup Starling “World” in your application
2. Create Assets In Vector A Fla, Publish SWF
3. Embed SWF (via AssetManager.as) into application
4. Convert Vector Assets into Raster dynamically at run-time (I show the 2 methods I like most).

Asset Setup

Here is the FLA containing all the assets. Note the linkage names in the library. From this fla we publish the assets swf.

Here is the AssetsManager.as class which I use to embed the linkage names from the assets swf.

Starling Setup

First we declare the document class for our application and setup Starling.

// Align the Flash Stage
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

// Setup The 'Engine'
_starling = new Starling (Game, stage);
_starling.enableErrorChecking = true;
_starling.start();

// Add Small Box of Framerate Statistics
addChild( new Stats() );

Then we create the game. As you see, there isn’t much to it.

// --------------------------------------
// Constructor
// --------------------------------------
/**
 * 
 * 
 */
public function Game(){
	
	// SUPER
	super();
	
	// Method 1 - Feels more like traditional Flash (good!)
	_doDynamicTextureAtlas__FromEmbeddedSWFSymbol();
	
	// Method 2 - Puts several 'MovieClips' of graphics into one atlas. This is good for GPU.
	_doDyanmicTextureAtlas__FromEmbeddedSWFSpriteSheet();
	
	
}

Here is the first method.

/**
 * Dynamic Atlas From Source: An Embedded MovieClip Symbol From SWF
 * 
 * This is totally awesome. Now I can keep my graphics as vectors. 
 * 
 */	
private function _doDynamicTextureAtlas__FromEmbeddedSWFSymbol () : void
{
	
	try {
		
		// 1. Setup Properties
		var assets_vector_class:Vector.<Class> = new Vector.<Class> ();
		
		//
		assets_vector_class.push (AssetManager.BoyAndDogRunning); 	//WARNING - MUST HAVE 2+ 
																	//FRAMES TO AVOID ERRORS
		
		//
		var scaleFactor_num:Number 			= 1;		//DEFAULT
		var margin_uint:int					= 0;		//DEFAULT
		var preserveColor_boolean:Boolean 	= true;		//DEFAULT
		var checkBounds_boolean:Boolean 	= false;	//DEFAULT
		
		// 2. Create Atlas From VectorClass
		var myTextureAtlas : TextureAtlas = DynamicAtlas.fromClassVector (	
			assets_vector_class, 
			scaleFactor_num,
			margin_uint,
			preserveColor_boolean, 
			checkBounds_boolean);
		
		// 3. Create MovieClip From Atlas
		var TOTAL_TO_CREATE : uint = 1;		//OR JUST CREATE 1
		var myBoyAndDogRunning : MovieClip;
		for (var i_uint : uint = 0; i_uint < TOTAL_TO_CREATE; i_uint ++) {
			
			myBoyAndDogRunning = new MovieClip( myTextureAtlas.getTextures() , 60);
			myBoyAndDogRunning.x = Math.random()*400 + 50; myBoyAndDogRunning.y = 100;
			addChild(myBoyAndDogRunning);
			
			// 4. Juggler will 'step' the animation forward each 'ENTER_FRAME'
			Starling.juggler.add(myBoyAndDogRunning);
		}
		
		
		
	} catch (e:Error) {
		
		trace ("ERROR");
		trace (	"There was an error in the creation of the texture Atlas. ");
		trace (	"Please check if the dimensions of your clip exceeded the maximun ");
		trace (	"allowed texture size.");
		trace ("[[ " + e.message + " ]]");
		
	}
	
}

And here is the second method.

/**
 * Dynamic Atlas From Source: An Embedded MovieClip From SWF Which CONTAINS MovieClips
 * 
 * The SpriteSheet is just a MovieClip in the SWF with some clips within it. 
 * The clips within have instances names. We use those instance names for 'getTextures()'
 * 
 */	
private function _doDyanmicTextureAtlas__FromEmbeddedSWFSpriteSheet () : void
{
	
	
	try {
		
		// 1. Setup Properties
		var mySpriteSheet : *  = new AssetManager.SpriteSheet ();
		
		// 2. Create Atlas From a MovieClip Containing The MovieClips we really want
		var myTextureAtlas:TextureAtlas = DynamicAtlas.fromMovieClipContainer(mySpriteSheet, 1, 0, true, true);
		
		// 3a. Create MovieClip From Atlas
		var myCircle : MovieClip = new MovieClip(myTextureAtlas.getTextures("myCircleInstance"), 20);
		myCircle.x = 200; myCircle.y = 300;
		addChild(myCircle);
		
		// 3b. Create MovieClip From Atlas
		var myAmoeba : MovieClip = new MovieClip(myTextureAtlas.getTextures("myAmoebaInstance"), 2);
		myAmoeba.x = 350; myAmoeba.y = 300;
		addChild(myAmoeba);
		
		// 4. Juggler will 'step' the animation forward each 'ENTER_FRAME'
		Starling.juggler.add(myCircle);
		Starling.juggler.add(myAmoeba);
		
		
	} catch (e:Error) {
		
		trace ("ERROR");
		trace (	"There was an error in the creation of the texture Atlas. ");
		trace (	"Please check if the dimensions of your clip exceeded the maximun ");
		trace (	"allowed texture size.");
		trace ("[[ " + e.message + " ]]");
		
	}
	
}

Blue Sky

When brainstorming possible additions to the API, consider this. What if the challenges of the conversion processing time and the RAM required (which we mention as a cons above of the Dynamic workflow) could be offset by additional functionality. Let’s say a way for the API to convert the assets one-time-per-device and then store them.

The following API does not exist yet. It is just an idea.

var myTextureAtlas : TextureAtlas;


if (DynamicAtlas.localStorage.hasTextureAtlas (blahSettingsForASpaceshipAtCertainSize...) == true) {
        //LOAD FROM LOCAL STORAGE
	myTextureAtlas = DynamicAtlas.localStorage.getTextureAtlas (blahSettingsForASpaceshipAtCertainSize...)
} else {

        //CONVERT AND STORE
	myTextureAtlas = DynamicAtlas.fromClassVector (blahSettingsForASpaceshipAtCertainSize...);
	DynamicAtlas.localStorage.setTextureAtlas (myTextureAtlas , blahSettingsForASpaceshipAtCertainSize...);
}
myBoyAndDogRunning = new MovieClip( myTextureAtlas.getTextures() , 60);

Next Steps

• Intro To The Starling The Framework For AS3
• Download the full source of The Dynamic Texture Atlas Generator
• Download the full source of the demo shown in this post (See ‘Member Resources’ below).

Member Resources