Nape - Keeping the same physics behaviour over different screen sizes

Question

Im wondering how to keep the same physics behaviour over different screen sizes?

For example, i have a wheel fixed on the middle of the stage. I have a mouse pivot joint that i use to spin the wheel.

The radius of the wheel depends on the screen size, it will always occupy about half of screen size.

Now, when i create a wheel on a bigger screen, it is feels as much heavier object. It is much harder to spin it then on a smaller screen size.

Im wondering what is the best practice way of making the physics simulation run exactly the same across all screen sizes?

Answer 1

This is how I usually handle responsive layout in my Air projects, there is probably smarter ways out there but I thought it could help:

(1) Create Sizes helper variables:

package 
{
    import starling.errors.AbstractClassError;

    public class Sizes
    {
        public function Sizes() { throw new AbstractClassError(); }

        public static const SAFE_WIDTH:int  = 320;
        public static const SAFE_HEIGHT:int = 480;
        public static var fullWidth:Number = 0;
        public static var fullHeight:Number = 0;
        public static var centerX:Number = 0;
        public static var centerY:Number = 0;
        public static var remainderWidth:Number = 0;
        public static var remainderHeight:Number = 0;
        public static var halfRemainderWidth:Number = 0;
        public static var halfRemainderHeight:Number = 0;   
    }       
}

(2) Then in you main class initializer (where you instanciate Starling) add this code when your stage is ready:

Sizes.scaleToScreen = Math.min( stageWidth / Sizes.SAFE_WIDTH, stageHeight / Sizes.SAFE_HEIGHT );
Sizes.remainderWidth = ( stageWidth / Sizes.scaleToScreen ) - Sizes.SAFE_WIDTH;
Sizes.remainderHeight = ( stageHeight / Sizes.scaleToScreen ) - Sizes.SAFE_HEIGHT;
Sizes.halfRemainderWidth = Sizes.remainderWidth / 2;
Sizes.halfRemainderHeight = Sizes.remainderHeight / 2;

Sizes.fullWidth = stageWidth / Sizes.scaleToScreen;
Sizes.fullHeight = stageHeight / Sizes.scaleToScreen;

Sizes.centerX = Sizes.fullWidth/2;
Sizes.centerY = Sizes.fullHeight/2;

(3) Modify the Root class of your Starling instance, by setting the screen scale:

public function start(background:Texture, bgRect:Rectangle, assets:AssetManager):void
{
    // the asset manager is saved as a static variable; this allows us to easily access
    // all the assets from everywhere by simply calling "Root.assets"
    sAssets = assets;

    var bg:Image = new Image( background );
    bg.width = bgRect.width / Sizes.scaleToScreen;
    bg.height = bgRect.height / Sizes.scaleToScreen;
    scaleX = scaleY = Sizes.scaleToScreen; // where the magic happens :)
    addChild(bg);
    ...

(4) Finally, use the set of helpers, and more specifically the first one Sizes.scaleToScreen to match Starling and the display list scales.

// You can now scale your debug Bitmap to match your starling stage scale:
debug = new BitmapDebug(Sizes.fullWidth, Sizes.fullHeight, 0, true);
debug.display.scaleX = debug.display.scaleY = Sizes.scaleToScreen;
Starling.current.nativeOverlay.addChild(debug.display);

So to answer your question, using this technique you would work within constant safe bounds (in this case 320x480) contained within any scaled screen size.

Hope that helps you and others make great responsive games using Starling and Nape!!