This class uses a 2048 iPad retina-based texture atlas to create textures for the current screen size by scaling the images with respect to the aspect ratio. The created images are then packed into a new atlas and saved in the ApplicationStorageDirectory folder for use for any subsequent runs. The crux of it is the following function, which scales the images:

private static function scaleBitmapData(ARG_object : BitmapData, ratio : Number):BitmapData {
  var bmpd : BitmapData = new BitmapData(Math.round(ARG_object.width * ratio), 
  Math.round(ARG_object.height * ratio), true, 0x000000);
  var scaleMatrix:Matrix = new Matrix();
  scaleMatrix.scale(ratio, ratio);
  var colorTransform:ColorTransform = new ColorTransform();
// draw the object to the BitmapData, applying the matrix to scale
  bmpd.draw( ARG_object, scaleMatrix ,colorTransform,null,null,true);
  ARG_object.dispose();
  ARG_object = null;
  return bmpd;
}

The ResourceManager class initiates the creation of the dynamic atlas by calling the following:

DynamicAtlasCreator.createFrom(XhdpiPng.bitmapData,data,scaleRatio,assets,atlasName);

It passes the 2048-based texture details along with the scale ratio to which we need to scale down, an instance to the asset manager, and the name in which we would be saving the new atlas. ScaleRatio needs to be calculated based on the current screen.

The good thing about developing a tile-based game is that it becomes much easier to scale the game scene up or down as it is just a matter of increasing or decreasing the tile width. In our game too, we just need to find a new tile width, based on which we can re-align our game without affecting the logic and create a new atlas based on the new tile width. The FlagDefenseDevice class calls up an onResize method when a Starling root is created. OnResize calls up the rescaleAndRedraw method of the SceneManager class, passing in the current stage width and height as parameters.

Have a look at the following rescaleAndRedraw code from the SceneManager class:

public function rescaleAndRedraw(newWidth:Number,newHeight:Number)
:void{
  if(ResourceManager.assets){
    ResourceManager.assets.purge();
  }
  var visibileTiles:Point = new Point(13,20);
  var newDimensionX:uint = 
  1 + Math.round(newWidth / visibileTiles.x);
  var newDimensionY:uint = 
  1 + Math.round(newHeight / visibileTiles.y);

  if(newDimensionX > 2 * newDimensionY){
    newDimensionX = 2 * newDimensionY;
  }else{
    newDimensionY = newDimensionX / 2;
    newDimensionX = 2 * newDimensionY;
  }
  var scaleRatio:Number = Math.round(newDimensionY / 8) / 10;
  ResourceManager.initialise(scaleRatio);
    addEventListener(Event.ENTER_FRAME,waitForReload);
}
private function waitForReload(e:Event):void{
  if(ResourceManager.initialised){
  removeEventListener(Event.ENTER_FRAME,waitForReload);
  launchMenu();
  }
}

We need to show 13 tiles horizontally and 20 tiles vertically to complete the display of our effective game area. Here, we essentially divide the screen width and height with these values to find the best size for our new tile width. This is a misnomer as we are actually using the newDimensionY height value as the tile width. The scaleRatio value is calculated by dividing the new tile width by the original tile width, which is 80. ResourceManager is called to initialize and thereby create a new texture atlas and we wait for the process to be completed. The menu gets launched once the textures are in place.

Now, as the screen size can be of any value, we need to find a way to properly position items. The safest way is to position them based on the screen size and the item size itself.

helpBtn.x = stage.stageWidth / 2 – helpBtn.width / 2;

This code places the button in the middle of any screen horizontally. For absolute placement we need to use the scaleRatio value.

soundBtn.y = (20 * ResourceManager.scaleRatio);

This will place it at 20 pixels for iPad retina and 10 pixels for iPad nonretina.

Now, in order to middle align our active game area on any screen size, we need to do some calculations. This is done within the MainLevel class' init method.

sr=ResourceManager.scaleRatio;
var newDimensionY:uint = sr * 80;
var newDimensionX:uint = 2 * newDimensionY;
viewPort = RectangleUtil.fit(
  new Rectangle(0, 0, 2*newDimensionY*visibileTiles.x, newDimensionY*visibileTiles.y),
  new Rectangle(0, 0, stage.stageWidth, stage.stageHeight),ScaleMode.SHOW_ALL);
screenOffset.x = 2 * newDimensionY * screenOffset.x / (2 * tileWidth);
screenOffset.y = newDimensionY * screenOffset.y / tileWidth;
screenOffset.x += viewPort.x;
screenOffset.y += viewPort.y;
tileWidth = newDimensionY;

This finds the rectangle fitting value to centralize the active area and adds it to the screenoffset value which makes all the drawing to get offset, thereby centralizing the game scene.