Terrains联盟在马赛克帆布2d游戏中

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/

建议：创建更多变化的纹理，并使用高度图来决定应该在六边形中显示哪些图形。

...否则

合并图片：Canvas - Combing two images, return one img html object?

Answer 2

为2D图块地图屏蔽图块过渡

复合操作

对于2D游戏，您可以使用遮罩来混合不同的图像。掩码只是一个Alpha通道值的图像，用于确定将一个图像添加到另一个图像中的程度。

2D画布上下文具有各种复合模式，有助于满足所有类型的屏蔽需求。有关详细信息，请参阅MDN globalCompositeOperation。

使用对称性。

您可以通过编程方式构建蒙版或手动创建蒙版（手绘通常具有更好的外观）。您可以利用六边形的对称性，这样您只需要2个蒙版即可在两种类型的游戏拼贴之间进行过渡。

下一张图片显示了一个六边形，它是从6个三角形创建的（一个是偏移的，以显示单个三角形单位。

然后再将这些三角形切成两半，A和B显示从水到沙子的过渡。 （对不起，图像有点大，我忘了我在做什么决议）

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

图像显示颜色，但您可以将它们作为蒙版，并根据需要将六边形创建为图像（分辨率，图块大小，图块数量和CPU时间量将决定您如何构建图块。您可能需要在启动时做它并耗尽一些记忆，或者如果游戏是低分辨率和简单的你可以在飞行中做到这一点）

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

请记住，颜色代表的是面具而不是实际的图像内容，因此对于示例，您将有2个三角形（A，B）表示黄色，2（A，B）表示青色，2表示蓝色作为蒙版，alpha表示0你不希望显示相关的纹理。

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

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