移动 Phaser.Graphics 行的一端

Question

对于一个项目，我试图在 Phaser 中绘制一条移动线。我最初使用 game.debug.geom(line) 绘制它，但这并不是真正正确的方法，因为它不允许样式化，而且调试器会影响性能。

阅读文档，在我看来，这样做的方法是使用 Phaser.Graphics 对象，但我无法让它工作。例如，我试着让一条线像时钟的指针一样移动，一端固定，另一端绕着它移动。

我认为可以在中间创建 Graphics 对象，然后在 update 中使用 reset to clear it and bring it back to the center, and then lineTo 来制作该行的其余部分。但是我得到的是一条从中心向外延伸的线，然后是一个环。

悲伤的图片：

我尝试了 pen。下面重复代码。我想要的是一条线（线？）从圆心到圆周上的点。

Graphics 对象是最好的方法吗？我该怎么做？

Demo.prototype = {
  create: function() {
    this.graphics = game.add.graphics(
      game.world.centerX,
      game.world.centerY
    );
    this.graphics.lineStyle(2, 0xffd900);
    this.counter = 0;
    this.step    = Math.PI * 2 / 360;
    this.radius  = 80;
  },
  update: function() {
    this.graphics.reset(
      this.game.world.centerX,
      this.game.world.centerY
    );
    var y = this.radius * Math.sin(this.counter);
    var x = this.radius * Math.cos(this.counter);
    this.graphics.lineTo(x, y);
    this.counter += this.step;
  }
};

Answer 1

您可能想看看这款名为 Cut It (not my game btw, found it here) 的 Phaser 游戏。

它还巧妙地利用Phaser.TileSprite绘制了一条可变长度的虚线，然后改变它的宽度。

TileSprite 绘制一个重复的图案，你可以通过绘制一个线段的位图来使用它来绘制一条线，将其用作 TileSprite 的背景并使 TileSprite 的高度与位图的高度。

您可以看一下游戏的源代码，它经过压缩和缩小，但仍然具有一定的可读性。您可以查找名为 cut_line.

的变量

Answer 2

终于明白了，Phaser.Graphics物体所取的坐标是局部的，分别对应于物体的内部坐标系。使用 moveTo(0, 0) 具有将对象的绘图指针移回其原点的预期结果（而不是像我最初认为的那样回到游戏世界的原点）。另一方面，使用 reset(0, 0) 会产生将对象原点移动到世界原点的效果。

至于删除前面的行，我发现的唯一方法是手动清除对象的 graphicsData 数组（除了调用 destroy() 并创建一个全新的对象，这可能是这不是一个好主意）。

用这个替换原始问题中的代码就可以了：

Demo.prototype =  {
  create: function() {
    this.graphics = game.add.graphics(
      game.world.centerX,
      game.world.centerY
    );
    this.graphics.lineStyle(2, 0xffd900);
    this.counter = 0;
    this.step    = Math.PI * 2 / 360;
    this.radius  = 80;
  },
  update: function(){
    // Erases the previous lines
    this.graphics.graphicsData = [];

    // Move back to the object's origin
    // Coordinates are local!
    this.graphics.moveTo( 0, 0 );

    var y = this.radius * Math.sin(this.counter);
    var x = this.radius * Math.cos(this.counter);
    this.graphics.lineTo(x, y);
    this.counter += this.step;
  }
};

移动 Phaser.Graphics 行的一端

Moving one end of a Phaser.Graphics line

phaser-framework