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

Question

关注帖子 The exactly same idea puts a rectangle along the centerline of it though cannot put an image in the right place, how do I fix it? ，我试图沿着这条线移动 bolt 。

这是代码

  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);
    }
  });

然后我得到了我想要的东西，一个沿着直线移动的 bolt

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

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

Answer 1

一个简单的选择是将图像/ Sprite 制作成物理对象，然后沿着 Angular/方向移动它。

此处需要更改:

• 将物理添加到游戏配置中:

  ...
  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 现在击中目标(第二圈)并且 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)