地图平铺算法
地图
我正在使用 Javascript 制作基于瓦片的 RPG，使用 perlin 噪声高度图，然后根据噪声的高度分配瓦片类型。
地图最终看起来像这样（在小地图视图中）。
https://i.stack.imgur.com/boOia.png
我有一个相当简单的算法，它从图像上的每个像素中提取颜色值，并将其转换为整数（0-5），具体取决于它在（0-255）之间的位置，对应于平铺字典中的平铺。然后将此 200x200 数组传递给客户端。
然后引擎根据数组中的值确定图块并将它们绘制到画布上。所以，我最终得到了具有逼真外观特征的有趣世界：山脉、海洋等。
现在我想做的下一件事是应用某种混合算法，如果邻居不是同一类型，它会导致瓷砖无缝地融入他们的邻居。上面的示例地图是玩家在他们的小地图中看到的。在屏幕上，他们会看到由白色矩形标记的部分的渲染版本；其中瓷砖与其图像一起渲染，而不是作为单色像素。
这是用户将在地图中看到的示例，但它与上面的视口显示的位置不同！
https://i.stack.imgur.com/F0f9E.png
正是在这种观点中，我希望发生转变。
算法
我想出了一个简单的算法，它可以在视口内遍历地图，并在每个图块的顶部渲染另一个图像，前提是它位于不同类型的图块旁边。 （不改变地图！只是渲染一些额外的图像。）算法的想法是描绘当前瓦片的邻居：
https://i.stack.imgur.com/Cetyi.png
这是引擎可能必须渲染的示例场景，当前图块是标有 X 的图块。
创建了一个 3x3 数组并读入它周围的值。因此对于本例，数组看起来像。
[
[1,2,2]
[1,2,2]
[1,1,2]
];
然后我的想法是为可能的瓷砖配置制定一系列案例。在一个非常简单的层面上：
if(profile[0][1] != profile[1][1]){
//draw a tile which is half sand and half transparent
//Over the current tile -> profile[1][1]
...
}
这给出了这个结果：
https://i.stack.imgur.com/R4UPM.png
它作为从 [0][1] 到 [1][1] 的过渡，但不是从 [1][1] 到 [2][1] 的过渡，其中仍然存在硬边。所以我认为在那种情况下必须使用角落瓷砖。我创建了两个 3x3 的精灵表，我认为它们可以包含所有可能需要的图块组合。然后我为游戏中的所有图块复制了这个（白色区域是透明的）。对于每种类型的图块，这最终是 16 个图块（不使用每个精灵表上的中心图块。）
https://i.stack.imgur.com/4QXGR.png
理想的结果
因此，使用这些新图块和正确的算法，示例部分将如下所示：
https://i.stack.imgur.com/SYNqQ.png
但是，我所做的每一次尝试都失败了，算法中总是存在一些缺陷，并且模式最终变得很奇怪。我似乎无法正确处理所有情况，总体而言，这似乎是一种糟糕的方法。
一个解法？
所以，如果有人可以提供一个替代解决方案来说明我如何创建这种效果，或者编写分析算法的方向，那么我将非常感激！
该算法的基本思想是使用预处理步骤找到所有边缘，然后根据边缘的形状选择正确的平滑瓦片。
第一步是找到所有边。在下面的示例中，标有 X 的边缘瓦片都是绿色瓦片，棕褐色瓦片是其八个相邻瓦片中的一个或多个。对于不同类型的地形，如果该图块具有较低地形数的邻居，则此条件可能会转化为边缘图块。
https://i.stack.imgur.com/X4Kyx.png
一旦检测到所有边缘图块，接下来要做的就是为每个边缘图块选择正确的平滑图块。这是我对您的平滑瓷砖的表示。
https://i.stack.imgur.com/0VXxS.png
请注意，实际上没有那么多不同类型的瓷砖。我们需要 3x3 方格中的一个方格中的 8 个外部方格，但只需要另一个方格中的四个角方格，因为在第一个方格中已经找到了直边方格。这意味着我们必须区分总共 12 种不同的情况。
现在，查看一个边缘图块，我们可以通过查看其最近的四个相邻图块来确定边界转向的方向。像上面一样用 X 标记边缘瓦片，我们有以下六种不同的情况。
https://i.stack.imgur.com/BRgLf.png
这些情况用于确定相应的平滑图块，我们可以相应地对平滑图块进行编号。
https://i.stack.imgur.com/qGuxN.png
对于每种情况，仍然可以选择 a 或 b。这取决于草在哪一侧。确定这一点的一种方法可能是跟踪边界的方向，但可能最简单的方法是在边缘旁边选择一个图块并查看它的颜色。下图显示了两种情况 5a) 和 5b) 可以通过例如检查右上角的瓷砖的颜色来区分。
https://i.stack.imgur.com/3sgIZ.png
原始示例的最终枚举将如下所示。
https://i.stack.imgur.com/oniTS.png
选择相应的边缘图块后，边框看起来像这样。
https://i.stack.imgur.com/fYBDR.png
作为最后一点，我可能会说只要边界有点规则，这将起作用。更准确地说，没有恰好两个边缘瓦片作为它们的邻居的边缘瓦片将不得不分开处理。这将发生在地图边缘的边缘瓦片上，它将有一个边缘邻居，并且对于非常狭窄的地形，其中相邻边缘瓦片的数量可能是三个甚至四个。
下面的方块代表一块金属板。右上角有一个“散热孔”。我们可以看到，随着该点的温度保持恒定，金属板在每个点处收敛到恒定温度，靠近顶部自然会变热：
https://i.stack.imgur.com/PxYvL.png
求各点温度的问题可以用“边值问题”来解决。然而，计算每个点的热量的最简单方法是将板建模为网格。我们知道恒温下网格上的点。我们将所有未知点的温度设置为室温（就好像通风口刚刚打开一样）。然后我们让热量通过板扩散，直到我们达到收敛。这是通过迭代完成的：我们迭代每个 (i,j) 点。我们设置 point(i,j) = (point(i+1, j)+point(i-1,j)+point(i, j+1)+point(i,j-1))/4 [除非点（i，j）有一个恒温的散热孔]
如果您将此应用于您的问题，它非常相似，只是平均颜色而不是温度。您可能需要大约 5 次迭代。我建议使用 400x400 网格。那就是 400x400x5 = 少于 100 万次迭代，这将很快。如果您只使用 5 次迭代，您可能不需要担心保持任何点的颜色不变，因为它们不会从原来的位置偏移太多（实际上只有距离颜色 5 以内的点会受到颜色的影响）。伪代码：
iterations = 5
for iteration in range(iterations):
for i in range(400):
for j in range(400):
try:
grid[i][j] = average(grid[i+1][j], grid[i-1][j],
grid[i][j+1], grid[i][j+1])
except IndexError:
pass
好的，所以首先的想法是自动解决问题的完美解决方案需要一些相当丰富的插值数学。基于您提到预渲染平铺图像的事实，我认为这里不保证完整的插值解决方案。
另一方面，正如您所说，手动完成地图将带来良好的结果......但我也认为任何修复故障的手动过程也不是一种选择。
这是一个简单的算法，它不会给出完美的结果，但基于它所付出的努力，这是非常有益的。
而不是尝试混合每个边缘瓦片，（这意味着您需要先知道混合相邻瓦片的结果 - 插值，或者您需要多次细化整个地图并且不能依赖预先生成的瓦片）为什么不以交替的棋盘图案混合瓷砖？
[1] [*] [2]
[*] [1] [*]
[1] [*] [2]
即只混合上面矩阵中加星标的瓷砖？
假设唯一允许的价值步骤是一次一个，你只有几个瓷砖要设计......
A [1] B [2] C [1] D [2] E [1]
[1] [*] [1] [1] [*] [1] [1] [*] [2] [1] [*] [2] [1] [*] [1] etc.
[1] [1] [1] [1] [2]
总共将有16种模式。如果您利用旋转和反射对称性，那么将会更少。
'A' 将是一个普通的 [1] 样式图块。 'D' 将是对角线。
瓷砖的角落会有小的不连续性，但与您给出的示例相比，这些不连续性很小。
如果可以的话，我稍后会用图片更新这篇文章。
我正在玩类似的东西，由于多种原因没有完成；但基本上它需要一个 0 和 1 的矩阵，0 是地面，1 是墙，用于 Flash 中的迷宫生成器应用程序。由于 AS3 类似于 JavaScript，因此用 JS 重写并不难。
var tileDimension:int = 20;
var levelNum:Array = new Array();
levelNum[0] = [1, 1, 1, 1, 1, 1, 1, 1, 1];
levelNum[1] = [1, 0, 0, 0, 0, 0, 0, 0, 1];
levelNum[2] = [1, 0, 1, 1, 1, 0, 1, 0, 1];
levelNum[3] = [1, 0, 1, 0, 1, 0, 1, 0, 1];
levelNum[4] = [1, 0, 1, 0, 0, 0, 1, 0, 1];
levelNum[5] = [1, 0, 0, 0, 0, 0, 0, 0, 1];
levelNum[6] = [1, 0, 1, 1, 1, 1, 0, 0, 1];
levelNum[7] = [1, 0, 0, 0, 0, 0, 0, 0, 1];
levelNum[8] = [1, 1, 1, 1, 1, 1, 1, 1, 1];
for (var rows:int = 0; rows < levelNum.length; rows++)
{
for (var cols:int = 0; cols < levelNum[rows].length; cols++)
{
// set up neighbours
var toprow:int = rows - 1;
var bottomrow:int = rows + 1;
var westN:int = cols - 1;
var eastN:int = cols + 1;
var rightMax = levelNum[rows].length;
var bottomMax = levelNum.length;
var northwestTile = (toprow != -1 && westN != -1) ? levelNum[toprow][westN] : 1;
var northTile = (toprow != -1) ? levelNum[toprow][cols] : 1;
var northeastTile = (toprow != -1 && eastN < rightMax) ? levelNum[toprow][eastN] : 1;
var westTile = (cols != 0) ? levelNum[rows][westN] : 1;
var thistile = levelNum[rows][cols];
var eastTile = (eastN == rightMax) ? 1 : levelNum[rows][eastN];
var southwestTile = (bottomrow != bottomMax && westN != -1) ? levelNum[bottomrow][westN] : 1;
var southTile = (bottomrow != bottomMax) ? levelNum[bottomrow][cols] : 1;
var southeastTile = (bottomrow != bottomMax && eastN < rightMax) ? levelNum[bottomrow][eastN] : 1;
if (thistile == 1)
{
var w7:Wall7 = new Wall7();
addChild(w7);
pushTile(w7, cols, rows, 0);
// wall 2 corners
if (northTile === 0 && northeastTile === 0 && eastTile === 1 && southeastTile === 1 && southTile === 1 && southwestTile === 0 && westTile === 0 && northwestTile === 0)
{
var w21:Wall2 = new Wall2();
addChild(w21);
pushTile(w21, cols, rows, 270);
}
else if (northTile === 0 && northeastTile === 0 && eastTile === 0 && southeastTile === 0 && southTile === 1 && southwestTile === 1 && westTile === 1 && northwestTile === 0)
{
var w22:Wall2 = new Wall2();
addChild(w22);
pushTile(w22, cols, rows, 0);
}
else if (northTile === 1 && northeastTile === 0 && eastTile === 0 && southeastTile === 0 && southTile === 0 && southwestTile === 0 && westTile === 1 && northwestTile === 1)
{
var w23:Wall2 = new Wall2();
addChild(w23);
pushTile(w23, cols, rows, 90);
}
else if (northTile === 1 && northeastTile === 1 && eastTile === 1 && southeastTile === 0 && southTile === 0 && southwestTile === 0 && westTile === 0 && northwestTile === 0)
{
var w24:Wall2 = new Wall2();
addChild(w24);
pushTile(w24, cols, rows, 180);
}
// wall 6 corners
else if (northTile === 1 && northeastTile === 1 && eastTile === 1 && southeastTile === 0 && southTile === 1 && southwestTile === 1 && westTile === 1 && northwestTile === 1)
{
var w61:Wall6 = new Wall6();
addChild(w61);
pushTile(w61, cols, rows, 0);
}
else if (northTile === 1 && northeastTile === 1 && eastTile === 1 && southeastTile === 1 && southTile === 1 && southwestTile === 0 && westTile === 1 && northwestTile === 1)
{
var w62:Wall6 = new Wall6();
addChild(w62);
pushTile(w62, cols, rows, 90);
}
else if (northTile === 1 && northeastTile === 1 && eastTile === 1 && southeastTile === 1 && southTile === 1 && southwestTile === 1 && westTile === 1 && northwestTile === 0)
{
var w63:Wall6 = new Wall6();
addChild(w63);
pushTile(w63, cols, rows, 180);
}
else if (northTile === 1 && northeastTile === 0 && eastTile === 1 && southeastTile === 1 && southTile === 1 && southwestTile === 1 && westTile === 1 && northwestTile === 1)
{
var w64:Wall6 = new Wall6();
addChild(w64);
pushTile(w64, cols, rows, 270);
}
// single wall tile
else if (northTile === 0 && northeastTile === 0 && eastTile === 0 && southeastTile === 0 && southTile === 0 && southwestTile === 0 && westTile === 0 && northwestTile === 0)
{
var w5:Wall5 = new Wall5();
addChild(w5);
pushTile(w5, cols, rows, 0);
}
// wall 3 walls
else if (northTile === 0 && eastTile === 1 && southTile === 0 && westTile === 1)
{
var w3:Wall3 = new Wall3();
addChild(w3);
pushTile(w3, cols, rows, 0);
}
else if (northTile === 1 && eastTile === 0 && southTile === 1 && westTile === 0)
{
var w31:Wall3 = new Wall3();
addChild(w31);
pushTile(w31, cols, rows, 90);
}
// wall 4 walls
else if (northTile === 0 && eastTile === 0 && southTile === 1 && westTile === 0)
{
var w41:Wall4 = new Wall4();
addChild(w41);
pushTile(w41, cols, rows, 0);
}
else if (northTile === 1 && eastTile === 0 && southTile === 0 && westTile === 0)
{
var w42:Wall4 = new Wall4();
addChild(w42);
pushTile(w42, cols, rows, 180);
}
else if (northTile === 0 && northeastTile === 0 && eastTile === 1 && southeastTile === 0 && southTile === 0 && southwestTile === 0 && westTile === 0 && northwestTile === 0)
{
var w43:Wall4 = new Wall4();
addChild(w43);
pushTile(w43, cols, rows, 270);
}
else if (northTile === 0 && northeastTile === 0 && eastTile === 0 && southeastTile === 0 && southTile === 0 && southwestTile === 0 && westTile === 1 && northwestTile === 0)
{
var w44:Wall4 = new Wall4();
addChild(w44);
pushTile(w44, cols, rows, 90);
}
// regular wall blocks
else if (northTile === 1 && eastTile === 0 && southTile === 1 && westTile === 1)
{
var w11:Wall1 = new Wall1();
addChild(w11);
pushTile(w11, cols, rows, 90);
}
else if (northTile === 1 && eastTile === 1 && southTile === 1 && westTile === 0)
{
var w12:Wall1 = new Wall1();
addChild(w12);
pushTile(w12, cols, rows, 270);
}
else if (northTile === 0 && eastTile === 1 && southTile === 1 && westTile === 1)
{
var w13:Wall1 = new Wall1();
addChild(w13);
pushTile(w13, cols, rows, 0);
}
else if (northTile === 1 && eastTile === 1 && southTile === 0 && westTile === 1)
{
var w14:Wall1 = new Wall1();
addChild(w14);
pushTile(w14, cols, rows, 180);
}
}
// debug === // trace('Top Left: ' + northwestTile + ' Top Middle: ' + northTile + ' Top Right: ' + northeastTile + ' Middle Left: ' + westTile + ' This: ' + levelNum[rows][cols] + ' Middle Right: ' + eastTile + ' Bottom Left: ' + southwestTile + ' Bottom Middle: ' + southTile + ' Bottom Right: ' + southeastTile);
}
}
function pushTile(til:Object, tx:uint, ty:uint, degrees:uint):void
{
til.x = tx * tileDimension;
til.y = ty * tileDimension;
if (degrees != 0) tileRotate(til, degrees);
}
function tileRotate(tile:Object, degrees:uint):void
{
// http://www.flash-db.com/Board/index.php?topic=18625.0
var midPoint:int = tileDimension/2;
var point:Point=new Point(tile.x+midPoint, tile.y+midPoint);
var m:Matrix=tile.transform.matrix;
m.tx -= point.x;
m.ty -= point.y;
m.rotate (degrees*(Math.PI/180));
m.tx += point.x;
m.ty += point.y;
tile.transform.matrix=m;
}
基本上，这会检查它周围的每个图块，从左到右，从上到下，并假设边缘图块始终为 1。我还冒昧地将图像导出为文件以用作键：
https://i.stack.imgur.com/RXnAq.png
这是不完整的，可能是实现此目的的一种hacky方式，但我认为它可能会有一些好处。
编辑：该代码结果的屏幕截图。
https://i.stack.imgur.com/PjOPB.png
我建议几点：
“中心”瓷砖是什么并不重要，对吧？它可能是 2，但如果所有其他都是 1，它会显示 1？
当顶部或侧面的直接邻居存在差异时，只有角落是什么才重要。如果所有直接邻居都是 1，而一个角是 2，它将显示 1。
我可能会预先计算所有可能的邻居组合，创建一个 8 索引数组，前四个指示顶部/底部邻居的值，第二个指示对角线：
边缘[N][E][S][W][NE][SE][SW][NW] = 到精灵的任何偏移量
所以在你的情况下， [2][2][1][1][2][2][1][1] = 4 （第 5 个精灵）。
在这种情况下，[1][1][1][1] 将是 1，[2][2][2][2] 将是 2，其余的都必须计算出来。但是对特定图块的查找将是微不足道的。
关注公众号
不定期副业成功案例分享
