Search code examples
javascripthtmlcanvastiledmelonjs

Framework for html5/canvas game based on hexagonal grid


I am developing html5 game based on hexagonal grid.

After some investigation I have used :

MelonJS + Tiled + this tricky thing. Everything seems good in this combination, until I started to think about dynamic showing some hexagons, that my player will be able to go. There are few ideas that comes to mind:

  • Calculate coordinates and draw on canvas skipping melonjs, but it's bad idea from architecture point.

  • Adding custom property for each hexagon texture object, but it's too much manual work.

  • Adding some facade for melonjs in order to work with it or maybe it's already done?

So my question is:

What's the best way to solve this problem in scope of those technologies or maybe should I use another tool?


Solution

  • Depending on how much content you have already developed, did you consider to use a Tiled daily build with support for hexagonal maps?

    Of course, since melonJS doesn't support this yet you would either need to implement the hexagonal renderer yourself or try to get the support from melonJS developers to add it. I've opened an issue about this.

    I may have misunderstood your question a little, though. If you are talking about an overlay on top of the map that shows the player where he can walk to from his current position, then the way to go would be to draw this yourself after melonJS has rendered the map. I can't help you with exactly how to do this because I don't have that much experience with melonJS.