Struggling with JSON TiledMap for Project

Phaser 3
1

Hello, I’m a beginner at Phaser, and I’m using it for a student project for a basic platformer. I used Tiled to create and import a JSON and png tile map following a tutorial on Youtube, but something about my map seems very off, and nothing I do seems to fix it.

All the file paths seem correct — if I load just the tile map png as an image, it loads perfectly fine. But if I load everything, all I see is the background color.

I experimented by filling everything with a random tile in the foreground layer, and interestingly enough, that random tile fills the spaces of my tile map. That seems to suggest that the JSON is somehow working but the png is not aligning maybe? I’m not positive. It also seems like maybe the camera is way too zoomed in, but experimenting with it also hasn’t helped so far. Does anyone have any suggestions?

let config = {
    type: Phaser.AUTO,
    width: 1408,
    height: 896,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

let game = new Phaser.Game(config);

function preload() {
    this.load.image('base_tiles', 'assets/base_tiles.png');
    this.load.tilemapTiledJSON('tilemap', 'assets/tile_map.json');
}

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

    // add the tileset image we are using
    const tileset = map.addTilesetImage('gametiles', 'base_tiles');

    // create the layers we want in the right order
    map.createLayer('background', tileset);
    map.createLayer('platform', tileset);
   

   
    this.cameras.main.scrollY = 500;
}

function update() {
    // Update logic goes here if needed
}
2

:wave:

Open the browser dev tools console and look for errors.

Change this to

this.cameras.main.zoom = 0.1;

and see if anything appears.