phaser3 画虚线实现

方式一 间隔曲线 graphics绘制短线留出间隔

drawDashLine(from, to) {
    const { g } = this
    const a = new Phaser.Math.Vector2(from.x * 2, from.y * 2)
    const b = new Phaser.Math.Vector2(to.x * 2, to.y * 2)
    g.lineStyle(7, 0xDDF7FF)
    const curve = new Phaser.Curves.Line(
      a,
      b,
    )
    const len = a.distance(b)
    const points = curve.getSpacedPoints(len / 20)
    const offsetX = b.x - a.x
    const offsetY = b.y - a.y

    for (let index = 0; index < points.length; index++) {
      const { x, y } = points[index]
      g.moveTo(x, y)
      g.lineTo(
        x + 10 * offsetX / len,
        y + 10 * offsetY / len,
      )
    }
 }

方式二 使用虚线图片 计算长度在一定间隔会产生的点数量 Actions排列,以斜率旋转图片

drawDashLine2(from, to) {
    const { scene } = this
    const a = new Phaser.Math.Vector2(from.x * 2, from.y * 2)
    const b = new Phaser.Math.Vector2(to.x * 2, to.y * 2)
  
    const len = a.distance(b)

    const group = scene.add.group({ key: 'atlasIcons', frame: 'icon-star-fill.png', frameQuantity: len / 100 })
    group.rotate(a.x - b.x === 0 ? 0 : (a.y - b.y) / (a.x - b.x))
    const line = new Phaser.Geom.Line(
      a.x, a.y,
      b.x, b.y,
    )

    Phaser.Actions.PlaceOnLine(group.getChildren(), line)
  }

如果有其他更好的实现方式，欢迎补充。
keywords: phaser3, dotted line, line dash，虚线