Nape -在不同屏幕尺寸上保持相同的物理行为

Question

我想知道如何在不同的屏幕尺寸上保持相同的物理行为？

例如，我把一个轮子固定在舞台中央。我有一个鼠标枢轴关节，我用它来旋转轮子。

滚轮的半径取决于屏幕大小，它总是占据屏幕大小的一半左右。

现在，当我在一个更大的屏幕上创建一个轮子时，它感觉像是更重的物体。在较小的屏幕尺寸上旋转它要困难得多。

我想知道让物理模拟在所有屏幕尺寸上完全相同的最佳实践方法是什么？

Answer 1

这是我通常在Air项目中处理响应式布局的方式，可能还有更聪明的方法，但我认为它可能会有所帮助：

(1)创建尺寸辅助变量：

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)然后在准备好阶段后，在主类初始化器(实例化Starling的地方)中添加以下代码：

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)修改Starling实例的Root类，设置屏幕比例：

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)最后，使用助手集，更具体地说，使用第一个Sizes.scaleToScreen来匹配Starling和显示列表比例。

// 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);

因此，为了回答您的问题，使用此技术，您将在任何缩放屏幕尺寸内包含的恒定安全边界(在本例中为320x480)内工作。

希望这能帮助你和其他人使用Starling和Nape制作响应性很好的游戏！