1
\$\begingroup\$

I’m trying to create a map array without using JSON because I want to dynamically generate the map:

const map = [
      [
        [-1, -1, -1, -1, -1, -1, -1, -1],
        [-1, -1, -1, -1, -1, -1, -1, -1],
        [-1, -1, -1, -1, -1, -1, -1, -1],
        [-1, -1, -1, -1, -1, -1, -1, -1],
        [-1, -1, -1, -1, -1, -1, -1, -1],
        [-1, -1, -1, -1, -1, -1, -1, -1],
        [-1, -1, -1, -1, -1, -1, -1, -1],
        [-1, -1, -1, -1, -1, -1, -1, -1]
      ],
      [
        [3, 3, 3, 3, 0, 3, 3, 3],
        [3, 3, 3, 3, 7, 3, 3, 3],
        [4, 5, 5, -1, -1, -1, 5, 6],
        [11, -1, -1, -1, -1, -1, -1, 13],
        [11, -1, -1, -1, -1, -1, -1, 13],
        [11, -1, -1, -1, -1, -1, -1, 13],
        [11, -1, -1, -1, -1, -1, -1, 13],
        [18, 19, 19, 19, 19, 19, 19, 20]
      ],
      [
        [15, 15, 15, 15, 15, 15, 15, 15],
        [15, 15, 15, 15, 15, 15, 15, 15],
        [15, 15, 15, 15, 15, 15, 15, 15],
        [15, 15, 15, 15, 15, 15, 15, 15],
        [15, 15, 15, 15, 15, 15, 15, 15],
        [15, 15, 15, 15, 15, 15, 15, 15],
        [15, 15, 15, 15, 15, 15, 15, 15],
        [15, 15, 15, 15, 15, 15, 15, 15]
      ]

    ]
    const map = this.make.tilemap({data: map, tileWidth: 32, tileHeight: 32});
    const tileset = map.addTilesetImage("spritesheet", "tiles");
    const layer = map.createStaticLayer(0, tileset, 0, 0);
    const layer1 = map.createStaticLayer(1, tileset, 0, 0);
    const layer2 = map.createStaticLayer(2, tileset, 0, 0);

But it does not work, I did take a look at the documentation:

https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.Tilemap.html

createStaticLayer(layerID, tileset [, x] [, y])

and “createStaticLayer” is asking for the layerID as I am passing, is it wrong the way I was creating the array for a 3 layers?

\$\endgroup\$
0
\$\begingroup\$

I just ran into this same issue, except I'm using dynamic layers instead of static layers. I was able to get it working by switching from the createDynamicLayer function to the createBlankDynamicLayer function.

I modified your code to reflect what worked for me, try it out:

const map = this.make.tilemap({ width: 8, height: 8, tileWidth: 32, tileHeight: 32 }),
    tileset = map.addTilesetImage("spritesheet", "tiles"),
    layer1 = map.createBlankDynamicLayer('layer1', tileset, 0, 0, 8, 8, 32, 32),
    layer2 = map.createBlankDynamicLayer('layer2', tileset, 0, 0, 8, 8, 32, 32),
    layer3 = map.createBlankDynamicLayer('layer3', tileset, 0, 0, 8, 8, 32, 32);

