Firefly Part 4: Layouting system

In our previous posts we created game project with basic navigation flow and texture management. Now time to a little bit more complicated things - layouting system. URL for showcase project is provided at the bottom of this post, you can download it and import as a project into your FlashBuilder.
When we were creating layouts we had in minds two things: it should be flexible, easy to use and works well across large variety of different screen resolutions.

System has five types of layout measure units:

1. px - absolute value in pixel (defaul units if not specified).
2. pct - persentage from size of parent container.
3. inch - absolute value in inches, it takes into account screen DPI.
4. acpx - absolute context pixel, it depends on container layout context, by default it design pixel shifted by aligment (will explain later).
5. rcpx - the same as acpx but without shifting by aligment (will explain later).

All layout constrains starts from symbol "$" to make them easy to find. Ok, let's change LogoSplash to make logo positioned on the center:

// Add Company logo
addElement(new CompanyLogo(), $hCenter(0), $vCenter(0), $vRatio(50).pct);

$vRatio(50).pct means to set size of 50% from size of parent height keeping aspect ratio of object in our case logo image. Now we can add buttons and labels into MenuView. For example we want to add score label to be positioned just on the black second layer of background, but on different devices this layer will be in different places (see details in this post). Here the place where "acpx" units needed, you need just to set value on design image in our cases design size 1024x768 so we need just take pixel value from Illustrator and this value will be automatically converted into pixels relatively to current mobile device. And also we use bottom aligment to crop background so we need to specify it in our layout context:

// Set default menu view layout context aligment as BOTTOM
layoutContext = new BasicLayoutContext(this, HAlign.CENTER, VAlign.BOTTOM);

// Best Score Message
var bestScoreMessage:TextField = new TextField("Best Score", "Chango", 80, 
                                               0x00FF00);
bestScoreMessage.touchable = false;
bestScoreMessage.autoScale = true;
bestScoreMessage.hAlign = HAlign.LEFT;
bestScoreMessage.vAlign = VAlign.TOP;
addElement(bestScoreMessage, $right(86).acpx, $top(540).acpx, 
           $width(180).acpx, $height(50).acpx);

Layout units rcpx means the same but it doesn't shift by aligment. For now there are following layout constrains:

• $x
• $y
• $width
• $height
• $top
• $bottom
• $left
• $right
• $vCenter
• $hCenter
• $vRatio
• $hRatio
• $fit

So now we can add the rest elements into our views.

Showcase project source: ZombieRisingUp Part 4