0
223
VistasPara obtener el objetivo x e y para la animación `tweens`, utilicé SOHCAHTOA, solo me gustaría saber si Phaser 3 proporciona una herramienta útil para hacer el trabajo
Seguí la publicación . La misma idea exactamente coloca un rectángulo a lo largo de la línea central, aunque no puede colocar una imagen en el lugar correcto, ¿cómo lo soluciono? , traté de mover el cerrojo a lo largo de la línea.
aquí está el código
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); } });y luego obtuve lo que quiero, un rayo moviéndose a lo largo de la línea
para calcular el objetivo x e y para la animación de tweens , usé SOHCAHTOA
Solo me gustaría saber si Phaser 3 proporciona una herramienta útil para hacer el trabajo.
1 Respuestas
Responde la pregunta0
Una opción fácil es convertir la imagen/sprite en un objeto físico y simplemente moverlo a lo largo del ángulo/dirección.
Aquí los cambios necesarios:
agregar física a la configuración del juego:
... physics: {default: 'arcade' }, ...calcular la dirección como un vector
let direction = new Phaser.Math.Vector2( 290 - 90, 190 - 290);agregue física a la imagen (y cualquier objeto con el que deba interactuar)
this.physics.add.existing(bolt);establecer la velocidad del cuerpo físico de la imagen
bolt.body.setVelocity(direction.x, direction.y );
Información: para este ejemplo no necesitarías crear un
Vector2, pero me gusta usarlos, ya que tienen algunos métodos muy convenientes. comonormalize,scale,length, etc. Así que no tienes que hacer los cálculos, solo conoce la función correcta.
Aquí un ejemplo de trabajo:
Actualización: el rayo ahora golpea el objetivo (segundo círculo) y el bolt se destruye al impactar.
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>Información adicional: para obtener ejemplos más detallados sobre la física de Phaser, recomiendo mirar estos ejemplos oficiales: https://phaser.io/examples/v3/category/physics/arcade cubren la mayoría de los casos de uso/función comunes necesarios y explican ellos muy bien. (Mejor de lo que podría)