为了获得“tweens”动画的目标 x 和 y，我使用了 SOHCAHTOA，我只是想知道 Phaser 3 是否提供了一个方便的工具来完成这项工作

Question

按照 post ，我尝试沿线移动螺栓。

这是代码

  let opposite_side = Math.abs(190 - 290);
  let adjacent_side = Math.abs(290 - 90);

  let adjacent_tartget = 123
  let opposite_tartget = opposite_side / adjacent_side
  opposite_tartget *= adjacent_tartget

  this.tweens.add({
    targets: bolt,
    x: 290 - adjacent_tartget,
    y: 190 + opposite_tartget,
    rotation: angle,
    ease: 'Linear',
    duration: 1500,
    onComplete: function(tween, targets) {
      targets[0].setVisible(false);
    }
  });

然后我得到了我想要的，一个螺栓沿着线移动

为了计算 tweens 动画的目标 x 和 y，我使用了 SOHCAHTOA

我只想知道 Phaser 3 是否提供了一个方便的工具来完成这项工作。

Answer 1

一个简单的选择是将 image/sprite 变为 physics-object 并沿着角度/方向移动它。

此处需要更改：

将物理添加到游戏配置中：
```
...
physics: {default: 'arcade' },
...
```

将方向计算为矢量

let direction = new Phaser.Math.Vector2( 290 - 90, 190 - 290);

向图像添加物理效果（以及它应该与之交互的任何对象）
```
this.physics.add.existing(bolt);
```

设置图像物理体的速度

bolt.body.setVelocity(direction.x, direction.y );

Info: for this example you would not need to create a Vector2, but I like to use them, since they have some very convenient methods. like normalize, scale, length, and so on. So you don't have to do the math, just know the right function.

这是一个工作示例：
更新：螺栓现在击中目标（第二圈）并且bolt在撞击时被摧毁。

var game = new Phaser.Game({
    width: 600,
    height: 180,
    physics: {
      default: 'arcade'
    },
  scene: {
    preload: preload,
    create: create
  }
});

function preload() {
  this.load.path = 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/';
  this.load.atlas('bolt', 'bolt_atlas.png', 'bolt_atlas.json');
}

function create() {
  let player = this.add.circle(90, 170, 10, 0xf00000);
  let target = this.add.circle(490, 10, 10, 0xf00000);
  
  let direction = new Phaser.Math.Vector2( target.x - player.x, target.y - player.y);
  
  let angle = Phaser.Math.Angle.Between(player.x, player.y, target.x, target.y)
  let reference = this.add.rectangle(player.x, player.y, 600, 5, 0x00f000).setOrigin(0, .5);
  reference.rotation = angle
   
  let bolt = this.add.sprite(player.x, player.y, 'bolt', 'bolt_strike_0002').setOrigin(0, .5);
  bolt.rotation = angle;
  
  this.physics.add.existing(bolt);
  this.physics.add.existing(target);
 
  bolt.body.setVelocity(direction.x, direction.y );
  
  
  this.physics.add.collider(bolt, target, removeBolt );
  
}

function removeBolt(bolt, target){
    bolt.destroy();
    target.destroy();
}

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>

Extra Informtion: for more detailed examples on phaser physics, I recommend looking at these official examples: https://phaser.io/examples/v3/category/physics/arcade they cover most of the common needed function/use cases, and explain them very well. (Better then I ever could)

为了获得“tweens”动画的目标 x 和 y，我使用了 SOHCAHTOA，我只是想知道 Phaser 3 是否提供了一个方便的工具来完成这项工作

To get the target x and y for `tweens` animation, I used SOHCAHTOA, I'd just like to know if Phaser 3 provides a handy tool to do the job

javascript

phaser-framework