Im trying to work with the phaser 3 framework.
In order to load a spritesheet and create its animation I first load the spritesheet:
this.load.spritesheet('player', 'assets/spritesheets/player.png',{frameWidth:16,frameheight:16});
then I create the animation as follows:
this.anims.create({
key:"player_anim",
frames: this.anims.generateFrameNumbers("player"),
frameRate:8,
repeat:-1,
});
This works fine but if I have unequal dimensions such as
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,
});
I receive the following error:
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
if i print console.log(this.anims.generateFrameNumbers("player"));
the output is:
[
{
"key": "player",
"frame": 0
},
{
"key": "player",
"frame": 1
},
{
"key": "player",
"frame": 2
},
{
"key": "player",
"frame": 3
}
]
however for the unequal dimension sprite I get an empty array.
In Phaser's Documentation it seems to be okay to use different dimensions for a spritesheet.
Any help or pointers would be much appreciated.
Edit Here are thee images I tried using
Everything works fine for me, here is how I display a sprite in a scene:
In loading.js
:
this.load.spritesheet('6bQOE', 'img/6bQOE.png', {frameWidth: 96, frameHeight: 32});
Gameplay:
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");
But you have two exactly same frames, so I don't understand what you are trying to do? Switching between those frames does not make any difference, there is always one red and two black hearts.
Maybe you don't need any animation, you can set frame using:
this.anim.setFrame(0); // 3 red hearts
this.anim.setFrame(1); // 2 red hearts