如何在 Phaser 中正确设置精灵的坐标?
How to set coordinates for sprite correctly in Phaser?
我有一个代码:
w = window.innerWidth * window.devicePixelRatio,
h = window.innerHeight * window.devicePixelRatio;
holdLeft = game.add.button(w/2.892, h/1.3092, 'holdLeft', this.holdLeft, this);
而且我在为这个精灵设置坐标时遇到了问题,例如,我不知道这个精灵应该在哪里,我需要想出一些坐标,但我总是需要一次又一次地改变它
也许还有其他更简单的方法?
提前致谢!
非常感谢!
Phaser.Button,就像图像和精灵一样,有一个 anchor
属性,默认设置在 (0, 0)(左上角)。您可以像这样将其设置为按钮宽度的一半和高度的一半:
holdLeft.anchor.set(0.5, 0.5);
首先,如果你想根据游戏大小定位你的按钮,你应该使用游戏。width/game.高度更可靠。
现在,如果您想根据屏幕尺寸调整按钮的位置,没有什么灵丹妙药。 Here's a generic article 例如关于主题。您应该决定从哪个原点定位每个 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 但要明确什么使用什么作为原点,希望您在调整屏幕大小时不会有意外。
我有一个代码:
w = window.innerWidth * window.devicePixelRatio,
h = window.innerHeight * window.devicePixelRatio;
holdLeft = game.add.button(w/2.892, h/1.3092, 'holdLeft', this.holdLeft, this);
而且我在为这个精灵设置坐标时遇到了问题,例如,我不知道这个精灵应该在哪里,我需要想出一些坐标,但我总是需要一次又一次地改变它
也许还有其他更简单的方法?
提前致谢!
非常感谢!
Phaser.Button,就像图像和精灵一样,有一个 anchor
属性,默认设置在 (0, 0)(左上角)。您可以像这样将其设置为按钮宽度的一半和高度的一半:
holdLeft.anchor.set(0.5, 0.5);
首先,如果你想根据游戏大小定位你的按钮,你应该使用游戏。width/game.高度更可靠。
现在,如果您想根据屏幕尺寸调整按钮的位置,没有什么灵丹妙药。 Here's a generic article 例如关于主题。您应该决定从哪个原点定位每个 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 但要明确什么使用什么作为原点,希望您在调整屏幕大小时不会有意外。