Flixel Forums

development => releases => Topic started by: OldmanBiles on Mon, Feb 27, 2012

Title: Scaling for Mobile Devices With Flixel
Post by: OldmanBiles on Mon, Feb 27, 2012
Hi all, I joined up to the forums looking for help but I did say i'd give something back eventually. So here it is!

I've recently just finished a little game with Flixel on the android market (https://market.android.com/details?id=air.com.android.OldmanBiles.AndIFellFromTheMoonlite&feature=search_result#?t=W251bGwsMSwxLDEsImFpci5jb20uYW5kcm9pZC5PbGRtYW5CaWxlcy5BbmRJRmVsbEZyb21UaGVNb29ubGl0ZSJd).
Apart from some speed issues on older devices (mostly to do with Flixel not being completely brilliant on older, slower mobile devices) The end result is not too bad for a few days of work. One thing I wanted to share was the code I used to automatically scale the screen size based on the device resolution.
I ended up rewriting the entire game after I tried to test the game on a tablet and the whole thing didn't scale. Obviously you still have to scale and reposition the sprites and tilemaps based on screen size anyway along with handling camera bounds, etc.
Anyway here's the code, remember it has to be an AIR application.
Code: [Select]
package
{
import org.flixel.FlxGame;

/**
* ...
* @author OldManBiles
*/
public class Main extends FlxGame
{

public function Main():void
{
super(100, 100, setUpScreen, 1);
}

}

}
Code: [Select]
package 
{
import flash.display.StageDisplayState;
import flash.system.Capabilities;
import org.flixel.*

/**
* ...
* @author OldManBiles
*/
public class setUpScreen extends FlxState
{
public function setUpScreen()
{
FlxG.stage.displayState = StageDisplayState.FULL_SCREEN;
FlxG.stage.stageHeight = Capabilities.screenResolutionY;
FlxG.stage.stageWidth = Capabilities.screenResolutionX;
FlxG.width = FlxG.stage.stageWidth / FlxCamera.defaultZoom;
                        FlxG.height = FlxG.stage.stageHeight / FlxCamera.defaultZoom;
        }

override public function update():void
{
FlxG.switchState(new mainState());

}
}

}
Code: [Select]
package 
{
import flash.events.Event;
import org.flixel.*

/**
* ...
* @author OldManBiles
*/
public class mainState extends FlxState
{
private var background:FlxSprite;
private var sprite:FlxSprite;


public function mainState()
{
background = new FlxSprite(0, 0)
background.makeGraphic(FlxG.width, FlxG.height, 0xFFFF8000, true);
add(background);

sprite = new FlxSprite(0, 0)
sprite.x = (FlxG.width / 2) - (sprite.width / 2);
sprite.y = (FlxG.height / 2) - (sprite.height / 2);
add(sprite);
}

}

}

The SetUpScreen state is where the magic happens, which is why it is always called before everything else. I call the Capabilities function available within AIR which allows you to return the screenresolution of the current device. I then set the actual flash stage width and then the flixel stage width ( I made the critical mistake of forgetting to set the actual flash stage before!).

I hope this helps.

Adam.
Title: Re: Scaling for Mobile Devices With Flixel
Post by: test84 on Tue, Jun 28, 2016
Could anyone get this to work? I did what he suggested but nothing scales.