Phaser 3 load many images

Phaser 3
1

Hi,

I’m trying to load about 50 images and spritesheets in preload().

Everything is fine when there is about 20 images and spritesheets, but above that number the sprites are not loading.

What can be the issue? Does it matter if I load first images and the spritesheets?

Here is some of the code:

    preload() {
      this.load.tilemapTiledJSON('battles', 'assets/battles/hexagonMap3.json');
      this.load.image('tiles', 'assets/battles/BattleMap3.png');

      this.load.image('archer', 'assets/battles/archer.png');
      this.load.spritesheet('archerWalk', 'assets/battles/walk/archerWalk.png', { frameWidth: 41, frameHeight: 60 });
      this.load.spritesheet('archerDefence', 'assets/battles/defence/archerDefence.png', { frameWidth: 31, frameHeight: 65 });
      this.load.spritesheet('archerShoot', 'assets/battles/shoot/archerShoot.png', { frameWidth: 45, frameHeight: 80 });
      this.load.image('axemen', 'assets/battles/axemen.png');
      this.load.spritesheet('axemenWalk', 'assets/battles/walk/axemenWalk.png', { frameWidth: 41, frameHeight: 60 });
      this.load.spritesheet('axemenDefence', 'assets/battles/defence/axemenDefence.png', { frameWidth: 41, frameHeight: 60 });
      this.load.spritesheet('axemenAttack', 'assets/battles/attack/axemenAttack.png', { frameWidth: 41, frameHeight: 60 });
      this.load.image('ballista', 'assets/battles/ballista.png');
}
2

Look in the Network pane of your browser’s developer tools.

3

If you do have too many things to load, you could combine spritesheets into one, which then you would only be loading one spritesheet per object.
Heres an example:
image

If you really wanna get performant, you could have an atlas of everything which then you would only load 1 image ever. However that would require a lot more work to implement.

Also I would look at how big the images your trying to load are, because bigger image will be longer to load.

4

Thanks. I used atlas load and include some timeout before using loaded images.

  this.load.atlas('axemen', 'assets/battles/axemenAnims.png', 'assets/battles/axemenAnims.json');
  this.load.atlas('archer', 'assets/battles/archerAnims.png', 'assets/battles/archerAnims.json');
  this.load.atlas('ballista', 'assets/battles/ballistaAnims.png', 'assets/battles/ballistaAnims.json');
  this.load.atlas('balloons', 'assets/battles/balloonsAnims.png', 'assets/battles/balloonsAnims.json');

Looks like it’s working now.

1 Like