如何实现游戏地图瓦片的圆柱形无缝横向环绕滚动效果？

你当前的问题核心是两点：一是xcam的环绕归一化逻辑不正确，二是没有为横向环绕场景渲染冗余的偏移瓦片，导致边界处缺少过渡内容，可按照以下方案调整：

1. 修正xcam归一化逻辑 #

你的全地图横向总宽度为5400像素（两张2700宽的半球子图拼接），首先需要将xcam始终归一化到[0, 5400)的区间，避免出现负数或超出范围的数值，公式如下：

// 每次移动后执行归一化，move_delta_x为本次相机横向移动的像素值
xcam = (xcam + move_delta_x) % 5400
if xcam < 0:
    xcam += 5400

2. 新增环绕偏移瓦片渲染逻辑 #

不要仅渲染当前区间的2个横向瓦片，需要同时生成偏移-5400、0、+5400的三组瓦片副本，仅渲染和相机视口存在交集的副本即可，完整逻辑如下：

// 定义常量
const MAP_WIDTH = 5400 // 横向环绕一周的总像素宽度
const CAM_W = 480
const CAM_H = 360
// 瓦片基础偏移（你可以自行补充另外两个南北半球瓦片的参数）
const tileList = [
  {name: 'tile1', baseX: -1350, baseY: 650, w: 2700, h: 2700},
  {name: 'tile2', baseX: 1350, baseY: 650, w: 2700, h: 2700}
]
// 三个环绕偏移量，覆盖左右边界的过渡场景
const wrapOffsets = [-MAP_WIDTH, 0, MAP_WIDTH]

// 每帧计算瓦片位置并判断是否渲染
tileList.forEach(tile => {
  wrapOffsets.forEach(offset => {
    const renderX = tile.baseX + xcam + offset
    const renderY = tile.baseY + ycam
    // 判断瓦片和相机视口（固定为0,0到480,360）是否存在交集
    const hasIntersection = !(
      renderX > CAM_W ||
      renderX + tile.w < 0 ||
      renderY > CAM_H ||
      renderY + tile.h < 0
    )
    if (hasIntersection) {
      // 渲染对应瓦片到(renderX, renderY)位置
      renderTile(tile.name, renderX, renderY)
    }
  })
})

原理说明 #

你之前仅渲染了偏移为0的两个瓦片，当xcam小于相机半宽240时，视口左半部分已经进入了负坐标区间，这个区间对应环绕后5160~5400的地图内容，需要显示偏移+5400的左瓦片才能和当前右瓦片无缝拼接。新增三组偏移瓦片后，边界处的过渡内容会自动渲染，不会再出现跳变问题。

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