I have made a map in Tiled for my 2D platformer game, where I have defined a solid layer, background layer, and a foreground layer. At the moment, there is nothing on the foreground layer, but the background layer contains a background. For the solid layer, I have made a custom Layer property and called it solid (Boolean), then checked the box. Now I ma trying to parse the map into my game using .JSON, but I am having issues. Below you will find the console errors, and my code:
CODE:
HTML file used as the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NightlyNeighboursUsingPhaser</title>
<script type="text/javascript" src="js/Phaser.js"</script>
<script type="text/javascript" src="js/Boot.js"</script>
<script type="text/javascript" src="js/Preload.js"</script>
<script type="text/javascript" src ="js/NightlyNeighbours1WithPhaser.js"</script>
<script type="text/javascript">
(function(){
game=newPhaser.Game(window.innerWidth*window.devicePixelRatio,window.innerHeight*w indow.devicePixelRatio,Phaser.AUTO);
game.state.add("Boot",Boot);
game.state.add("Preload",Preload);
game.state.add("NightlyNeighbours1WithPhaser",Main);
game.state.start("Boot");
})();
</script>
</head>
<body>
Boot:
var Boot=function(game){
};
Boot.prototype={
preload:function(){
},
function(){
this.scale.scaleMode=Phaser.ScaleManager.SHOW_ALL;
this.game.state.start("Preload");
}
}
Preload:
var Preload=function(game){};
Preload.prototype={
preload:function(){
this.game.load.spritesheet('player1','gameAssets/Players/player1.png',93,266);
this.game.load.tilemap('level_1','GameLevels/Level1.json',null,Phaser.Tilemap.TILED_JSON);
this.game.load.image('platforms','gameAssets/Images/brickmiddle.png');
this.game.load.image('ground1','gameAssets/Images/groundtop.png');
this.game.load.image('ground2','gameAssets/Images/groundbottom.png');
this.game.load.image('background','gameAssets/Images/sky.png');
},
create:function(){
this.game.state.start("NightlyNeighbours1WithPhaser");
}
}
Main:
var Main = function(game){
}
Main.prototype={
create:function(){
this.game.physics.startSystem(Phaser.Physics.ARCADE);
this.map = this.game.add.tilemap('level_1');
this.map.addTilesetImage('brickmiddle', 'platforms');
this.map.addTilesetImage('groundtop', 'ground1');
this.map.addTilesetImage('groundbottom', 'ground2');
this.map.addTilesetImage('sky', 'background');
this.map.addTilesetImage('player1', 'player1');
this.backgroundLayer = this.map.createLayer('Background');
this.groundLayer = this.map.createLayer('Solid');
this.map.setCollisionBetween(1, 927, true, 'Solid');
this.groundLayer.resizeWorld();
this.sprite.body.bounce.y = 0.2;
this.sprite.body.gravity.y = 2000;
this.sprite.body.gravity.x = 20;
this.sprite.body.velocity.x = 100;
this.sprite.animations.add ('right', [5,6,7,8], 10, true);
this.sprite.animations.play('right');
this.game.camera.follow(this.sprite);
this.cursors = this.game.input.keyboard.createCursorKeys();
},
update: function (){
this.game.physics.arcade.collide(this.sprite, this.groundLayer);
if(this.cursors.up.isDown){
this.sprite.body.velocity.y = -500;
}
},
};
ERROR:
Part 1 of the image:
Part 2 of the error same error, but split, because too large to fit using only 1 print screen:
Please help, I understand there might be a lot here in this topic, for that I apologise, however, I am unsure of how to fix this error.
