如何使精灵在Phaser 3中围绕某个圆周旋转答案

【问题标题】：How to make sprite rotate around a certain circumference in Phaser 3如何使精灵在Phaser 3中围绕某个圆周旋转
【发布时间】：2022-09-27 12:17:27
【问题描述】：

我正在 Phaser 中重新制作 8ball pool 以获得乐趣，并且正在设置 cue/cueball 的瞄准。我目前在鼠标移动时让提示围绕主球的中心点旋转：

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

但是我希望球杆围绕整个母球旋转。我尝试将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);
        
    }
}

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

标签： javascript rotation game-development phaser-framework

【解决方案1】：

一个简单的和快速地解决方案是把提示变成phaser container（与球所需的相对距离）而不仅仅是围绕容器旋转容器母球，通过将容器位置设置为 x 和 y 的坐标母球.可以这么说，使用容器作为支点。

这是一个演示这个的演示：
（带有一些额外的甜蜜提示动作）

该演示不使用精灵，但它的解决方案与精灵和图像

document.body.style = 'margin:0;';

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: {
        create
    },
    banner: false
}; 

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>

或者也许更快，您可以简单地向图像添加一些透明像素（所需的偏移量），但这是非常有限的，只有在您不需要移动提示以任何其他方式旋转它。

【讨论】：