Android Phaser:将背景屏幕宽度改为内容宽度

Android Phaser:将背景屏幕宽度改为内容宽度,android,phaser-framework,Android,Phaser Framework,我正在使用Android的Phaser框架制作一个游戏。我需要让画布填满整个屏幕宽度,然后用背景色填充,然后将内容放在屏幕中央。目前,即使我已经将画布的宽度设置为“窗口宽度”,Phaser仍然将其重置为“内容宽度”(content width),该宽度更小,然后仅使用背景填充内容宽度 如何阻止Phaser使用内容宽度 var gameObj = new Phaser.Game($(".parent").width(), 700, Phaser.CANVAS, 'parent'); gameOb

我正在使用Android的Phaser框架制作一个游戏。我需要让画布填满整个屏幕宽度,然后用背景色填充,然后将内容放在屏幕中央。目前,即使我已经将画布的宽度设置为“窗口宽度”,Phaser仍然将其重置为“内容宽度”(content width),该宽度更小,然后仅使用背景填充内容宽度

如何阻止Phaser使用内容宽度

var gameObj = new Phaser.Game($(".parent").width(), 700, Phaser.CANVAS, 'parent');

gameObj.stage.backgroundColor = '#A6E5F5';
gameObj.load.image('prld', 'prl.png');

gameObj.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
gameObj.scale.pageAlignHorizontally = true;
gameObj.scale.pageAlignVertically = true;
gameObj.scale.setScreenSize(true);
gameObj.scale.refresh();

gameObj.stage.backgroundColor = '#A6E5F5';    

// Load Content Here
gameObj.load.image('h1', 'res1/h1.png');
gameObj.load.image('h2', 'res1/h2.png');
....
g = gameObj.add.group();
g.create(20, 20, 'h1');
g.create(60, 20, 'h2');
....

为此,您需要Phaser 2.2+,但如果您希望画布填充整个可用屏幕空间,您可以执行以下操作:

var game = new Phaser.Game("100%", "100%", Phaser.CANVAS, 'parent');

...

game.scale.scaleMode = Phaser.ScaleManager.RESIZE;
此外,如果使用100%维度,则不应使用pageAlign。您也不需要调用refresh或setscrensize

在调整大小缩放模式下工作时,可以向状态添加一个名为“调整大小”的函数。每当屏幕尺寸改变时(可能是方向事件),就会调用它,并传递两个参数:宽度和高度。使用这些来调整游戏内容布局


你可能想得到,它涵盖了更多的细节(警告:我写了它,但它有一个“支付你想要的”的价格,包括完全免费)

我在我的游戏中使用这个代码,它工作得非常好,没有任何元素的位置变化

var targetWidth = 720; // the width of the game we want
var targetHeight = 480; // the height of the game we want

// additional ratios

//Small – 360x240
//Normal – 480x320
//Large – 720x480
//XLarge – 960x640
//XXLarge – 1440x960

var deviceRatio = (window.innerWidth/window.innerHeight); //device aspect ratio

var newRatio = (targetHeight/targetWidth)*deviceRatio; //new ratio to fit the screen

var newWidth = targetWidth*newRatio;
var newHeight = targetHeight;

var gameWidth = newWidth;
var gameHeight = newHeight;
var gameRendrer = Phaser.AUTO;
这是引导状态的代码

game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;

        game.scale.pageAlignHorizontally = true;
        game.scale.pageAlignVertically = true;
        game.scale.forceLandscape = true;
        game.scale.setScreenSize(true);
这对于横向模式,如果你想让它的肖像改变宽度和高度一样

var targetWidth = 480; // the width of the game we want
var targetHeight = 720; // the height of the game we want
还要强迫它去画像

此代码在我的游戏中运行良好


在调整缩放模式下缩放bipmapdata、tilemaps等的任何示例?我们需要更多关于这方面的例子:)我在phaser dist中没有看到函数SetScreensize函数。你能告诉我你用的是哪个版本吗?此外,新的移相器版本的等效功能是什么?