Tiled Tilemap Partially Invisible, But No Console Errors

Phaser 3
1

So, very much a newbie here, working on a sample game to get familiar with the basics of Phaser. I’m trying to add a second scene to my sample game. To get started, I’m just trying to get the second scene set up before I try to connect the two.

The problem is, the tileset loads in the browser as mostly invisible. Only a little bit at the left edge shows up. I know the rest of it is there because I tried adding in my player sprite and animations, and the sprite navigates properly around the map and is clearly colliding with the (invisible) platforms in the correct places. In the attached screencap, you can see the sprite standing on an invisible platform. The tilemap is there, it’s just not fully visible. I tried running the game with the player sprite included, and I tried it with only the layers included.

The plot twist is, I’m not getting any console errors. The two warnings in this screencap were there when I ran the first scene and they didn’t seem to be interfering at all. I tried it in Chrome and Firefox, same result. Here’s a screenshot of the problem, followed by my code. What’s going wrong here?

EDIT: I replaced the original screencap with one showing debug graphics, demonstrating that the tilemap is present but invisible.

wheresmytilemap
wheresmytilemap.png1366×668 60.2 KB

Config:

import stage1 from '/assets/scenes/stage1.js';
import stage2 from '/assets/scenes/stage2.js';

var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 480,
	backgroundColor: '#007396',
	scale: {
		scale: 'SHOW_ALL',
		orientation: 'LANDSCAPE'
	},
	resolution: window.devicePixelRatio,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 500 },
			debug: true
        }
    },
	parent: 'gamewindow',
	scene: [stage2]
};


var game = new Phaser.Game(config);

//////////////////////////////
Scene 1:

export default class stage1 extends Phaser.Scene {
	constructor() {
		super({
			key: 'stage1'
		});
	}
	
	preload() {
		this.load.spritesheet('dude', '../assets/dude.png', 
			{
				frameWidth: 32,
				frameHeight: 48
			});
		this.load.image('star', '../assets/star.png');
		this.load.image('tileset', '../assets/area01_level_tiles.png');
		this.load.tilemapTiledJSON('map', '../area01.json');
	}
	
	create() {
		//establish scoreboard
		this.scoreText = this.add.text(16, 16, 'Score: ', {
			fontFamily: 'Rationale',
			fontSize: '50px',
			fill: '#fff'
		});
		this.scoreText.setText('Score: ' + 0);
		this.score = 0;
		
		//establish total score
		this.totalScoreText = this.add.text(16, 60, 'Your Total Score: ', {
			fontFamily: 'Rationale',
			fontSize: '30px',
			fill: '#fff'
		});
		//set users total score from database
		//this.totalScoreText.setText();
		//this.totalScore = 0;
		
		const map = this.make.tilemap({
			key: 'map', //from load
			tileWidth: 32,
			tileHeight: 32						  
		});
		
		//establish level tileset
		const tileset = map.addTilesetImage('area01_level_tiles', 'tileset');
		
		//establish layers
		const backgroundLayer = map.createStaticLayer('background (go in front of)', tileset, 0, 0);
		const foregroundLayer = map.createStaticLayer('foreground (walk on)', tileset, 0, 0);
		
	
		foregroundLayer.setCollisionByExclusion(-1, true);
		
		const emptyTiles = foregroundLayer.filterTiles(function (tile) {
		  return tile.index === -1;
		});
		
		this.stars = this.physics.add.group({
			key: 'star',
			repeat: 14,
			allowGravity: false
  			//immovable: true
		});
		
		this.stars.children.iterate(function(child){
			for(var i=0; i<14; i++){
				var randomTile = Phaser.Utils.Array.GetRandom(emptyTiles);
				child.setPosition(randomTile.pixelX, randomTile.pixelY);
				child.setOrigin(0,0);
			}
		});
		
		
		//add player
		this.dude = this.physics.add.sprite(20, 0, 'dude', 4); //the 4 tells phaser to start from the 4th frame
		this.dude.setBounce(0.2);
		
		//put the front layer declaration after adding player sprite so sprite renders between this and platform layer
		const frontLayer = map.createStaticLayer('front (go behind)', tileset, 0, 0);
		
		//add endzone
		this.endZone = this.add.zone(1250, 50, 50, 90);
		this.physics.world.enable(this.endZone);
		this.endZone.body.setAllowGravity(false);
		
		
		//add player-platform collisions
		this.dude.setCollideWorldBounds(true);
		this.physics.add.collider(this.dude, foregroundLayer);
		//set world bounds to follow camera bounds
		this.physics.world.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
		
		//add player-endzone overlap
		this.physics.add.overlap(this.dude, this.endZone, this.onGoal, false, this);
		
		//add collision with stars
		this.physics.add.overlap(this.dude, this.stars, this.getStar, null, this);
		
		//establish camera
		this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
		//establish camera follow
		this.cameras.main.startFollow(this.dude);
		
		//establish anim
		this.anims.create({
			key: 'left',
			frames: this.anims.generateFrameNumbers('dude', {start: 0, end: 3}),
			frameRate: 10,
			repeat: -1
		});
		
		this.anims.create({
			key: 'turn',
			frames: [{key: 'dude', frame: 4}],
			frameRate: 20
		});
		
		this.anims.create({
			key: 'right',
			frames: this.anims.generateFrameNumbers('dude', {start: 5, end: 8}),
			frameRate: 10,
			repeat: -1
		});
		
		//adding cursor keys
		this.cursors = this.input.keyboard.createCursorKeys();
		
	}
	
