Terrains union in a mosaic canvas 2d game

Question

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 2

Answer 1

Without much context to what you are using: You could always create a hexagon with a custom made graphic that merges the two outside of your program, and then whenever you detect two different terrains touching, change them to this custom made graphic.

If you wish to explore going into a more detailed approach, then you may wish to consider looking at heightmaps . This article provides a nice description and tutorial, from which you can derive your own solution. http://www.playfuljs.com/realistic-terrain-in-130-lines/

Here's the idea: take a flat square. Split it into four sub-squares, and move their center points up or down by a random offset. Split each of those into more sub-squares and repeat, each time reducing the range of the random offset so that the first choices matter most while the later choices provide smaller details. - http://www.playfuljs.com/realistic-terrain-in-130-lines/

A suggestion : Create more varied textures, and use heightmaps to decide what graphic should be shown in a hexagon piece.

Otherwise...

Merging Images : Canvas - Combing two images, return one img html object?

Answer 2

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)

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)

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.