如何在Phaser3中使精灵围绕某个圆周旋转

Question

为了好玩，我正在Phaser中重新制作8球池，并且正在设置球杆/球杆的瞄准。我目前在鼠标移动时有一个围绕提示球中心点旋转的提示：

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

演示

然而，我希望球杆围绕整个母球旋转。我已经尝试将this.cue提供给Phaser.Actions.RotateAround()/Phaser.Actions.RotateAroundDistance()，但无法使它们工作。看看Phaser 2，他们有一个你可以设置的枢轴，但除了setOrigin()之外，我没有看到任何类似的东西，我已经用它来绕尖端旋转球杆。

提示类别：

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

}
}

我怎样才能让球杆绕着球杆的圆周旋转？

Answer 1

一个简单的解决方案是，将球杆放入相位器容器(与球的相对距离为所需距离(中，并将该容器用作"；枢轴并旋转它。您必须将容器位置设置为提示球的x和y坐标。

这里的演示展示了上述解决方案：
(带有一些额外的"甜蜜"提示动作(

演示不使用精灵，但它的解决方案与精灵和图像的工作方式相同

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>

或者你可以简单地在图像中添加一些透明像素(具有所需的偏移量(，但这是非常有限的，只有当你不需要以任何其他方式移动提示然后旋转它时才好。