StarlingDevTip

Dev tip: proportional resizing in Starling

During Steps¬†development i had problems with game resolution and resizing in different Android devices. So many developers was looking for clear answer how to implement proportional resizing. After many trials and errors i found out the solution. I’am currently using Starling framework for mobile game development.

So the main idea is to fit entire game stage in current device resolution and align to center of the screen. Be aware we are not using scale factors or same textures with different resolutions, so if you resize 320×480 to bigger screens, graphics could apear blurry. So here is code snippet.

import flash.system.Capabilities;

var screenWidth:int = Capabilities.screenResolutionX;
var screenHeight:int = Capabilities.screenResolutionY;

var ratioRect:Rectangle = new Rectangle(0, 0, 640, 960);
var screenRect:Rectangle = new Rectangle(0, 0, screenWidth, screenHeight);
var viewport:Rectangle = RectangleUtil.fit(ratioRect, screenRect, ScaleMode.SHOW_ALL);
viewport.x = stage.stageWidth * 0.5 – viewport.width * 0.5;
viewport.y = stage.stageHeight * 0.5 – viewport.height * 0.5;

mStarling = new Starling(Game, stage, viewport);
mStarling.stage.stageWidth = 640;
mStarling.stage.stageHeight = 960;
mStarling.start();

It’s not hard and perhaps many developers figured out by them selves, so many begginers can benefit from this. I hope it helps. I will share more tips in the future.

Tomas, Lead developer