马赛克画布2D游戏中的Terrains Union

Question

我有一个由HTML 5 Canvas中的六边形组成的镶嵌图。 我想做的是，当两个不同的地形汇聚在一起时，它们会相互融合。 我想从图片1转到图片2

图片1

图片2

Answer 1

在没有太多背景信息的情况下：您总是可以使用自定义图形创建一个六边形，该图形将程序的两个外部合并，然后每当您检测到两个不同的地形时，将其更改为该自定义图形。

如果您想探索一种更详细的方法，则不妨考虑查看heightmaps 。 本文提供了一个不错的描述和教程，您可以从中获得自己的解决方案。 http://www.playfuljs.com/realistic-terrain-in-130-lines/

想法是：取一个正方形。 将其分成四个子正方形，然后将其中心点向上或向下移动一个随机偏移量。 将每个分割成更多的子正方形并重复，每次减小随机偏移的范围，以便第一个选择最重要，而后面的选择则提供较小的细节。 -http://www.playfuljs.com/realistic-terrain-in-130-lines/

建议 ：创建更多不同的纹理，并使用高度图来确定应在六边形中显示的图形。

除此以外...

合并图像 ： 画布- 合并 两个图像，返回一个img html对象？

Answer 2

遮罩2D瓷砖贴图的瓷砖过渡

复合操作

对于2D游戏，您可以使用遮罩混合不同的图像。 遮罩只是具有Alpha通道值的图像，该值确定将一个图像中的多少添加到另一图像中。

2D画布上下文具有多种组合模式，可满足所有类型的遮罩需求。 有关详细信息，请参见MDN globalCompositeOperation 。

使用对称性。

您可以通过编程方式来构建蒙版，也可以手动创建它们（手绘通常具有更好的外观）。 您可以利用六边形的对称性，以便只需要2个遮罩即可在两种类型的游戏图块之间进行过渡。

下一个图像显示了一个由6个三角形创建的单个六边形（一个偏移量显示了单个三角形的单位。

然后将这些三角形再次切成两半，用于A和B，表示从水到沙子的过渡。 （抱歉，图像有些大，我忘记了当时的分辨率）

使用这两个部分并旋转和镜像它们（通过上下文转换），您可以建立从一种瓦片类型到另一种瓦片类型的连接过渡。 实际上，您正在使用12个小三角形而不是一个大六边形。

该图像显示颜色，但是您可以将它们用作遮罩，并根据需要将六边形创建为图像（分辨率，图块大小，图块计数和CPU时间量将决定如何构造图块。您可能必须在启动并消耗一些内存，或者如果游戏的分辨率较低且简单，则可以随时进行操作）

上图中的A是两个As彼此相邻，另一个是镜子。

请记住，颜色代表的是蒙版，​​而不是实际的图像内容，因此对于本例，您将有2个三角形（A，B）代表黄色，有2个（A，B）代表青色，另外两个代表蓝色，其中alpha值为0，而您没有希望显示关联的纹理。

每个蒙版可以旋转60度（PI / 3弧度）并镜像以创建12个可能的角位置。

请注意，如果您的图块具有3种或更多不同类型的联接，则必须创建更复杂的过渡。