	update(time, delta) {
		this.runBoyRun();
	}
	
	runBoyRun() {
		if (this.cursors.left.isDown) {
			this.dude.setVelocityX(-160);
			this.dude.anims.play('left', true);
		} else if (this.cursors.right.isDown) {
			this.dude.setVelocityX(160);
			this.dude.anims.play('right', true);
		} else {
			this.dude.setVelocityX(0);
    		this.dude.anims.play('turn');
		}
		
		if (this.cursors.up.isDown && Phaser.Input.Keyboard.JustDown(this.cursors.up)) {
			this.dude.setVelocityY(-330);
		}
		
	}
	
	
	onGoal(dude, endZone){
		console.log("you got em!");
	}
	
	getStar(dude, star) {
		star.disableBody(true, true);
		this.score += 1;
		//console.log(this);
		this.scoreText.setText('Score: ' + this.score);		
	}
}

///////////////////////

Scene 2:

export default class stage2 extends Phaser.Scene {
	constructor() {
		super({
			key: 'stage2'
		});
	}
	
	preload() {
		this.load.spritesheet('dude', '../assets/dude.png', 
			{
				frameWidth: 32,
				frameHeight: 48
			});
		this.load.image('star', '../assets/star.png');
		this.load.image('tileset', '../assets/area01_level_tiles.png');
		this.load.tilemapTiledJSON('map', '../area01-stage2.json');
	}
	
	create() {
		//establish scoreboard
		this.scoreText = this.add.text(16, 16, 'Score: ', {
			fontFamily: 'Rationale',
			fontSize: '50px',
			fill: '#fff'
		});
		this.scoreText.setText('Score: ' + 0);
		this.score = 0;
		
		//establish total score
		this.totalScoreText = this.add.text(16, 60, 'Your Total Score: ', {
			fontFamily: 'Rationale',
			fontSize: '30px',
			fill: '#fff'
		});
		
		//establish map
		const map = this.make.tilemap({
			key: 'map',
			tileWidth: 32,
			tileHeight: 32
		});
		
		const tileset = map.addTilesetImage('area01_level_tiles', 'tileset');
		
		const backgroundLayer = map.createStaticLayer('background', tileset, 0, 0);
		const foregroundLayer = map.createStaticLayer('foreground (walk on)', tileset, 0, 0);
		const frontLayer = map.createStaticLayer('front', tileset, 0, 0);
		
		foregroundLayer.setCollisionByExclusion(-1, true);
		
		this.dude = this.physics.add.sprite(20, 0, 'dude', 4); 
		this.dude.setBounce(0.2);
		
		//add player-platform collisions
		this.dude.setCollideWorldBounds(true);
		this.physics.add.collider(this.dude, foregroundLayer);
		//set world bounds to follow camera bounds
		this.physics.world.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
		
		//establish camera
		this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
		//establish camera follow
		this.cameras.main.startFollow(this.dude);
		
		//establish anim
		this.anims.create({
			key: 'left',
			frames: this.anims.generateFrameNumbers('dude', {start: 0, end: 3}),
			frameRate: 10,
			repeat: -1
		});
		
		this.anims.create({
			key: 'turn',
			frames: [{key: 'dude', frame: 4}],
			frameRate: 20
		});
		
		this.anims.create({
			key: 'right',
			frames: this.anims.generateFrameNumbers('dude', {start: 5, end: 8}),
			frameRate: 10,
			repeat: -1
		});
		
		//adding cursor keys
		this.cursors = this.input.keyboard.createCursorKeys();
		
	}
	
	update(time, delta) {
		this.runBoyRun();
	}
	
	runBoyRun() {
		if (this.cursors.left.isDown) {
			this.dude.setVelocityX(-160);
			this.dude.anims.play('left', true);
		} else if (this.cursors.right.isDown) {
			this.dude.setVelocityX(160);
			this.dude.anims.play('right', true);
		} else {
			this.dude.setVelocityX(0);
    		this.dude.anims.play('turn');
		}
		
		if (this.cursors.up.isDown && Phaser.Input.Keyboard.JustDown(this.cursors.up)) {
			this.dude.setVelocityY(-330);
		}
		
	}
	
}
2

Hi @SHG42!

I’m not 100% sure what is going on, but I have a couple things you can try! I didn’t want this just hanging out with no responses. I’m sure someone else will chime in with the correct answer soon :slight_smile:

I would try adding the tile width and height into your addTilesetImage call. This seems like a problem where the map tile size and the image tile size aren’t lining up so some of the additional tiles aren’t drawing correctly.

const tileset = map.addTilesetImage('area01_level_tiles', 'tileset', 32, 32);

Also, you can try creating a DynamicLayer instead of a static one. I think they use a slightly different render path and that might solve it.

Do you want to post your tileset image and map json?

3

Thanks for the reply! Unfortunately, neither of those suggestions worked :frowning: As requested, here’s my tileset image and json file, plus the map tmx file, just in case. I can also provide the tileset tmx file if needed.
area01_level_tiles
area01-stage2.json (28.0 KB)
area01-stage2.tmx (15.9 KB)

4

I think the problem is that the map has two tilesets with identical names but different tile IDs.

Backup the map file, then in Tiled delete the first tileset, fill in the missing tiles on the map, and reexport.

5

That worked, thanks! As soon as I deleted the first tileset, the only tiles that went missing were those in the first column, the same ones that were showing up in the browser. Now the whole map loads. Thanks!