Uncaught TypeError: Cannot read property 'height' of undefined for a phaser game, using a Tiled map


#1

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.


#2

1 - You have to set the right size of the tiles to match with the spritsheet of Tiled Map
2 - The layer have to have the same name as in your Tiled Map file that you have to convert to json

You can take a look at https://github.com/nazimboudeffa/zelda-mop to have an idea


#3

The tile size was 32 by 32, but I used multiple spritesheets:

etc…

So ho would I set the right size of the tiles to match with the spritesheetS of the Tiled Map?


#4

Well this is the new Phaser Forum not the Tiled Map Editor one, I think this questions have been asked many times and a bit of googling will fix it
:slightly_smiling_face:


#5

I’m not so sure about how tile sizes and map sizes work between Phaser and Tiled, but looking at your error and the code in Phaser-CE, it looks like there is an issue with the layer that gets passed in to the setCollisionBetween method. Try this instead:

this.groundLayer = this.map.createLayer('Solid');
this.map.setCollisionBetween(1, 927, true, this.groundLayer);

If you look at your error message, it says there is a problem in the setCollisionByIndex method where it can’t read height of undefined. The only place I see in that method that’s trying to access a height property is https://github.com/photonstorm/phaser-ce/blob/master/src/tilemap/Tilemap.js#L1034.

So my guess is there’s a problem with the layer that you are passing in. Maybe it’s name in Tiled isn’t Solid? Either way, you should be able to pass in the tilemap layer you created in phaser and it should work.

For the record, I do think this problem is related to Phaser and you are totally right to ask for help about it here.


#6

I have tried what you have suggested, and it comes up with the same error, should I change the name of .groundLayer to .Solid, as that is the name of the layer in Tiled?


#7

Nah, that shouldn’t make a difference. Can you check to see if this.groundLayer is null or not? My guess would be that this.map.createLayer('Solid') is returning null.


#8

So I have added this code to my Main:

if(this.groundLayer('Solid')==="null"){
alert("null");
}

There is no change in the output.

Also, I think this is how you would check if this.groundLayer is null, I am not entirely sure


#9

You’d need to check against null, not "null".

It’d also be easiest to log it to the console with console.log but that will work too.

Try it with a == instead of a === as well so it will catch undefined too.

And run it right after you create the ground layer variable.

if (this.groundLayer == null) {
  alert('it is null');
} else {
  alert('it is not null');
}

#10

It is null:


#11

Great! We’re getting closer to figuring it out then. So the problem isn’t related to the height of anything, its got to do with making that layer named “Solid”.

Unfortunately I don’t know much about tilemaps in phaser-ce so I can’t really help you too much further here.

I’d double check in your tiled project that you have the name of the layer as “Solid” in there. It seems like for some reason that can’t be found.


#12

Ok, thanks for your help


#13

Turn off layer compression and reexport the map.


#14

Which one should I choose?


#15

I think it’s Tile Layer Format: CSV.


#16

Ok, thanks, would I need to alter my code? From my knowledge I don’t think so ,but maybe I do


#17

I have now used the correct format for the tile layer, and it no longer comes with the error for height, however, there is a new error:

What does this mean?


#18

It is a general error that means for me that there is a var that is not initialised, but this is a javascript error not a phaser one, so you have to take a look at the line 25 of the file NightlySomething.js which I encourage you to call it game.js


#19

So I think I have declared the variable now, but the next error is definitely a phaser error:


#20

I guess it’s the same error as I mentioned before so Phaser cannot drawImage, so please look at my Zelda project