Phaser：使背景屏幕宽度而不是内容宽度

Question

我正在为 Android 使用 Phaser Framework 制作游戏。我需要让 canvas 填满整个屏幕宽度，然后用背景色填充它，然后将内容放在屏幕中央。目前，即使我已经将 canvas 的宽度设置为 window 宽度，Phaser 仍然将其重置为更小的内容宽度，然后仅用背景填充内容宽度。

如何阻止 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');
....

Answer 1

为此您需要 Phaser 2.2+，但如果您希望 canvas 填满可用的整个屏幕 space，您可以这样做：

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

...

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

此外，如果您使用 100% 尺寸，则不应使用 pageAlign。您也不需要调用刷新或 setScreenSize。

在 RESIZE 缩放模式下工作时，您可以向状态添加一个名为 'resize' 的功能。只要屏幕尺寸发生变化（可能是方向事件）就会调用它，并传递 2 个参数：宽度和高度。使用它们来调整您的游戏内容布局。

您可能想要 Phaser Scale Manager book，它涵盖了所有这些更详细的内容（警告：我写了它，但它有 "pay what you want" 价格，包括完全免费）

Answer 2

我在我的游戏中使用了这段代码，它在不改变任何元素位置的情况下工作得非常好

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

也强制为竖屏

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

Phaser：使背景屏幕宽度而不是内容宽度

Phaser: Make background screen-width instead of content-width

android

phaser-framework