javascript - 我如何计算相邻的图 block 以生成 2D 图 block map 阵列的边和 Angular ？

Question

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

我想做的是利用它并计算邻居以添加正确的边缘和 Angular 落瓷砖，但我不确定如何添加它。计算它的最佳方法是什么？

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;
}

Answer 1

确定那些黄色(沙子？)边缘瓷砖的位置，您有 4 个外 Angular 案例和 4 个内 Angular 案例。

+-->  +-----------+  <---+ 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 个特定的图 block (参见 classic tilesets)，或者您可以在 alpha channel 上使用透明效果。正如您在 tileset 示例中看到的那样，可能有更多情况:只有一个单元格有水，只有两个单元格有水......您可以从生成的 map 中消除它们以避免它们。

祝你好运。