javascript - 移相器 3 : load spritesheet for animation with unequal dimensions

Question

我正在尝试使用 Phaser 3 框架。

为了加载 spritesheet 并创建其动画，我首先加载 spritesheet:

this.load.spritesheet('player', 'assets/spritesheets/player.png',{frameWidth:16,frameheight:16});

然后我创建动画如下:

this.anims.create({
    key:"player_anim",
    frames: this.anims.generateFrameNumbers("player"),
    frameRate:8,
    repeat:-1,
});

这工作正常，但如果我有不相等的尺寸，例如

this.load.spritesheet('1health', 'assets/spritesheets/1health.png',{frameWidth:96,frameheight:32});

this.anims.create({
    key:"1health_anim",
    frames: this.anims.generateFrameNumbers("1health"),
    frameRate:4,
    repeat:-1,
});

我收到以下错误:

SpriteSheet frame dimensions will result in zero frames for texture: 1health

generateFrameNumbers: Frame 0 missing from texture: 1health
generateFrameNumbers: Frame 0 missing from texture: 1health

如果我打印 console.log(this.anims.generateFrameNumbers("player"));

输出是:

[
    {
        "key": "player",
        "frame": 0
    },
    {
        "key": "player",
        "frame": 1
    },
    {
        "key": "player",
        "frame": 2
    },
    {
        "key": "player",
        "frame": 3
    }
]

但是对于不等尺寸的 Sprite ，我得到一个空数组。

在 Phaser's Documentation似乎可以为 spritesheet 使用不同的尺寸。

任何帮助或指示将不胜感激。

编辑 这是我尝试使用的图像

Answer 1

一切对我来说都很好，以下是我在场景中显示 Sprite 的方式:

在loading.js中:

this.load.spritesheet('6bQOE', 'img/6bQOE.png', {frameWidth: 96, frameHeight: 32});

游戏玩法:

let animConfig = {
    key: "gameAnim",
    frames: this.anims.generateFrameNumbers("6bQOE", { frames: [ 0,1,2 ] }),
    frameRate: 12,
    repeat: -1,
};
this.anims.create(animConfig);
this.gameAnimation = this.anims.create(config);

// display the sprite
this.anim = this.add.sprite(width/2 + 400, height/2+5, '6bQOE');
this.anim.anims.play("gameAnim");

但是你有两个完全相同的框架，所以我不明白你想做什么？在这些帧之间切换没有任何区别，总是有一颗红心和两颗黑心。

也许你不需要任何动画，你可以使用以下方法设置框架:

this.anim.setFrame(0); // 3 red hearts
this.anim.setFrame(1); // 2 red hearts