Basic tutorial for tile map

Cocos Creator
#1

I’m using cocos creator v2.4.9. All the documentation and tutorial for tile map is incomplete. It explains how to add .tmx file to creator.
It would be great if someone could point me towards a tutorial or project which has

  1. collision detection between cocos node and objects in tile map.
  2. Dynamic creation of a specific tile on tilemap click and so on.

I’m trying to make game similar to this : [Make Your Own TileMap with Vanilla Javascript | by Tyler Conti | Geek Culture | Medium](https://Cat Crusador)

1 Like
#2

If you have no specific reason to stay to creator V2, I suggest you to move to V3, not because you’ll find more tutorial (you will not) but because from now on V3 is the standard.

That said I’ve struggled for weeks to find some documentation on tile map (how to integrate to Tiled, to be more precise) on how to do collisions and things like that. There are one or two examples in the test repository but they are from v2 and the code is meh. To be honest you just can’t use Tiled and have collisions out of the box but I’m working on a plugin to fix this. In the wait you can find a good example on how to do collisions using Tiled here in this repository GitHub - theRenard/cocos-creator-tiled-collider-creator: Cocos Creator + Tiled and collisions, it is very minimal you should find yourself at home even if you were using V2.

Good luck for your game :slight_smile:

1 Like
#3

I think the team will upgrade the documentation of tiledmap. but only in v3.x, v2 is legacy version ,won’t be changed anymore.
if your project is just in the startup phase, I strongly recommend you to use v3 instead.

#4

Okay. Thanks for the reply

Thanks for the solution. Can you please mention which version of v3 is better to use as latest version may not be stable sometimes.

Will make sure to try this.

Thanks.

#5

I’m, using V3.6.2 right now and is sees pretty much stable for my needs

#6

I used the same version.
Right now I’m getting this issue.

This is the project in tiled.

Screenshot 2022-11-29 180302
Screenshot 2022-11-29 1803021611×958 147 KB

I’ve updated similar to your code

Screenshot 2022-11-29 180000
Screenshot 2022-11-29 1800001920×972 154 KB

but the collision is set to whole map
Hull Concavity = 1, neighborhoodRadius = 50 and clusterNeighborsPoints = 10

Screenshot 2022-11-29 180038
Screenshot 2022-11-29 180038835×468 33.4 KB

Hull Concavity = 1, neighborhoodRadius = 40 and clusterNeighborsPoints = 10

I’m not sure how to set the Hull Concavity, neighborhoodRadius and clusterNeighborsPoints.

image
image833×472 58.8 KB

Can you please guide me a little here?

Thanks

#7

Yeah sure, you have to try with different values, in my case 1 - 30 - 10 works well. If you want you can open an issue on my repository and share your Tiled map it will be interesting to test with other maps than mine.

You can also try to separate the platforms from the border, when you have something like a closing pattern (the border as rectangle), the algorithm tries to fill it and you have the error in 1st image

#8

Can you explain what those 3 points are and how it effects?

Will try this, Thanks!

EDIT:
Separating borders worked! Thanks a lot for the help.

#9

you’re welcome!

concavity is approximation in the cloud of points, you usually want it at 1 (you can read more on it here Hull.js by Andrii Heonia).

neighborhoodRadius set the radius of an imaginary circle around the point where it looks for other points to consider it as its neighbours

clusterNeighborsPoints works with the latter parameter and set how many points you want to form a cluster (more here GitHub - uhho/density-clustering: Density Based Clustering in JavaScript)