如何用大菱形平移法绘制带遮挡的受限大型等距地图？

核心思路 #

用一个尺寸大于视口的菱形根容器，仅在容器内渲染视口可见范围内+少量缓冲区域的瓦片，通过调整容器的屏幕坐标实现相机位移，既避免整图渲染的内存爆炸，也不用逐帧全量渲染所有瓦片。

关键参数定义 #

先明确几个基础变量：

• tileW：瓦片宽度，tileH：瓦片高度（按2:1比例设置，比如tileW=64，tileH=32）
• mapCols：场景逻辑x轴方向总瓦片数（500），mapRows：场景逻辑y轴方向总瓦片数（500）
• viewW：屏幕视口宽度，viewH：屏幕视口高度
• camX：相机逻辑x坐标，camY：相机逻辑y坐标——对应场景中相机聚焦的逻辑点

屏幕坐标与逻辑坐标转换 #

等距投影下，逻辑坐标(logX, logY)转屏幕坐标(screenX, screenY)的公式（屏幕原点在左上角）：

screenX = (logX - logY) * tileW/2
screenY = (logX + logY) * tileH/2

反向转换（屏幕坐标转逻辑坐标）：

logX = (screenX/tileW) + (screenY/tileH)
logY = (screenY/tileH) - (screenX/tileW)

菱形容器的尺寸与平移计算 #

1. 容器尺寸确定：
   容器宽度设为viewW + tileW*2，高度设为viewH + tileH*2——额外的尺寸作为缓冲区域，避免相机移动时边缘瓦片突然消失。
2. 容器的屏幕位置计算：
   先将相机逻辑坐标(camX, camY)转换为屏幕坐标(camScreenX, camScreenY)，再让容器中心与相机屏幕坐标对齐，偏移视口中心位置得到容器的屏幕坐标：

   containerX = camScreenX - viewW/2
   containerY = camScreenY - viewH/2
   

   容器会随相机移动同步平移，始终覆盖视口+缓冲区域。

视口内瓦片的筛选与渲染 #

1. 计算视口对应的逻辑坐标范围：
   取视口四个角的屏幕坐标，转换为逻辑坐标后，得到逻辑x、y的最小/最大值：
   • 视口左上角(0,0)→logX1, logY1
   • 视口右下角(viewW, viewH)→logX2, logY2
   • 逻辑x范围：minLogX = floor(min(logX1, logX2)) - 1，maxLogX = ceil(max(logX1, logX2)) + 1
   • 逻辑y范围：minLogY = floor(min(logY1, logY2)) - 1，maxLogY = ceil(max(logY1, logY2)) + 1
     （减1、加1是为了覆盖缓冲区域的瓦片，避免画面断层）
2. 遍历并渲染范围内的瓦片：
   循环遍历logX从minLogX到maxLogX，logY从minLogY到maxLogY：
   • 先判断logX、logY是否在场景有效范围内（0 ≤ logX < mapCols且0 ≤ logY < mapRows）
   • 若有效，计算该瓦片的屏幕坐标，渲染到容器内对应位置

优化细节 #

• 瓦片缓存：将已渲染的瓦片以(logX, logY)为key存入缓存字典，避免重复绘制相同瓦片
• 容器裁剪：开启容器的裁剪功能，只渲染容器内的内容，丢弃超出部分，减少无效渲染操作
• 平滑位移：若相机是平滑移动，对containerX、containerY使用插值更新，避免画面抖动

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