const layer1Data = [
        [-1, -1, -1, -1, -1, -1, -1, -1],
        [-1, -1, -1, -1, -1, -1, -1, -1],
        [-1, -1, -1, -1, -1, -1, -1, -1],
        [-1, -1, -1, -1, -1, -1, -1, -1],
        [-1, -1, -1, -1, -1, -1, -1, -1],
        [-1, -1, -1, -1, -1, -1, -1, -1],
        [-1, -1, -1, -1, -1, -1, -1, -1],
        [-1, -1, -1, -1, -1, -1, -1, -1]
    ],
    layer2Data = [
        [3, 3, 3, 3, 0, 3, 3, 3],
        [3, 3, 3, 3, 7, 3, 3, 3],
        [4, 5, 5, -1, -1, -1, 5, 6],
        [11, -1, -1, -1, -1, -1, -1, 13],
        [11, -1, -1, -1, -1, -1, -1, 13],
        [11, -1, -1, -1, -1, -1, -1, 13],
        [11, -1, -1, -1, -1, -1, -1, 13],
        [18, 19, 19, 19, 19, 19, 19, 20]
    ],
    layer3Data = [
        [15, 15, 15, 15, 15, 15, 15, 15],
        [15, 15, 15, 15, 15, 15, 15, 15],
        [15, 15, 15, 15, 15, 15, 15, 15],
        [15, 15, 15, 15, 15, 15, 15, 15],
        [15, 15, 15, 15, 15, 15, 15, 15],
        [15, 15, 15, 15, 15, 15, 15, 15],
        [15, 15, 15, 15, 15, 15, 15, 15],
        [15, 15, 15, 15, 15, 15, 15, 15]
    ];

layer1.putTilesAt(layer1Data, 0, 0);
layer2.putTilesAt(layer2Data, 0, 0);
layer3.putTilesAt(layer3Data, 0, 0);

Instead of an existing layerID or layer name from Tiled, the first parameter for createBlankDynamicLayer is a name to give your new layer.

According to the docs, the last 4 parameters should be optional in this case (width, height, tileWidth, tileHeight), but it didn't work for me unless I included them.

Unfortunately, I don't see an equivalent "createBlank" function for static layers in the docs, so you'd need to switch to dynamic layers to do it this way. I'm guessing that's because you can't change static layers (like I do with the putTilesAt function at the end of the code above), so a new blank one would forever stay blank. As far as I know the only difference between static and dynamic layers is that you can do more with dynamic layers at the expense of slower rendering speed. (Personally, I haven't noticed a difference in rendering speed between the two, so you might be fine switching to dynamic.)

\$\endgroup\$
-1
\$\begingroup\$

I am not sure it works like this https://jsfiddle.net/nazimboudeffa/y830g9u6/ (you have to notice that the layed ID is the Index of it in the array) but the correct way is doing it this way with one layer

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,    loader: {
      baseURL: 'https://raw.githubusercontent.com/nazimboudeffa/assets/master/',
      crossOrigin: 'anonymous'
    },
    scene: {
        preload: preload,
        create: create
    },
    physics: {
        default: 'arcade'
    }
};

var game = new Phaser.Game(config);
var m =
      [
        [0, 1, 2, 3, 4, 5, 6, 7, 8],
        [8, 8, 8, 8, 8, 8, 8, 8, 8],
        [0, 0, 0, 0, 0, 3, 3, 0, 0]
      ];

function preload ()
{
    this.load.image('tiles', 'maps/super-pixel-platformer-set/tileset.png');
}

function create ()
{
    this.map = this.make.tilemap({data: m, tileWidth: 16, tileHeight: 16});
    this.tileset = this.map.addTilesetImage("spritesheet", "tiles");
    this.layer = this.map.createStaticLayer(0, this.tileset, 0, 0);
    
}
<script src="//cdn.jsdelivr.net/npm/phaser@3.18.1/dist/phaser.min.js"></script>

\$\endgroup\$
  • 2
    \$\begingroup\$ The question is about multiple layers. Your example shows only one. \$\endgroup\$ – Alexandre Vaillancourt Jul 27 at 10:44
  • \$\begingroup\$ Thank you for the downvote btw :) \$\endgroup\$ – nazimboudeffa Jul 27 at 11:06
  • \$\begingroup\$ The title says so :) If the link you provide in the comment is the alternative with using multiple layers, then please edit the answer with it. \$\endgroup\$ – Alexandre Vaillancourt Jul 27 at 11:06
  • \$\begingroup\$ So, I can not make maps with multiple layers? I didn't quite understand what you meant by your answer. Sometimes I need more than one layer. You couldn't do it with just one. \$\endgroup\$ – PerduGames Jul 29 at 11:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.