我正在使用适用于 Android 的 Phaser 框架制作游戏。我需要让 Canvas 填满整个屏幕宽度,然后用背景色填充它,然后将内容放在屏幕中央。目前,即使我已经将 Canvas 的宽度设置为窗口宽度,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');
....
最佳答案
为此您需要 Phaser 2.2+,但如果您希望 Canvas 填满可用的整个屏幕空间,您可以这样做:
var game = new Phaser.Game("100%", "100%", Phaser.CANVAS, 'parent');
...
game.scale.scaleMode = Phaser.ScaleManager.RESIZE;
此外,如果您使用 100% 尺寸,则不应使用 pageAlign。您也不需要调用 refresh 或 setScreenSize。
在 RESIZE 缩放模式下工作时,您可以向状态添加一个名为“调整大小”的功能。只要屏幕尺寸发生变化(可能是方向事件)就会调用它,并传递 2 个参数:宽度和高度。使用它们来调整您的游戏内容布局。
您可能想要获得 Phaser Scale Manager book ,它涵盖了所有这些更多的细节(警告:我写了它,但它有一个“支付你想要的”价格,包括完全免费)
关于android - 移相器 : Make background screen-width instead of content-width,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28227090/