javascript - Tilemap from Tiled not rendering in Phaser - Stack Overflow

I'm stuck in a rut with this game I'm trying to make. The tilemap I'm trying to use has an error stating as follows

Error 1: "Phaser.Tileset - image tile area is not an even multiple of tile size"
Error 2: "Uncaught TypeError: Cannot read property '2' of undefined"
Error 3: "Uncaught TypeError: Cannot read property 'type' of undefined"2

Here is a link to the code I'm using.

I'm stuck in a rut with this game I'm trying to make. The tilemap I'm trying to use has an error stating as follows

Error 1: "Phaser.Tileset - image tile area is not an even multiple of tile size"
Error 2: "Uncaught TypeError: Cannot read property '2' of undefined"
Error 3: "Uncaught TypeError: Cannot read property 'type' of undefined"2

Here is a link to the code I'm using. http://pastebin./Dv00KGii

• javascript
• html
• phaser-framework

Share Improve this question Follow edited Sep 2, 2015 at 13:57 vanntile 2,78744 gold badges2828 silver badges4848 bronze badges asked Aug 6, 2015 at 22:02 Omar NooristaniOmar Nooristani 7111 silver badge33 bronze badges 6

• Wele to SO! Please post the code you have tried so that we may help you with said issues. See the How to ask page for help in improving your question. – Madness Commented Aug 6, 2015 at 22:03
• Thanks for the wele and tip, I'm going to do just that. – Omar Nooristani Commented Aug 7, 2015 at 0:10
• Once an edit has been made, ping me in the ments again, and I can vote this back up. You are already showing munity participate by responding, that is excellent! Participation is the key to success around here! – Madness Commented Aug 7, 2015 at 0:15
• Thanks, but I cannot exactly put the entire code here as it is restricted due to character space. My code exceeded the character limit as all characters in total are about 4400. Any tips for me? – Omar Nooristani Commented Aug 7, 2015 at 1:48
• Well, try to post some code relevant to ther error, I mean all of it cannot be suspect, can it? But you should be able to use pastebin. - Paste your code, give the Paste a Name, and hit Submit. It will give you a unique URL that you can post here. – Madness Commented Aug 7, 2015 at 4:52

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 5

Try embedding tileset in your tilemap. For me this fixed this eror: Uncaught TypeError: Cannot read property '2' of undefined"

Inside the Tiled Map Editor, you need to assure that all the tileset images that you are using are embedded inside the tilemap .tmx project file. If any of the tileset images is included as an external .tsx, not embedded image then it will throw Uncaught TypeError: Cannot read property '2' of undefined" error when you will try to import inside the Phaser the exported JSON file from the Tiled Map Editor.

If you have forgotten to embed it at the beginning it is not a problem as you can always do it later. The editor has a useful icon to do it easily:

To see if you have any external tilesets that will produce this error, check if the exported tilemap JSON files contain any references to .tsx files.

The error Phaser is reporting is the following:

"image tile area is not an even multiple of tile size"

So, apparently Phaser requires that the size of the tileset image is a multiple of your tile size. Tiled itself does not require this, but if you're using Phaser you should probably make sure there is no extra space in the tileset image.

This also happened to me. I found that my png image I was loading was 1280x720.

The example on Phaser website says to load the tilemap like this

map = game.add.tilemap('mario');

The documentation for the tilemap function is here. The function takes other parameters like the tile sizes. In my case the default 32x32 is invalid because 720/32 = 22.5. That number needs to be a round number. So I just cropped my image to 32*22 = 704. Then Phaser was able to load the png with the default tilemap settings. So then the default 32x32 will work otherwise you can change the height setting to 10 since 720 is divisible by 10. In that case Phaser should not throw an error. In my case I resized my image because the other tile images I was using were all 32x32 so it is easier to be consistent.

Also when creating the tilemap json it is best if the tileheight and tilewidth are multiples of your image and settings.