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

Question

Followed the post 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?, I tried to move the bolt along the line.

here is the code

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

and then I got what I want, a bolt moving along the line

to calculate 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.

user_1679286 · Answer

An easy option is to make the image/sprite to physics-object and just move it, along the angle / direction.

Here the needed changes:

add physics to the game config:
```
...
physics: {default: 'arcade' },
...
```

calculate the direction as a Vector

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

add physics to the image (and any object it should interact with)
```
this.physics.add.existing(bolt);
```

set the velocity of the physics body of the image

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.

Here a working example:
Update: Bolt now hits target (second circle) and bolt is destroyed on impact.

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

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)

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

1 Answers