Firefly Part 3: Vector textures

In our previous post we created game project and added basic navigation flow, so now we have skeleton of game and we need to load some textures to make it more attractive. We will use vector .fxg textures created in Adobe Illustrator (you can read more info here). First of all lets add textures into our splash screens, it will be pure flash vector. We do not need to rasterize it because at splash state we do not have Starling yet and we use flash sprites. For now we will not use any layouts so just hardcode sizes and positions of elements and later in next posts we will change it. URL for showcase project is provided at the bottom of this post, you can download it and import as a project into your FlashBuilder.

override protected function createChildren():void
{
  super.createChildren();

  var logo:CompanyLogo = new CompanyLogo();
  logo.setActualSize(100, 100);
  logo.setActualPosition(200, 100);
  addElement(logo);
}

For the rest views we will use slightly different approach, we need to rasterize .fxg textures into bitmap and send them to GPU. For this purpose we will use texture bundle wich accomulate and place textures into big sprite sheets to make better performance, so lets create bundle. Actually for this particular game it will be one big bundle that holds all textures.  Bundle class should be extended from TextureBundle and to register textures use following:

override protected function registerTextures():void
{
  registerTexture(PlayUpButton);
  registerTexture(PlayDownButton);
  registerTexture(MenuBackground, HAlign.CENTER, VAlign.BOTTOM);
}

Full screen textures like background should use aligment to tell system how to crop them (read detiles in this  post). Also let's create getters to have better access to texture objects:

public function get playUpButton():Texture
{
  return getTexture(PlayUpButton);
}

public function get playDownButton():Texture
{
  return getTexture(PlayDownButton);
}

public function get menuBackground():Texture
{
  return getTexture(MenuBackground);
}

Now you can instantiate this bundle in any place you need textures and do not worry textures will be created and cached once. Lets add background into menu view:

private var textureBundle:Textures;

public function MenuView()
{
  super();

  textureBundle = new Textures();

  // Background
  addElement(new Image(textureBundle.menuBackground));
}

But to make it work we need to load bundle so let's regiser bundle in our view navigater to let it know for what views load corresponding bundles, let's wrap our bundle into texture state and register it in texture manager so in our Main view do following:

// Create instance of texture state
var textureState:TextureState = new TextureState(new Textures());

// Add views and pop-ups within game view navigator 
navigator.addView(MenuView, ViewStates.MENU, textureState);
navigator.addView(CreditsView, ViewStates.CREDITS, textureState);
navigator.addView(GameView, ViewStates.GAME, textureState);
navigator.addView(ScoreView, ViewStates.SCORE, textureState);

It would be good if during loading textures user will se game splash screen so in ZombieRizingUp class do following:
1. In constructor change game splash to:

gameSplash = new GameSplash(false);
addSplash(gameSplash);

2. In starlingInitializedHandler:

// Load textures
new Textures().loadAsync(textureLoaded);

3. In textureLoaded method:

protected function textureLoaded():void
{
  setMainView(new MainView());
  readyToRemoveSplash(gameSplash);
}

Showcase project source: ZombieRisingUp Part 3