Handling Screen Resizes

As a Flash developer, you generally rely on a very simple event to handle screen resizes, such event is called Event.RESIZE and allows you to be notified everytime the page dimensions are being changed. By using the stage.stageWidth and stage.stageHeight properties you can then layout your content appropriately, no matter what screen size you are targeting.

To handle this, the starling.display.Stage used by Starling also dispatches a similar event, called ResizeEvent.RESIZE, allowing you to handle dynamic resize elegantly.

In this code, we update our first example with our quad centered in the scene:

package
{
    import flash.geom.Rectangle;g

    import starling.core.Starling;
    import starling.display.Quad;
    import starling.display.Sprite;
    import starling.events.Event;
    import starling.events.ResizeEvent;

    public class Game extends Sprite
    {
        private var q:Quad;
        private var rect:Rectangle = new Rectangle(0,0,0,0);

        public function Game()
        {
            addEventListener(Event.ADDED_TO_STAGE, onAdded);
        }

        private function onAdded ( e:Event ):void
        {
            // listen to the event
              stage.addEventListener(ResizeEvent.RESIZE, onResize);

            q = new Quad(200, 200);
            q.color = 0x00FF00;
            q.x = stage.stageWidth - q.width >> 1;
            q.y = stage.stageHeight - q.height >> 1;
            addChild ( q );
        }

        private function onResize(event:ResizeEvent):void
        {
           // set rect dimmensions
            rect.width = event.width, rect.height = event.height;

            // resize the viewport
            Starling.current.viewPort = rect;

            // assign the new stage width and height ...

Get Introducing Starling now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.