Question

我有一个代码：

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

 holdLeft = game.add.button(w/2.892, h/1.3092, 'holdLeft', this.holdLeft, this);

我在为这个精灵设置坐标时遇到了问题，例如，我不确切知道这个坐标应该在哪里，我需要考虑一些坐标但是我总是需要一次又一次地改变它

也许有另一种更简单的方法可以做到这一点？

提前谢谢！

我真的很感激！

Answer 1

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

现在，如果你想根据屏幕尺寸调整按钮的位置，那就没有神奇的解决方案了。例如Here's a generic article关于这个话题。您应该决定从哪个原点定位每个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);

等。没有任何一个解决方案适合所有人，但要明确什么使用什么作为起源，并希望你在调整屏幕大小时不会有惊喜。

Answer 2

Phaser.Button，就像图像和精灵一样，具有anchor属性，默认情况下设置为（0,0）（左上角）。您可以将其设置为按钮宽度的一半和高度的一半，如下所示：

holdLeft.anchor.set(0.5, 0.5);

http://phaser.io/docs/2.3.0/Phaser.Button.html

如何在Phaser中正确设置精灵的坐标？

2 个答案: