Phaser 3：旋转指定精灵后如何自动旋转后续所有精灵？

核心思路是用嵌套容器构建层级关系，让后续精灵成为目标精灵所在容器的子元素，父容器旋转时，所有子元素会自动继承旋转属性。

具体实现代码 #

// 创建基础精灵
const sprite1 = this.add.sprite(20, 40, 'diamonds');
const sprite2 = this.add.sprite(50, 40, 'diamonds');

// 构建嵌套容器结构
// 容器3：包含sprite3和后续的容器4
const container3 = this.add.container(80, 40);
const sprite3 = this.add.sprite(0, 0, 'diamonds');
container3.add(sprite3);

// 容器4：包含sprite4和后续的容器5（相对container3的位置）
const container4 = this.add.container(30, 0);
const sprite4 = this.add.sprite(0, 0, 'diamonds');
container4.add(sprite4);
container3.add(container4);

// 容器5：包含sprite5和sprite6（相对container4的位置）
const container5 = this.add.container(30, 0);
const sprite5 = this.add.sprite(0, 0, 'diamonds');
const sprite6 = this.add.sprite(30, 0, 'diamonds');
container5.add(sprite5);
container5.add(sprite6);
container4.add(container5);

// 添加旋转触发逻辑（以点击为例）
sprite3.setInteractive();
sprite3.on('pointerdown', () => {
    container3.angle += 90;
});

sprite5.setInteractive();
sprite5.on('pointerdown', () => {
    container5.angle += 90;
});

关键说明 #

• 每个目标精灵（sprite3、sprite5）对应一个容器，需要跟随旋转的后续元素作为该容器的子元素。
• 容器内元素的位置是相对容器原点的，设置x坐标为30可保持和原代码一致的水平间距。
• 旋转容器而非直接旋转精灵，容器内所有子元素会同步继承旋转属性，精准实现“后续元素跟随旋转”的需求。

内容的提问来源于stack exchange，提问作者Kamil