为 Phaser 3 物质体使用多个动画

Question

如何为 Phaser 3 物质体添加动画？理想情况下我想在几个动画之间切换。

到目前为止我只设法给它一个静态图像：

function preload ()
{
    this.load.image('human', 'assets/sprites/x2kship.png');
}

function create ()
{
    human = this.matter.add.sprite(300, 400, 'human');
}

我确实准备了一个旧项目的文件：atlas.png、atlas.json、animations.json。并且加载成功：

this.load.atlas('sheet', 'data/atlas.png', 'data/atlas.json');

来自 animations.json 的示例：

{
    "animations": [
        {
            "name": "human-walk",
            "frames": [
                "human1.png",
                "human2.png",
                "human3.png",
                "human4.png"
            ],
            "frameRate": 100
        },
        ...

参考文件 "human1.png" 等位于 atlas.json:

    "human1.png": {
        "frame": { "x": 1137,"y": 1030, "w": 182, "h": 195 },
        "rotated": false,
        "trimmed": false,
        "spriteSourceSize": { "x": 0,"y": 0, "w": 182, "h": 195 },
        "sourceSize": { "w": 182, "h": 195 },
        "pivot": { "x": 0.5, "y": 0.5 }
    },

我如何将这些部分拼接在一起，让人类做出类似 human.animations.play('human-walk') 的事情？然后也许 human.animations.play('human-stand-still')?

Answer 1

Tweeking 动画格式我让它像这样工作：

function preload ()
{
    this.load.image('human', 'assets/sprites/x2kship.png');    
    this.load.atlas('sheet', 'data/atlas.png', 'data/atlas.json');
}

function create ()
{
    var humanWalk = {
        key: 'human-walk',    
        frames: [
            {key: "sheet", frame: "human1.png"},
            {key: "sheet", frame: "human2.png"},
            {key: "sheet", frame: "human3.png"},
            {key: "sheet", frame: "human4.png"},
        ],
        frameRate: 6,

        repeat: -1
    };

    this.anims.create(humanWalk);

    human = this.matter.add.sprite(100, 100, 'human');
    human.anims.load('human-walk');
    human.anims.play('human-walk');
}

为 Phaser 3 物质体使用多个动画

Using multiple animations for phaser 3 matter body

phaser-framework