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

我正在通过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;

类似的事情发生了：

---

我甚至无法想象如何使所有元素都具有自适应性。首先，如果您想根据游戏大小来定位按钮，您可能应该使用更可靠的game.width/game.height

现在，如果你想根据屏幕大小调整按钮的位置，没有神奇的解决方案。例如，这里有一篇关于这个主题的一般性文章。您应该决定从哪个原点定位每个UI元素，无论是屏幕角、屏幕中心、游戏对象等，并预测如果分辨率发生变化，结果会如何

例如，如果您希望在屏幕中央有一个方形弹出窗口，您可以执行以下操作：

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

---

等等。没有一种解决方案是万能的，但要明确什么使用什么作为原点，希望在调整屏幕大小时不会有意外。

你读过这篇文章吗？可以帮助移动适应。看看这个答案