如何通过 Phaser 创建自适应游戏

Question

我正在通过 Phaser.io 创建一个简单的游戏如何让它在不同的屏幕上正确显示？

当我使用这个时：

var w = window.innerWidth * window.devicePixelRatio,
h = window.innerHeight * window.devicePixelRatio;

var avaProfile = game.add.image(w/1.66, h/6.3, 'avaProfile');
avaProfile.fixedToCamera = true;

发生了这样的事情：

而且我什至无法想象如何让所有元素都自适应

Answer 1

首先，如果你想根据游戏大小定位你的按钮，你应该使用游戏。width/game.高度更可靠。

现在，如果您想根据屏幕尺寸调整按钮的位置，没有什么灵丹妙药。例如，这是一篇关于该主题的通用文章。您应该决定从哪个原点定位每个 UI 元素，无论是屏幕角、屏幕中心、游戏玩法 object 等，并预测如果分辨率会怎样变化。

例如，如果您想在屏幕中央显示一个正方形 pop-up，您可以执行以下操作：

var popup = game.add.sprite(game.width/2, game.height/2, 'popup');
popup.width = 400;
popup.height = 400;
popup.anchor.set(0.5, 0.5);

现在给它一个标题，您可能想根据弹出窗口本身来定位它：

 var text = game.add.sprite(popup.x, popup.y + 10, 'Hello world');
 text.anchor.set(0.5, 0);

等没有 one-solution-fits-all 但要明确什么使用什么作为原点，希望您在调整屏幕大小时不会有意外。

如何通过 Phaser 创建自适应游戏

How to create adaptive games via Phaser

javascript

jquery

adaptive-design

phaser-framework