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

**URL:** <https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642>\
**Category:** Phaser 2 / CE\
**Created:** [January 7, 2019, 7:40pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642 "2019-01-07T19:40:23Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![HotCoder69420](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@HotCoder69420](https://phaser.discourse.group/u/HotCoder69420)\
**Post date:** [January 7, 2019, 7:40pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/1 "2019-01-07T19:40:24Z")

</div>

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:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/307c701532e1bf528108a464bd4e695f603cbb06.png)

Part 2 of the error same error, but split, because too large to fit using only 1 print screen:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/f8edd8d185db3238321b40401030299657761a96.png)

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.

---

<div class="post-metadata">

**Author:** ![nazimboudeffa](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nazimboudeffa/32/282_2.png) [@nazimboudeffa](https://phaser.discourse.group/u/nazimboudeffa)\
**Post date:** [January 7, 2019, 7:53pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/2 "2019-01-07T19:53:17Z")

</div>

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](https://github.com/nazimboudeffa/zelda-mop) to have an idea

---

<div class="post-metadata">

**Author:** ![HotCoder69420](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@HotCoder69420](https://phaser.discourse.group/u/HotCoder69420)\
**Post date:** [January 7, 2019, 8:30pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/3 "2019-01-07T20:30:47Z")

</div>

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

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/a3216712eeed46aabafe341acdb830726f2097a9.png)

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/cc3e05df331910e796144f5885ce109947a5952d.png)

etc…

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

---

<div class="post-metadata">

**Author:** ![nazimboudeffa](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nazimboudeffa/32/282_2.png) [@nazimboudeffa](https://phaser.discourse.group/u/nazimboudeffa)\
**Post date:** [January 7, 2019, 8:34pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/4 "2019-01-07T20:34:57Z")

</div>

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  
🙂

---

<div class="post-metadata">

**Author:** ![snowbillr](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/snowbillr/32/332_2.png) [@snowbillr](https://phaser.discourse.group/u/snowbillr)\
**Post date:** [January 7, 2019, 8:42pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/5 "2019-01-07T20:42:51Z")

</div>

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:

```javascript
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](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.

---

<div class="post-metadata">

**Author:** ![HotCoder69420](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@HotCoder69420](https://phaser.discourse.group/u/HotCoder69420)\
**Post date:** [January 7, 2019, 9:10pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/6 "2019-01-07T21:10:19Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![snowbillr](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/snowbillr/32/332_2.png) [@snowbillr](https://phaser.discourse.group/u/snowbillr)\
**Post date:** [January 7, 2019, 9:13pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/7 "2019-01-07T21:13:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![HotCoder69420](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@HotCoder69420](https://phaser.discourse.group/u/HotCoder69420)\
**Post date:** [January 7, 2019, 9:23pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/8 "2019-01-07T21:23:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![snowbillr](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/snowbillr/32/332_2.png) [@snowbillr](https://phaser.discourse.group/u/snowbillr)\
**Post date:** [January 7, 2019, 9:26pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/9 "2019-01-07T21:26:37Z")

</div>

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.

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

---

<div class="post-metadata">

**Author:** ![HotCoder69420](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@HotCoder69420](https://phaser.discourse.group/u/HotCoder69420)\
**Post date:** [January 7, 2019, 9:31pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/10 "2019-01-07T21:31:40Z")

</div>

It is `null`:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/a4acb9859d4fbae91b521ba8812f9f87586a4795.png)

---

<div class="post-metadata">

**Author:** ![snowbillr](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/snowbillr/32/332_2.png) [@snowbillr](https://phaser.discourse.group/u/snowbillr)\
**Post date:** [January 7, 2019, 9:36pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/11 "2019-01-07T21:36:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![HotCoder69420](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@HotCoder69420](https://phaser.discourse.group/u/HotCoder69420)\
**Post date:** [January 7, 2019, 9:37pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/12 "2019-01-07T21:37:30Z")

</div>

Ok, thanks for your help

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 7, 2019, 9:56pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/13 "2019-01-07T21:56:41Z")

</div>

Turn off layer compression and reexport the map.

---

<div class="post-metadata">

**Author:** ![HotCoder69420](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@HotCoder69420](https://phaser.discourse.group/u/HotCoder69420)\
**Post date:** [January 7, 2019, 10:06pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/14 "2019-01-07T22:06:00Z")

</div>

Which one should I choose?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 7, 2019, 10:45pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/15 "2019-01-07T22:45:09Z")

</div>

I think it’s _Tile Layer Format: CSV_.

---

<div class="post-metadata">

**Author:** ![HotCoder69420](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@HotCoder69420](https://phaser.discourse.group/u/HotCoder69420)\
**Post date:** [January 8, 2019, 8:57am UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/16 "2019-01-08T08:57:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![HotCoder69420](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@HotCoder69420](https://phaser.discourse.group/u/HotCoder69420)\
**Post date:** [January 8, 2019, 4:41pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/17 "2019-01-08T16:41:43Z")

</div>

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:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/0e6eb4c7ff1dd18403253e215aee5113472b70a2.png)

What does this mean?

---

<div class="post-metadata">

**Author:** ![nazimboudeffa](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nazimboudeffa/32/282_2.png) [@nazimboudeffa](https://phaser.discourse.group/u/nazimboudeffa)\
**Post date:** [January 9, 2019, 1:57am UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/18 "2019-01-09T01:57:25Z")

</div>

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`

---

<div class="post-metadata">

**Author:** ![HotCoder69420](https://avatars.discourse-cdn.com/v4/letter/h/a698b9/32.png) [@HotCoder69420](https://phaser.discourse.group/u/HotCoder69420)\
**Post date:** [January 9, 2019, 9:09am UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/19 "2019-01-09T09:09:19Z")

</div>

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

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/1X/9c81353630e0218a28abf87acdb3a0be9b8c3cea.png)

---

<div class="post-metadata">

**Author:** ![nazimboudeffa](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/nazimboudeffa/32/282_2.png) [@nazimboudeffa](https://phaser.discourse.group/u/nazimboudeffa)\
**Post date:** [January 9, 2019, 4:19pm UTC](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642/20 "2019-01-09T16:19:38Z")

</div>

I guess it’s the same error as I mentioned before so Phaser cannot drawImage, so please look at [my Zelda project](https://github.com/nazimboudeffa/zelda-mop)

[Next page](https://phaser.discourse.group/t/uncaught-typeerror-cannot-read-property-height-of-undefined-for-a-phaser-game-using-a-tiled-map/642.md?page=2)