关注帖子 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 是否提供了一个方便的工具来完成这项工作。
最佳答案
一个简单的选择是将图像/ 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. likenormalize
,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)
关于javascript - 为了获得 `tweens` 动画的目标 x 和 y,我使用了 SOHCAHTOA,我只是想知道 Phaser 3 是否提供了一个方便的工具来完成这项工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70830782/