Estoy rehaciendo el billar de 8 bolas en Phaser por diversión y estoy en el proceso de configurar el objetivo de la bola blanca/bola blanca. Actualmente tengo el taco girando alrededor del punto central de la bola blanca con el movimiento del ratón:
create() {
// Spawn in pool table
this.setupTable();
// Initialize cueball
this.cueball = new Ball(this, 847, 400, 'ballsAndCue', '14ball.png', true);
// Initialize cue
this.cue = new Cue(this, 800, 400, 'ballsAndCue', 'cue.png', this.cueball);
// Set cue rotation to follow cursor on cursor movement
this.input.on('pointermove', function (pointer) {
this.angle = Phaser.Math.Angle.BetweenPoints(this.cue, pointer);
this.cue.rotation = this.angle;
}, this);
}
Sin embargo, quiero que el taco gire alrededor de toda la bola blanca. Intenté proporcionar this.cue a Phaser.Actions.RotateAround() / Phaser.Actions.RotateAroundDistance() pero no pude hacer que funcionaran. En cuanto a Phaser 2, tenían un pivote que podía establecer, pero no veo nada similar que no sea setOrigin() , que ya he usado para que la señal gire alrededor de la punta.
Clase de entrada:
import Phaser from 'phaser';
export default class Cue extends Phaser.GameObjects.Sprite {
constructor(scene, x, y, spritesheet, sprite, cueball) {
super(scene, x, y, spritesheet, sprite);
scene.add.existing(this);
this.setX(cueball.x);
this.setY(cueball.y);
this.setScale(0.7, 1);
this.setOrigin(0, 0.5);
}
}
¿Cómo puedo conseguir que el taco gire alrededor de la circunferencia de la bola blanca?
Una solución fácil / rápida es colocar el taco en un contenedor de phaser (con la distancia relativa deseada a la bola) y usar el contenedor como un "pivote" y simplemente girarlo, simplemente establezca la posición del contenedor en la coordenada x e y de el taco .
Aquí una demostración que muestra esta solución:
(Con un movimiento de empuje de taco extra dulce)
La demostración no usa sprites, pero la solución funciona de la misma manera con sprites e imágenes .
document.body.style = 'margin:0;';
var config = {
type: Phaser.AUTO,
width: 536,
height: 183,
scene: {
create
}
};
function create () {
let ball = this.add.circle(200, 90, 10, 0x6666ff);
let pivot = this.add.container(200, 90);
let cue = this.add.rectangle(10, 0, 200, 4, 0xffffff)
.setOrigin(0, .5);
pivot.add(cue);
// the following two tweens are only to showcase the example
this.tweens.add({
targets: pivot,
rotation: -Math.PI * 2,
duration: 3000,
repeat: -1
});
this.tweens.add({
targets: cue,
x:{
from: 10,
to: 80,
},
duration: 500,
repeat: -1,
yoyo: true
});
}
new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js">
</script>
O simplemente puede agregar un píxel transparente (con el desplazamiento deseado) a la imagen, PERO esto es muy limitante y solo es bueno si no necesita mover la señal de ninguna otra manera que rotarla.