Phaser 3：为尺寸不等的动画加载精灵表

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
    }
]

但是对于不等维度的精灵，我得到一个空数组。

在Phaser's Documentation 中，似乎可以为精灵表使用不同的尺寸。

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

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

Answer 1

我认为您的精灵表 1health.png 有问题 你检查过它的大小吗？

在这一行尝试不同的维度： this.load.spritesheet('1health', 'assets/spritesheets/1health.png',{frameWidth:94,frameheight:30});

看看它是否工作没有任何错误？ 也许图像 1healt 的尺寸不正确。

如果你给我一个链接，我可以在 Phaser 中检查你的图片吗？

编辑

对我来说一切都很好，这是我在场景中显示精灵的方式：

在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 hearths
this.anim.setFrame(1); // 2 red hearths