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.
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);
}
}
}