Unable to pass array of tilesets to .createDynamicLayer not .createStaticLayer

My tiles load properly, layerOne will render the corresponding tile images but layerTwo does not. Notice that in layerTwo I passed in an array with all the tilesets, I got different error messages depending on how I pass in an array of tilesets (heroMap.tilesets doesn’t display console errors but won’t render the tile images either)
My interpretation of the documentation is that an array of tilesets is allowed, am I reading that wrong? Is there any way I can pass in multiple tilesets for different layers or is this bad practice anyway?
https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.Tilemap.html

My git repo: https://github.com/malinda-lin/Hero

  heroMap = this.add.tilemap('heroMap');
  overWorldTiles = heroMap.addTilesetImage('Overworld', 'overWorld');
  hyptosisTiles = heroMap.addTilesetImage('terrainother', 'hyptosis');
  grassTiles = heroMap.addTilesetImage('grass', 'grass');
  treeTiles = heroMap.addTilesetImage('terrain', 'tree');
  allTiles = [overWorldTiles, hyptosisTiles, grassTiles, treeTiles];
  layerOne = heroMap
    .createStaticLayer('groundLevel', overWorldTiles)
    .setDepth(-2);
  layerTwo = heroMap
    .createStaticLayer('upperLevel', allTiles)
    .setDepth(-1);

That looks right, but what were the errors?

git repo: https://github.com/malinda-lin/Hero

error when passing in “allTiles” or “heroMap.tilesets”:
phaser.js:74771 Uncaught TypeError: Cannot read property ‘source’ of undefined
at StaticTilemapLayer.upload (phaser.js:74771)
at StaticTilemapLayerWebGLRenderer [as renderWebGL] (phaser.js:122959)
at WebGLRenderer.render (phaser.js:65133)
at CameraManager.render (phaser.js:114533)
at Systems.render (phaser.js:27184)
at SceneManager.render (phaser.js:46818)
at Game.step (phaser.js:109346)
at TimeStep.step (phaser.js:106091)
at step (phaser.js:66488)

error when passing in “…allTiles”:
Uncaught TypeError: Cannot read property ‘tileWidth’ of undefined
at Tilemap.createStaticLayer (phaser.js:77513)
at Scene.create (index.js:63)
at SceneManager.create (phaser.js:46843)
at SceneManager.loadComplete (phaser.js:46737)
at LoaderPlugin.emit (phaser.js:2011)
at LoaderPlugin.loadComplete (phaser.js:89330)
at LoaderPlugin.fileProcessComplete (phaser.js:89289)
at ImageFile.onProcessComplete (phaser.js:4068)
at Image.data.onload (phaser.js:7389)

Switch to Phaser v3.22.0.

If you use allTiles, you have to create it after all the tilesets, otherwise it will be [ undefined, undefined, … ].

I reinstalled : npm install phaser@3.22.0
I moved allTiles to under the last tile created
(I was using heroMap.tilesets which is an array of all the tilesets so it didn’t matter if allTiles was [undefined,…] )

Still getting the error : Uncaught TypeError: Cannot read property ‘source’ of undefined

in phaser.js the error occurs at line 74771 var width = tileset.image.source[0].width;

It seems to me that this method isn’t able to take an array of tilesets

Check Phaser version in console. It worked for me with allTiles.

What do you mean when you say it worked? Phaser version is correct but not sure why it says v3.11 in the browser.
Thank you so much for helping me btw.

In index.html use

<script src="./node_modules/phaser/dist/phaser.js"></script>
2 Likes

Thank you so much! That did it.

1 Like