Introducing Starling

Multi Resolution Development

When developing for desktop browsers, you don’t really have to worry about multi-resolution, at least until the introduction of retina displays on desktop computers by Apple, you really did not have to worry about that. Your assets were simply designed for a 72DPI resolution. When developing for mobile devices and especially iOS devices equipped with high resolution displays like the retina technology, you need to take this in account when designing your assets.

Static Approach

When targeting the browser on the desktop, just create your Starling object like below, the viewport property is dynamically written and automatically set to the stage dimensions:

package 
 { 
 import flash.display.Sprite; 
 import flash.display.StageAlign; 
 import flash.display.StageScaleMode; 
 import starling.core.Starling; 
 
 [SWF(width="1024", height="768", frameRate="60", backgroundColor="#000000")]
   
    public class Startup extends Sprite 
     { 
       private var mStarling:Starling;
      
       public function Startup() 
        { 
          // scaling top left 
          stage.align = StageAlign.TOP_LEFT; 
          // no scaling 
          stage.scaleMode = StageScaleMode.NO_SCALE; 
          // create our Starling instance 
          mStarling = new Starling(Game, stage);
          // start it! 
          mStarling.start(); 
          // show stats 
          mStarling.showStats = true; 
          // outputs : 
          (x=0, y=0, w=1024, h=768)  
          trace (mStarling.viewPort);
        } 
     } 
 }

In this scenario, when running inside the browser, no difference between the stage dimensions and the viewport, they are in-sync:

• The viewPort decides into which area ...