Starling vector textures - Part 2

In my previous post I wrote about possibility of creating vector textures for games powered by Starling and Adobe AIR. Now let's take a look how we can approach this. First of all you need to create set of vector FXG files that will be used as a source for textures. You can do it for example in Adobe Illustrator. To build game project we will use Flash Builder 4.7 - you need to create new Action Script Mobile Project and integrate Starling library. To compile FXG files you need some classes from Flex SDK just copy packages spark.filters, mx.filters, mx.graphics.shaderClasses and also create SpriteVisualElement class extended from Sprite with two additional properties viewWidth and viewHeight. This class should be placed in spark.core package.

Before initializing Starling we need to wait while stage is resizing, during first second we will show company splash screen.

// show company splash for 1 sec
companySplash = new CompanySplash();
addChild(companySplash);

// wait 1 sec while stage resizing
setTimeout(initialize, 1000); 

After that we will show game splash screen and initialize Starling.

private function initialize():void
{
  removeChild(companySplash);
 
 // show game splash while initializing Starling and loading textures
 gameSplash = new GameSplash();
 addChild(gameSplash);
 
 // init Starling
 starlingInstance = new Starling(Main, stage, 
   new Rectangle(0, 0, stage.stageWidth, stage.stageHeight));
 starlingInstance.addEventListener(Event.ROOT_CREATED, rootCreatedHandler);
 starlingInstance.start();
}

On root class create handler we will load our game textures. We need to specify design size for not full screen textures to scale them correctly (read more in the next posts).

var textureManager:TextureManager = TextureManager.getInstance();
textureManager.stage = stage;
textureManager.designSize = new Point(1024,768);
   
// register textures
textureManager.registerTexture(new Background());
...
 
// load textures
textureManager.load(texturesLoaded);

Vector textures will be loaded, scaled and drawn into bitmap to be ready for sending on GPU. See fragment of code from TextureUtil:

var factor:Number = Math.max(stage.stageWidth/designSize.x, 
                             stage.stageHeight/designSize.y);
var m:Matrix = new Matrix(factor, 0, 0, factor);
var data:BitmapData = new BitmapData(source.viewWidth*factor, 
                                     source.viewHeight*factor, 
                                     true, 0x00ffffff);
data.draw(source, m, null, null, null, true);

And in Main view class you can use loaded texture.

var textureManger:TextureManager = TextureManager.getInstance();
var background:Image = new Image(textureManger.getTexture(Background));
addChild(background);

In this particular example we follow with a regular bitmap texture Starling flow and in case handleLostContext flag set as 'true' we will have huge memory consuption because Starling will cache bitmaps in RAM memory to be able to restore textures after lost context.
But there is another way we can restore textures from FXG if context is lost and save memory, also we can dynamically draw several textures into one big bitmap and use it as source for subtextures to improve performance, additionally we can create several texture bundles and load/unload them automatically when user navigates to particular view state.

All these technics are used in our "in4ray Gaming SDK", for now it is in alpha stage but we hope to release it for external usage soon as an open source project. This SDK contains lots of functionality for working with textures, layouts, view navigations, animations, sounds and many more.

As a next step we will try to lead you through whole development cycle of creating game called "Zombie: Rising Up" using our SDK.

Source of example available here: http://vstyran-flex.ho.ua/Public/Examples/GamePrototype.zip
APK of example available here: http://vstyran-flex.ho.ua/Public/Examples/GamePrototype.apk