How to make sprite rotate around a certain circumference in Phaser 3

Viewed 12

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);
}

demo

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?

0 Answers
Related