Hi,
After the topdown, I am working now on a little side-scroller. It is working well, but I have a problem with the tilemap, or more probably the tileset that you can see here.
The tileset is made of 6 rows and 6 columns of 96x96 tiles. There is no margin or spacing between tiles. It is working perfectly on Tiled, but on Phaser, you can see partially the surrounding tiles while displaying a tile. I first thought that the tiles weren’t properly aligned in the PNG, but they are. I tried to add a space of 1px between each tiles, and that didn’t change anything.
I’ve noticed that I have exactly the same problem in the Multiple Tilesets example in the Phaser examples, as well as in some other, so I am wondering if it is not a problem with my browser…
Do you know how to solve this? Should I add more space between tiles or is it something else?
Thanks a lot!
EDIT: by finding the right term for this problem (bleeding tiles), I found other posts about the same problem (see below).
2nd EDIT: this.cameras.main.roundPixels = true; made it better but didn’t solve it totally. I will extrude the tileset tomorrow to see if this work. If I knew how to find such tools before, I wouldn’t have lost my time doing it manually on Gimp, with an antique machine not powerfull enough. Well, I’ll do it properly next time!
3rd EDIT: this.cameras.main.roundPixels = true; made the game looks so much better. No more blurry sprites and texts. When I was looking for a solution for blurry text, I tried to round the text position, but never thought about doing the same with the camera position!
4th EDIT: Using this tile extruder solved the problem. Thanks Mike for this plugin! To work well, all tilesets should have a 1px margin and a 2px spacing and be extruded. Good to know!