如何基于玩家坐标与视口从64x64 tilemap数组提取5x5瓦片数据？

问题描述 #

我有一个表示64x64瓦片地图的数字数组，还有玩家的x、y坐标（以瓦片为单位），以及同样以瓦片为单位的视口。目前我能基于这些数据创建并绘制以玩家为中心的5x5视口瓦片地图，但现在获取layer[]数组时需要遍历整个包含400个元素的地图数组，想问能不能只提取需要的25个（5x5）元素，不用传输整个地图数组？

解决方案 #

当然可以，核心思路是先算出视口覆盖的瓦片范围，再直接提取对应位置的元素，不用遍历整个地图：

• 第一步：计算视口的有效边界
  先根据玩家坐标和5x5视口的大小，算出视口覆盖的瓦片坐标范围，同时要做边界校验，防止超出64x64地图的范围（比如玩家在地图边缘时，不能取到负数坐标或超过63的坐标）：

  • 视口起始x坐标：Math.max(0, 玩家x坐标 - 2)
  • 视口结束x坐标：Math.min(63, 玩家x坐标 + 2)
  • 视口起始y坐标：Math.max(0, 玩家y坐标 - 2)
  • 视口结束y坐标：Math.min(63, 玩家y坐标 + 2)

• 第二步：提取目标瓦片元素
  根据地图数组的存储方式（一维或二维），直接定位并提取元素：

  1. 如果地图是一维数组（常见存储方式，索引公式为索引 = y * 地图宽度 + x）：

     // 假设mapData是存储64x64瓦片的一维数组
     const viewportTiles = [];
     const startX = Math.max(0, playerX - 2);
     const endX = Math.min(63, playerX + 2);
     const startY = Math.max(0, playerY - 2);
     const endY = Math.min(63, playerY + 2);
     
     for (let y = startY; y <= endY; y++) {
       for (let x = startX; x <= endX; x++) {
         const tileIndex = y * 64 + x;
         viewportTiles.push(mapData[tileIndex]);
       }
     }
     

  2. 如果地图是二维数组：

     // 假设mapData是64行64列的二维数组
     const viewportTiles = [];
     const startX = Math.max(0, playerX - 2);
     const endX = Math.min(63, playerX + 2);
     const startY = Math.max(0, playerY - 2);
     const endY = Math.min(63, playerY + 2);
     
     for (let y = startY; y <= endY; y++) {
       // 截取当前行的目标范围瓦片，再合并到结果数组
       const rowTiles = mapData[y].slice(startX, endX + 1);
       viewportTiles.push(...rowTiles);
     }
     

• 可选优化：增量更新视口
  如果玩家移动后，新视口和旧视口大部分区域重叠，你可以只提取新增区域的瓦片，不用每次都重新获取全部25个元素，进一步减少计算开销。

内容的提问来源于stack exchange，提问作者Green Mtn