时间戳

首页 > 解决方案 > 对 Phaser 3 物质体使用多个动画

phaser-framework - 对 Phaser 3 物质体使用多个动画

问题描述

我怎样才能给 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
        },
        ...

在 atlas.json 中可以找到引用的文件“human1.png”等：

    "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')？

标签： phaser-framework

解决方案

调整动画格式，我让它像这样工作：

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

推荐阅读