An asset pipeline in Flash. How we do it!

The Challenge

Our Solution

The Details

1. The Script will go to the root directory where our assets are stored and browse the subdirectories recursively. Finally when a directory is reached that contains files a resource pack is created.
2. To do that we first generate create a temporary AS3 source file. We just concatenate templates that contain a mix of actual source code and temporary portions of text, marked with @-symbols, that are replaced by the Ant script when it builds the source file.
   First we include the header…

   package @PACKAGE@
   {
     import flash.display.Sprite;
     public class @PACK_NAME@ extends Sprite
     {

   …then we add souce code for each asset in the folder based on it’s file extension…

   [Embed(source="@ASSET_PATH@/@ASSET_NAME@.@ASSET_EXTENSION@", mimeType="image/png", compression="true", quality="@IMAGE_COMPRESSION@")]
   public static var @ASSET_NAME@:Class;

3. …finally we add a footer to close the class and package declartion.

}
}

4. Now we kindly ask the mxmlc compiler to compile the generated class into a SWF. The Flex SDK contains Ant tasks for that purpose so it’s pretty easy to invoke the mxmlc compiler from an Ant script.
   

   <mxmlc file="${src.dir}/${src.classesDir}/${lib.classNamePrefix}.as" output="${lib.outputPath}/${lib.classNamePrefix}.swf">
   	<source-path path-element="${src.dir}"/>
   	<load-config filename="${FLEX_HOME}/frameworks/flex-config.xml"/>
   	<source-path path-element="${FLEX_HOME}/frameworks"/>
   	<compiler.debug>false</compiler.debug>
   </mxmlc>

   1. We also copy a manifest XML that describes game objects and links them with certain embedded Resources in the ResourcePacks we generated.
      A gameobject’s definition might look like this: 
      There’s one special manifest that tells our application what other manifests to load and where to look for the resource packs. When a player starts the game this main manifest is loaded. Now that we know what resourcepacks and manifests exists on the server we can ask the ResourceManager to load them when neaded.

      <gameobject id="special_exchange" type="building">
      	<occupation>
      		<rect x="0" y="0" width="4" height="5">
      	</occupation>
      	<component id="base" type="object" skin="special_exchange" resourcepack="kingart.resources.images.park.buildings.specials"/>
      	<component id="site" compref="buildinglot_4x5" type="object" skin="buildinglot_4x5" resourcepack="kingart.resources.images.park.buildings.buildinglots"/>
      </gameobject>

   2. The manifests and the compiled SWFs are uploaded to the server.

   I can has Resources, please?

   To get the assets when you need them you have to add code to your main application that will load the resourcepacks and manifests and extract the required resources. Our ResourceManager turned out rather complex but at its core it’s pretty straight-forward. This is how you’d load a XML-based manifest file.

   private function loadManifest (url:String):void
   {
   	var xmlLoader:URLLoader = new URLLoader();
   	xmlLoader.addEventListener(Event.COMPLETE, onManifestLoaded);
   	xmlLoader.load(new URLRequest(url));
   }
    
   private function onManifestLoaded(e:Event):void
   {
   	var xml:XML = new XML(e.target.data);
   	app.processManifest(xml);
   }

   And provided you know the URL to the resource pack an asset can be retrieved like this:

   private function loadAssets(url:String):void
   {
   	var loader:Loader = new Loader();
   	loaders[url] = loader;
   	loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaded);
   	resourcesToLoad[url] = loader;
   	loader.load(new URLRequest(url));
   }

   When the loader completes it contains the class that we generated and compiled with our Ant script. We can look for the embedded resources if we know their name. To access a specific image asset you’d do this:

   var resourcePack:Class = loader.contentLoaderInfo.applicationDomain.getDefinition(resourcePackClassName) as Class;
   var resource:Class = resourcePack[imageName];
   var bitmapData:BitmapData = (new resource() as Bitmap).bitmapData;

   Final Words

   I do realize that (unlike ours) many Flash applications need to be deployable as a single SWF that contains all the code and assets. Also, in smaller projects the effort of setting up system like ours might be bigger then just embedding the assets manually. But for us Ant has made deployment much easier and it allows the coders and artists to work on the same project mostly independ from each other.
   I’d be curios to learn how other developers manage the assets in their projects! Feel free to comment!