我有一个由 HTML 5 Canvas 中的六边形组成的马赛克地图。我想做的是，当两个不同的地形融合在一起时，它们会相互混合。我想从图 1 转到图 2
图 1
图 2
问问题
229 次
2 回答
1
为 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 种或更多不同类型连接的图块，则必须创建更复杂的过渡。
于 2017-11-26T01:31:23.527 回答
0
没有太多关于您正在使用的内容的上下文：您始终可以使用自定义图形创建一个六边形，将两者合并在您的程序之外，然后每当您检测到两个不同的地形接触时，将它们更改为这个自定义图形。
如果您想探索更详细的方法，那么您可能希望考虑查看heightmaps。本文提供了很好的描述和教程，您可以从中得出自己的解决方案。 http://www.playfuljs.com/realistic-terrain-in-130-lines/
想法是这样的：取一个平坦的正方形。将其分成四个子方块，并将它们的中心点向上或向下移动一个随机偏移量。将这些中的每一个拆分成更多的子方块并重复，每次都减小随机偏移的范围，以便第一个选择最重要，而后面的选择提供更小的细节。- http://www.playfuljs.com/realistic-terrain-in-130-lines/
一个建议：创建更多不同的纹理，并使用高度图来决定应该在六边形块中显示什么图形。
否则...
Merging Images : Canvas - 合并两张图片，返回一个 img html 对象？
于 2017-11-25T19:14:33.153 回答