I'm remaking 8ball pool in Phaser for fun and am in the process of setting up the aiming of the cue/cueball. I currently have the cue rotating around the center point of the cueball on mouse movement:
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);
}
However I want the cue to rotate around the whole cue ball. I've tried supplying this.cue to Phaser.Actions.RotateAround()/Phaser.Actions.RotateAroundDistance() but couldn't get them to work. Looking at Phaser 2, they had a pivot you could set but I'm not seeing anything similar other than setOrigin(), which I have already used to have the cue spin around the tip.
Cue class:
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);
}
}
How can I get it so the cue rotates around the circumference of the cueball?