PhaserJS：在知道 x 和 y 时放置精灵的视觉指南

Question

是否有某种 Chrome 插件或移相器的东西可以让我找出我希望放置精灵的位置的 x 和 y 坐标？

现在，这是一个猜谜游戏。我必须使用一个数字，重新加载浏览器，然后转到游戏中的点（现在可能是开始点），看看它是否正常。否则，重复该过程。

还有更好的吗？可视化调试器或类似的东西？

我已经尝试使用标准 Google Chrome 开发工具，但我无法访问 HTML canvas 或 WebGL 中的精灵。

Answer 1

如果你在 onClick 回调中没有任何动作，你可以使用这样的东西：

var text;
Jumper.Game.prototype = {
  create: function() {
    this.game.input.onDown.add(this.onTap, this);
  },
  onTap: function(pointer){
    text = "x:"+parseInt(pointer.x)+" y="+parseInt(pointer.y);  
  },
  render:function(){
    this.game.debug.text(text || '--', 2, 14, '#00ff00');
  }
}

或者您可以将 this.game.input.onDown.add(this.onTap, this); 更改为 this.game.input.addMoveCallback(this.onTap, this) 以获得 "live" 位置。

PhaserJS：在知道 x 和 y 时放置精灵的视觉指南

PhaserJS: Visual guide for placing sprites when knowing the x and y

html5-canvas

phaser-framework