将无物理精灵添加/父级到matterjs顶点体，以便它与身体一起移动。 PhaserJS 使用 MatterJS

Question

const poly1 = this.add.polygon(200, 200, Ployploy, 0x0000ff, 0.2);
ThisPlayer = this.matter.add.gameObject(poly1, { shape: { type: 'fromVerts', verts: Ployploy, flagInternal: true } });

//add this sprite to a container with the above object...Atleast thats what Im hoping to do.
ThisPlayer.testSprite = this.add.sprite(200,200, '');

我这里有一段代码，给定顶点列表将从它们创建一个物理体。之后我想做的就是向该身体添加一个精灵。在我的完整代码中，我有一个二维数组，它定义了不同的精灵应该放置在顶点体上的位置。遗憾的是我没能找到一个可以粘在上面的东西。我可以使用图块地图/精灵创建一个单独的容器，并在更新循环中不断更新其位置，但我觉得必须有某种方法将它们直接粘贴到物理对象上。我附上了一张图像，显示尽管物理体已移动，但精灵仍保持静态。

我在网上查找了上面描述的示例，但似乎找不到任何与我相同的情况。我假设因为它晦涩难懂的 chatGPT 也无法解决问题，并且产生了使用 ThisPlayer.add(sprite) 或 ThisPlayer+= Sprite 的幻觉。上面提到的我有一些其他的解决方案，我知道它们会起作用，但看起来很卡顿，如果可能的话，我想把事情做好。

Answer 1

我不确定您到底在寻找什么，但如果我不得不猜测您正在寻找类似的东西（请参阅下面的运行演示）。代码中的一些注释解释了它的作用。

但基本上你创建了一个精灵，并添加一个 physicalbody 和

 this.matter.add.gameObject(sprite, { shape: { type: 'fromVerts', verts: somePolygon, flagInternal: true } });

，在其中添加顶点作为参数，以获得所需的形状。

小型工作演示：

    document.body.style = 'margin:0;';
    var config = {
        width: 536,
        height: 183,
        physics: {
            default: 'matter',
            matter: {
                debug: {
                    renderFill: false,
                    showInternalEdges: true,
                    showConvexHulls: true
                }
            }
        },
        scene: {
            preload,
            create
        },
    };

    function preload() {
        // from an official demo
        this.load.spritesheet('brawler', 'https://labs.phaser.io/assets/animations/brawler48x48.png', { frameWidth: 48, frameHeight: 48 });
    }

    function create() {
        this.add.text(10, 10, 'Matter Demo')
            .setScale(1.5)
            .setOrigin(0)
            .setStyle({ fontStyle: 'bold', fontFamily: 'Arial' });

        this.matter.world.setBounds().disableGravity();

        // Animation to make it nicer
        this.anims.create({
            key: 'kick',
            frames: this.anims.generateFrameNumbers('brawler', { frames: [10, 11, 12, 13, 10] }),
            frameRate: 8,
            repeat: -1,
            repeatDelay: 2000
        });


        const somePolygon = '100 50 75 50 100 80 25 100 5 50 25 0';

        // Create sprite
        const sprite = this.add.sprite(80, 80, 'brawler').setScale(2).play('kick');

        // create matter object
        this.matter.add.gameObject(sprite, { shape: { type: 'fromVerts', verts: somePolygon, flagInternal: true } });

        sprite.setVelocity(1, 1);
        sprite.setAngularVelocity(0.01);
        sprite.setBounce(1);
        sprite.setFriction(0, 0, 0);
    }

    new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>

基本上像本例中的一样组合

Tipp： 如果您遵循SO 如何提问指南，您的问题不必那么冗长，并且可能会得到更快更好的答案。如果您提供有效的 MRE，就可以防止误解。