Problems with tilemap

[squarePenguin]

Hello! I am new to javascript and I was trying to make a basic platformer game in order to learn more about Phaser. I did follow the tutorial: http://www.photonstorm.com/phaser/tutorial-making-your-first-phaser-game

and I am starting from there,

 

I am also using the starstruck example(http://examples.phaser.io/_site/view_full.html?d=games&f=starstruck.js&t=starstruck) as a guideline for making the basic level. However, I am finding it difficult to replicate the tilemap part. I understood that is is using a png tileset file couplet with a json tilemap. My problem is in creating such a tilemap. I searched on google on found the Tiled app does just that, but I still have some problems with it.

 

First of all, the textures I am trying to use(http://opengameart.org/content/platformer-tiles) do not come in the form of a single tileset but rather separately, each in it own png file.  I can import all of them in Tiled as a collection, but I do not know how to use them later in my phaser program. One think I tried was merging them in the tileset myself, but then they are of different sizes and Tiled splits them unevenly. What's the best way to do this?

 

Secondly, the starstruck example using the following line of code in order to manage collisions:

map.setCollisionByExclusion([ 13, 14, 15, 16, 46, 47, 48, 49, 50, 51 ]);

and I do not how I should extract such "magic" numbers from my json file.

 

Thank you for your time!  Please tell me if you need further explanation.

 

[hollowdoor]

Have you been using Tilemap.addTileSetImage? addTileSetImage

 

For the collision just read the json file. You'll find numbers that correspond to the tiles you want. Test out different ones.

 

For setCollisionByExclusion I find using it like `map.setCollisionByExclusion([0])` to work quite well for most situations. Being that zero is usually outside of any tiles that actually have objects. If you have additional tiles to exclude read the json file. It will be a lot of reading, but if you take the time to test them it will be worth it.

 

Just remember that tiles that are zero are not set to objects, and tiles that have numbers have objects, and the numbers go left to right in the tilemap.

[druphoria]

What I would do is use a photo editor like gimp and create a tileset of my own, fitting the tiles into squares of uniform size. In the opengameart.org link you posted, all of the blocks and the fence tiles could probably all be fit (or slightly rescaled to fit) into blocks of uniform size, which would then be able to be successfully read by Tiled.

 

On the issue of there being things in that art pack of different size...I wouldn't make things like enemies/coins/buttons into part of your tileset, since they're game objects as opposed to a part of the actual landscape of the map itself. I would import those into the game separately as spritesheets/images and attach them to sprites.

 

As for things like mushrooms and grass which still are basically part of the map and not separate entities, you could still fit those into your tileset. What you would do with those is put those each in their own tile with the same size as all of the other tiles, but have the square around the actual object be transparent.

[squarePenguin]

Thank you both! It looks like in the end I will have to resort to a little manual labour, hehe . Heading off to learn how to use gimp. Have a nice day!

[hollowdoor]

Thank you both! It looks like in the end I will have to resort to a little manual labour, hehe . Heading off to learn how to use gimp. Have a nice day!

 

Don't worry. It's really easy once you've done it once successfully.