马赛克 canvas 2d 游戏中的地形联合
Terrains union in a mosaic canvas 2d game
我在 HTML 5 Canvas 中有一张由六边形组成的马赛克地图。我希望能够做到的是，当两种不同的地形走到一起时，它们会相互混合。我想从图片 1 转到图片 2
图片 1
图 2
没有太多关于你正在使用的内容的上下文：你总是可以创建一个带有自定义图形的六边形，在你的程序之外合并这两个图形，然后每当你检测到两个不同的地形接触时，将它们更改为这个自定义图形图形。
如果您想探索更详细的方法，那么您不妨考虑查看 heightmaps。本文提供了很好的描述和教程，您可以从中得出自己的解决方案。
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/
一个建议：创建更多不同的纹理，并使用高度图来决定应该在六边形块中显示什么图形。
否则...
合并图像：Canvas - Combing two images, return one img html object?
屏蔽 2D 瓦片地图的瓦片过渡
复合操作
对于 2D 游戏，您可以使用遮罩来混合不同的图像。遮罩只是一张图像，其 Alpha 通道值决定了将一张图像添加到另一张图像的多少。
2D canvas 上下文具有多种复合模式，可帮助满足所有类型的遮罩需求。有关详细信息，请参阅 MDN globalCompositeOperation。
使用对称性。
您可以通过编程方式构建蒙版或手动创建它们（手绘通常看起来更好）。您可以利用六边形的对称性，这样您只需要 2 个掩码即可在两种类型的游戏板块之间进行转换。
下一张图片显示了一个六边形，它是由 6 个三角形创建的（一个偏移以显示单个三角形单元。
然后将这些三角形再次一分为二，A 和 B 显示从水到沙的过渡。 （不好意思图片有点大，忘记是什么分辨率了）
使用这两个部分并旋转和镜像它们（通过上下文转换），然后您可以建立从一种图块类型到另一种图块类型的连接过渡。实际上，您使用的是 12 个小三角形，而不是一个大六边形。
图像显示颜色，但您可以将它们作为蒙版并根据需要将六边形创建为图像（分辨率、图块大小、图块数量和 CPU 时间量将决定您如何构建瓷砖。您可能必须在启动时执行此操作并使用一些内存，或者如果游戏分辨率低且简单，您可以即时执行）
上图中的A是两个相邻的A，一个是另一个的镜像。
请记住，颜色代表蒙版而非实际图像内容，因此对于示例，您将有 2 个三角形 (A,B) 代表黄色，2 个三角形 (A,B) 代表青色，两个代表蓝色作为蒙版，alpha 为0 不希望显示关联纹理的位置。
每个蒙版都可以旋转 60 度（PI / 3 弧度）并镜像以创建 12 个可能的角位置。
请注意，如果您有连接 3 种或更多不同类型的图块，则必须创建更复杂的过渡。
我在 HTML 5 Canvas 中有一张由六边形组成的马赛克地图。我希望能够做到的是，当两种不同的地形走到一起时，它们会相互混合。我想从图片 1 转到图片 2
图片 1
图 2
没有太多关于你正在使用的内容的上下文：你总是可以创建一个带有自定义图形的六边形，在你的程序之外合并这两个图形，然后每当你检测到两个不同的地形接触时，将它们更改为这个自定义图形图形。
如果您想探索更详细的方法，那么您不妨考虑查看 heightmaps。本文提供了很好的描述和教程，您可以从中得出自己的解决方案。 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/
一个建议：创建更多不同的纹理，并使用高度图来决定应该在六边形块中显示什么图形。
否则...
合并图像：Canvas - Combing two images, return one img html object?
屏蔽 2D 瓦片地图的瓦片过渡
复合操作
对于 2D 游戏，您可以使用遮罩来混合不同的图像。遮罩只是一张图像，其 Alpha 通道值决定了将一张图像添加到另一张图像的多少。
2D canvas 上下文具有多种复合模式，可帮助满足所有类型的遮罩需求。有关详细信息，请参阅 MDN globalCompositeOperation。
使用对称性。
您可以通过编程方式构建蒙版或手动创建它们（手绘通常看起来更好）。您可以利用六边形的对称性，这样您只需要 2 个掩码即可在两种类型的游戏板块之间进行转换。
下一张图片显示了一个六边形，它是由 6 个三角形创建的（一个偏移以显示单个三角形单元。
然后将这些三角形再次一分为二，A 和 B 显示从水到沙的过渡。 （不好意思图片有点大，忘记是什么分辨率了）
使用这两个部分并旋转和镜像它们（通过上下文转换），然后您可以建立从一种图块类型到另一种图块类型的连接过渡。实际上，您使用的是 12 个小三角形，而不是一个大六边形。
图像显示颜色，但您可以将它们作为蒙版并根据需要将六边形创建为图像（分辨率、图块大小、图块数量和 CPU 时间量将决定您如何构建瓷砖。您可能必须在启动时执行此操作并使用一些内存，或者如果游戏分辨率低且简单，您可以即时执行）
上图中的A是两个相邻的A，一个是另一个的镜像。
请记住，颜色代表蒙版而非实际图像内容，因此对于示例，您将有 2 个三角形 (A,B) 代表黄色，2 个三角形 (A,B) 代表青色，两个代表蓝色作为蒙版，alpha 为0 不希望显示关联纹理的位置。
每个蒙版都可以旋转 60 度（PI / 3 弧度）并镜像以创建 12 个可能的角位置。
请注意，如果您有连接 3 种或更多不同类型的图块，则必须创建更复杂的过渡。