0
228
VisualizaçõesTo 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
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.
1 Respostas
Responde à pergunta0
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. likenormalize,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();
}<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)