时间戳

首页 > 解决方案 > 我如何计算相邻的瓦片以生成 2D 瓦片地图数组的边和角？

javascript - 我如何计算相邻的瓦片以生成 2D 瓦片地图数组的边和角？

问题描述

我有一种从 SimpleX Noise 生成 2D 岛屿地图的简单方法，但是它留下了一个更大的问题。它运作良好，但会留下尖角。

2D 平铺地图上的尖角

我想做的是接受这个并计算邻居来为边缘和角落添加正确的瓷砖，但我不知道如何添加它。计算这个的最佳方法是什么？

generateMap()
{
    let outputMap = [];

    for(let y = 0; y < this.tileCount; y++)
    {
        outputMap[y] = [];
        for(let x = 0; x < this.tileCount; x++)
        {
            let nx = x / this.tileCount - 0.5, ny = y / this.tileCount - 0.5;
            let e = 1 + +Math.abs(this.heightMapGen.noise2D(1 * nx, 1 * ny));
            e += 0.5 + +Math.abs(this.heightMapGen.noise2D(2 * nx, 2 * ny));  
            e += 0.25 + +Math.abs(this.heightMapGen.noise2D(4 * nx, 4 * ny));  


            let output = (Math.pow(e, 0.21) % 1).toFixed(2).split(".");
            outputMap[y][x] = parseFloat(output[1]);

            if (outputMap[y][x] <= 25)
            {
                outputMap[y][x] = 0; // Water //
            } else {
                // Terrain //
                switch(outputMap[y][x])
                {
                    case 28:
                    case 29:
                        outputMap[y][x] = 2;
                    break;                        
                    case 27:
                        outputMap[y][x] = 1;
                    break;
                    case 26:
                        outputMap[y][x] = 4;
                    break;
                    default:
                        outputMap[y][x] = 3;
                }                
            }  
        }
    }

    return outputMap;
}

标签： javascriptprocedural-generation

解决方案

确定那些黄色（沙子？）边缘瓷砖的位置，外角有 4 个，内角有 4 个。

+-->  +-----------+  <---+ corner tile (one case)
      |         |_|  
      |    land   |  sea here
      |    here   |
      |           |
      |           |
+-->  +-----------+  <----+

4 external corners (sea shore, beach)


      +-----------+
      | land here |
+-------> +---+ <-------+
      |   |wat|   |
      |   |er |   |
+-------> +---+ <-------+
      |           |
      +-----------+

4 potential internal corners (lake shore or pond edge)

要确定在哪种情况下您正在查看单元格邻居（是水吗？在哪个方向......）。对于这些情况，要么使用 8 个特定的图块（参见经典图块集），要么您可以在 Alpha 通道上使用透明效果。正如您在tileset 示例中看到的那样，可能存在更多情况：只有一个水单元，只有两个有水的单元......您可以从生成的地图中消除它们以避免它们。

祝你好运。

推荐阅读