Map not loading

Phaser 3
1

Having issues with the map not loading in. Can’t see anything in the code that’s stopping it from doing so but haven’t worked with the maps before. The code from the scene is below and console.log(this.ground) is console logging fine and zero errors in the console. Help really appreciated, you’ll probably see I’m very early learning stage from the code :smiley:

class Level1 extends Phaser.Scene {

    constructor() {

        super({key: "Level1" });

  }

    preload () {

               

        this.load.aseprite('alco', '../assets/animations/StrongAlc.png', '../assets/animations/StrongAlc.json');

        this.load.aseprite('chef', '../assets/animations/alcochef.png', '../assets/animations/alcochef.json');

        this.load.image('base_tiles', '../assets//maps/level1.png');

        this.load.tilemapTiledJSON('tilemap', '../assets/maps/level1.json');

       

    }

    create () {

        const map = this.make.tilemap({ key: 'tilemap' })

        const tileset = map.addTilesetImage('tileset2', 'base_tiles')

        this.ground = map.createLayer('groundlayer', tileset, 0, 0)

        this.width = 800;

        this.height = 640;

        let playerPoints = 0;

        this.keyF = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.F);

        this.keyW = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.W);

        this.keyD = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D);

        this.keyA = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A);

        this.anims.createFromAseprite('chef', [ 'idleburp', 'standingattack', 'jump', 'run' ]);

        this.anims.createFromAseprite('alco');

        this.alco = this.physics.add.sprite(this.width/2, (this.height /2) -50, 'alco');

        this.chef = this.physics.add.sprite(this.width/50, this.height/2.5, 'chef');

        this.chef.body.setCollideWorldBounds(true)

        this.physics.add.collider(this.chef, this.ground)

        this.chef.sideFacing = 'right'

        this.chef.moving = false;

        function colliderAlco(sprite) {

            playerPoints ++

            console.log(playerPoints)

            // destroySprite(sprite)

        }

        this.physics.add.collider(this.chef, this.alco, colliderAlco(this.alco))

        this.alco.play({key: 'rotatinglabel', repeat: -1})

        // var frameNames = this.textures.get('chef').getFrameNames();      

        this.chef.play({key: 'idleburp', repeat: -1, ignoreIfPlaying: false})

     

    }

    update() {

        if(this.keyF.isDown) {

            this.chef.play({key: 'standingattack', repeat: 0, ignoreIfPlaying: false})

            this.chef.moving = true

        }

        if(this.keyD.isDown) {

            this.chef.play({key: 'run', repeat: -1, ignoreIfPlaying: false})

            this.chef.moving = true

            this.chef.body.setVelocityX(100);

            this.chef.flipX = false

            if(this.chef.facing === 'left') {

                return this.chef.facing === 'right'

            }

        }

        if(this.keyW.isDown) {

            this.chef.play({key: 'jump', repeat: 0, ignoreIfPlaying: false})

            this.chef.moving = true

        }

        if(this.keyA.isDown) {

            this.chef.play({key: 'jump', repeat: 0, ignoreIfPlaying: false})

            this.chef.moving = true

            this.chef.body.setVelocityX(-100);

            this.chef.flipX = true

            if(this.chef.facing === 'right') {

                return this.chef.facing === 'left'

            }

        }

       

    }

}

function destroySprite(sprite) {

    sprite.destroy();

}

export default Level1;
2

:wave:

Try

this.cameras.main.setZoom(0.5);

and see if anything appears.

3

Exactly the same unfortunately, the camera is just moved further out kinda resetting the zoom

4

Can you screenshot?

There’s also

this.cameras.main.setZoom(0.1);
5

Unfortunately it’s neither of these. The map just isn’t pulling through for some reason

The only thing in the console is about an animation I’m currently working on which I have fixed a couple of times and still had this issue so i

screenshot-mapissue2
screenshot-mapissue23440×1440 451 KB

screenshot-mapissue
screenshot-mapissue3440×1440 435 KB

6

Bump, still can’t find a solution :frowning:

7

Hi,
Look this tutorial, it is a bit outdated (createStaticLayer must be changed to createLayer) but some usefull information are gaven, like name of layers, tileset’s names, embedded tileset, Base64(uncompressed)…

8

Think you missed the tutorial out mate. I did originally have it as CSV rather than Base64 but changed that and nothing has happened still.

I think everything else I have done as per a couple of tutorials I found, all used createStaticLayer, didn’t managed to find one with the newest syntax but don’t think that could be the issue.

9

Is your project on github?

10

Yes, the link is here

11

This looks wrong (probably 2nd arg should be tileset):

const layer = map.createLayer('ground', 'map');

Although I expect you would get a console warning.

Add

layer.renderDebug(this.add.graphics());
12

It isn’t the ground, map arguments, tried that and got the console error saying mismatch basically.

The renderDebug caused the black to turn blue/grey and I tried the camera zoom again and the blue/grey just got smaller

renderdebug
renderdebug3440×1440 359 KB

13

OK remove that.

Try the method in Print tilemap to console and look at the output.

Add

this.add.image(0, 0, 'tiles').setOrigin(0, 0);

and see if those appear.

There’s a double slash in assets//maps/newest.png, that may be a mistake.

14

Just in case, here’s a working version, i needed to install parcel locally, and import each assets on top of file

15

The console.log(map.layer) seems to be pulling fine as an array.
Also the image is loading fine, so I thought it must be the JSON file.

map pulling
map pulling3440×1440 433 KB

16

My apologies, I noticed when I switched to my laptop I hadn’t packaged the parcel dependancies but thought I fixed it. Not sure why the assets were ignored though

17

Compare your current work with my repo, i created a new tilemap from scratch too.

18

Did you manage to get it working? I’ve been working on new assets today before I tried importing the map for the 3rd unsuccessful time

19

Yes, it works
Working with tilemaps is a bit tricky at first, we must take care with what we do in tiled, but it works. All my games uses tilemaps

1 Like
20

Ill give that a go then thank you