JSON Map Swapping/Handling

Phaser 3
1

my friends and I are working on a game project for a class and we need to change some hard coded levels one of my teammate implemented with JSON file levels made in tiled.

(I’ve included screenshots of most of the scripts for better understanding of the Layout)

Screen Shot 2020-04-19 at 6.32.18 AM
Screen Shot 2020-04-19 at 6.32.18 AM2758×2040 361 KB

didn’t include boot_scene its basically a “Loading” scene that comes before the game starts***

Screen Shot 2020-04-19 at 6.32.51 AM
Screen Shot 2020-04-19 at 6.32.51 AM2766×2036 511 KB

now this is how he implemented the levels

Screen Shot 2020-04-19 at 6.33.44 AM
Screen Shot 2020-04-19 at 6.33.44 AM2764×2034 675 KB

Screen Shot 2020-04-19 at 6.34.05 AM
Screen Shot 2020-04-19 at 6.34.05 AM2766×2042 731 KB

I’ve recreated them in Tiled and exported them as JSON file. then my methodology was to basically comment our or cut out his implementations and import my JSON file. however, i keep on running into issues/Errors sometimes as soon as i preload my JSON file( i understand that it wont work till i fully implement it but the background crashes as well without me messing with it). i checked the console and get a “this.game.load is undefined”(this isn’t the only way i tried i still got errors :() . I’ve looked at all tutorials out there but they cant seem to solve my issue. I’m new to phaser and would love some help or any direction on how i should go about doing this. let me know if more info is needed.

Thank you in Advance!

2

Hi,
This is how i load levels with tiled:

preload() {
    // map
    this.load.image('tiles', tiles); // this is the tileset image used in Tiled, you must embbed this image when creating a new map in Tiled and load it in phaser too
    this.load.tilemapTiledJSON('map1', map1); // this is the json exported from Tiled, use Base64 uncompressed
}

create() {
    this.map = this.make.tilemap(this, { key: 'map1', tileWidth: 16, tileHeight: 16 });
    this.tileset = this.map.addTilesetImage('tileground', 'tiles', 16, 16); // tileground is the name of the tileset in Tiled(at the bottom right --> tilesets my tab name is tileground)
    this.groundLayer = this.map.createDynamicLayer('collideGround', this.tileset, 0, 0); // collideGround is the name of the layer used in Tiled

    this.cameras.main.setBounds(0, 0, this.map.widthInPixels, this.map.heightInPixels); // this line tell the camera to stop at map bounds
}

Hope this helps

3

I don’t see this.game.load in the screenshots you posted; are you using that somewhere? this.game.load would not exist.

4

hey thanks for your response. i’m about to try your input and see. will let you know soon.

5

Hey thanks for the response!

i posted the exact master code in order not to confuse people and make it easier to give directions. but now that i think about it you may be right. so I’m going to try loading it and post the implementation alongside the output.

6

hey so can you elaborate more on what you mean by “use Base64 uncompressed” ?

7

In Tiled when you create a new map, you have a option for this, but i think it’s the default, not sure

8

just looked at it and you were right there is an option and it wasn’t default for me will try it out! in the mean time i had another question… so the canvas size were working with in phaser is (800x600 pixels) but i can’t get my map size in tiled to be exactly that (800x608pixels) is closest i can get to (25 by 19tiles, since i’m using tilesize of 32px by 32px ). do you think that raises an issue ?

again thank you for ur assistance! (we have 4 days left to figure things out and submit don’t mean to be annoying)

9

No, the tilemap size can be way greater than the canvas, that’s the main purpose of using a tilemap