Animating from sprite sheet -

Hello,

I’m now learning about Phaser’s use of sprite sheets (and not atlases). Following a Phaser3 + Tiled tutorial led me to use the following free asset: dungeon tileset.

I understand the difference between sheets and atlases and I’m ok creating animations out of both approaches. But that free tileset raised a series of questions: If it’s been created this way, then there must be a way of using it that I don’t know…

Considering that:

  • This sheet contains tiles of mixed sizes (ground tiles, small enemies, props: 16x16; large enemies: 32x32 and more)
  • See below, sometimes, a creature frame height vary: 16x16, 16x32, 16x16, … (I suppose we must consider the biggest frame when parsing that one).

What is the best “Phaser way” to handle these multiple frame sizes within a single image?

My first guess would be:

  • load the image
    this.load.image("tiles", "assets/tiles/dungeon-extruded.png");

  • create my TileMap based level:
    const map = this.make.tilemap({ key: "dungeon" });
    const tileset = map.addTilesetImage("dungeon", "tiles", 16, 16, 1, 2);
    map.createStaticLayer("Ground", tileset);

  • create the 16x16 monsters based on similar / the same TileMap instance

  • create other TileMap instances to extract the 16x32, the 32x32, 32x48, etc.

However this makes me think I’d be creating a lot of TileMap instances, especially if I need to add some generic helper code to allow dynamic level creation / restoring from save.

I’ve seen suggested approaches to pack several smaller sprite sheets into a sprite atlas, segregating either by constant sprite size or “by monster”. This to create smaller tilemaps in memory and more in context of the resulting game entity.

My past experiences were based on sprite atlases alone with the need to keep track of each sprite frame name. I don’t want to apply the poor reasoning that’d suggest “it worked with another tech / architecture, so let’s wrap Phaser around that approach”.

Please share your experience / opinion on this Phaser matter :slight_smile:

Screenshot 2020-06-11 at 13.16.26