Phaser 3：为不等尺寸的动画加载 spritesheet

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 中，似乎可以为 spritesheet 使用不同的尺寸。

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

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

Answer 1

我认为你的 sprite 有问题 sheet 1health.png 你检查过它的尺寸了吗？

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

看看它是否正常运行？也许图片 1healt 的尺寸不正确。

如果你给我一个 link，我可以在 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

Phaser 3：为不等尺寸的动画加载 spritesheet

Phaser 3: load spritesheet for animation with unequal dimensions

javascript

sprite

phaser-framework

sprite-sheet