Search code examples
javascripthtmlcanvasterrainmosaic

Terrains union in a mosaic canvas 2d game

I have a mosaic map made of hexagons in HTML 5 Canvas. What I would like to be able to do is that when two different terrains come together, they mix with each other. I would like to move on from image 1 to image 2

Image 1

image 1

Image 2

this

Solution

  • Masking tile transitions for 2D tile maps

    Composite operations

    For a 2D game you can use masks to blend different images. A mask is just an image with the Alpha channels value determining how much of one image is added to another.

    The 2D canvas context has a variety of composite modes that aid in all types of masking needs. See MDN globalCompositeOperation for details.

    Use symmetry.

    You can build masks programmatically or create them by hand (hand drawn usually has a better look). You can exploit the symmetry of the hexagon so that you need only 2 masks for a transition between two types of game tile.

    The next image shows a single hexagon, that is created from 6 triangle (one is offset to show the single triangle unit.

    These triangle are then cut in two again for A and B showing a transition from water to sand. (sorry the images are a little big, I forgot what resolution I was working in)

    enter image description here

    Using the two parts and rotating and mirroring them (via context transforms) you can then build up a connected transition from one tile type to another. In effect you are working with 12 small triangles rather than one large hexagon.

    The image shows colours but you would have them as masks and create the hexagons as images as you need them (resolution, tile size, tile count, and amount of CPU time will determine how you construct the tiles. You may have to do it at start up and use up some memory, or if the game is low res and simple you could do it on the fly)

    enter image description here

    A in the above image are two As next to each other with one the mirror of the other.

    Remember the colors represent masks not actual image content, so for the example you would have 2 triangles (A,B) for yellow, 2 (A,B) for cyan, and two for blue as masks with alpha at 0 where you don't want the associated texture to show.

    Each mask can be rotated 60 deg (PI / 3 radians) and mirrored to create the 12 possible corner positions.

    Note that if you have tiles that a join with 3 or more different types you will have to create more complex transitions.