JavaScript瓦片引擎游戏：固定像素移动卡顿问题排查

问题背景 #

我用JavaScript开发自定义小型瓦片引擎游戏，渲染循环采用requestAnimationFrame，更新循环固定为60次/秒ticks。显示器刷新率为240fps，更新间隔与渲染间隔存在差异。

当前实现玩家精确移动一格瓦片的逻辑：输入触发时计算目标位置（当前位置+瓦片宽度），在当前位置与目标位置间做补间动画，但玩家位于屏幕中央时移动会非常卡顿。不确定问题出在固定更新循环、相机代码还是玩家移动补间逻辑中。

相关代码片段 #

固定更新循环

const TICK_RATE = 60;
let lastTick = performance.now();
let accumulator = 0;

function gameLoop(timestamp) {
  const delta = timestamp - lastTick;
  lastTick = timestamp;
  accumulator += delta;

  const tickMs = 1000 / TICK_RATE;
  while (accumulator >= tickMs) {
    update(tickMs / 1000);
    accumulator -= tickMs;
  }

  render(accumulator / tickMs);
  requestAnimationFrame(gameLoop);
}

function update(deltaTime) {
  if (player.isMoving) {
    player.moveProgress += deltaTime * 5; // 假设移动速度为5格/秒
    player.moveProgress = Math.min(player.moveProgress, 1);
    // 直接在更新里计算位置
    player.x = player.startX + (player.targetX - player.startX) * player.moveProgress;
    if (player.moveProgress >= 1) {
      player.isMoving = false;
      player.x = player.targetX;
    }
  }
}

相机渲染逻辑

function render(interpolation) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 相机保持玩家在屏幕中央
  const cameraX = canvas.width / 2 - player.x;
  const cameraY = canvas.height / 2 - player.y;

  ctx.save();
  ctx.translate(cameraX, cameraY);
  
  // 绘制瓦片地图
  drawTiles(ctx);
  // 绘制玩家
  ctx.fillRect(player.x - 16, player.y - 16, 32, 32); // 假设玩家大小32x32
  
  ctx.restore();
}

问题原因分析 #

卡顿的核心原因是240fps渲染循环与60ticks更新循环的不同步，加上当前逻辑没有在渲染阶段应用插值：

1. 每4个渲染帧才会有1次更新，导致中间3帧显示的是同一个玩家位置，视觉上出现跳变卡顿
2. 相机跟随玩家时，若玩家位置在更新中是步进式变化，高刷新率屏幕会放大这种不连贯
3. 补间逻辑仅在更新tick中计算，没有利用渲染帧的插值因子来平滑过渡

解决方案 #

1. 分离更新状态与渲染插值

在更新阶段只记录玩家的真实状态，渲染阶段利用accumulator / tickMs的插值因子，在当前状态和上一次状态之间做插值，实现亚像素级平滑：

// 新增变量存储上一次更新的玩家位置
let prevPlayerX = 0;

function update(deltaTime) {
  prevPlayerX = player.x; // 记录更新前的位置
  if (player.isMoving) {
    player.moveProgress += deltaTime * 5;
    player.moveProgress = Math.min(player.moveProgress, 1);
    player.x = player.startX + (player.targetX - player.startX) * player.moveProgress;
    if (player.moveProgress >= 1) {
      player.isMoving = false;
      player.x = player.targetX;
    }
  }
}

function render(interpolation) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 插值计算玩家的渲染位置
  const renderX = prevPlayerX + (player.x - prevPlayerX) * interpolation;
  const cameraX = canvas.width / 2 - renderX;
  const cameraY = canvas.height / 2 - player.y;

  ctx.save();
  ctx.translate(cameraX, cameraY);
  
  drawTiles(ctx);
  ctx.fillRect(renderX - 16, player.y - 16, 32, 32);
  
  ctx.restore();
}

2. 优化补间逻辑的时间计算

用固定移动时长替代速度乘以tick增量，确保移动速度在不同帧率下一致，避免时间计算误差：

// 记录移动开始时间
function startPlayerMove(direction) {
  if (player.isMoving) return;
  player.isMoving = true;
  player.startX = player.x;
  player.targetX = player.x + direction * tileSize;
  player.moveStartTime = performance.now();
  player.moveDuration = 200; // 移动一格耗时200ms，固定时长更可控
}

function update(deltaTime) {
  prevPlayerX = player.x;
  if (player.isMoving) {
    const elapsed = performance.now() - player.moveStartTime;
    player.moveProgress = Math.min(elapsed / player.moveDuration, 1);
    player.x = player.startX + (player.targetX - player.startX) * player.moveProgress;
    if (player.moveProgress >= 1) {
      player.isMoving = false;
      player.x = player.targetX;
    }
  }
}

3. 避免相机坐标取整

确保相机和玩家的渲染坐标保持浮点精度，不要强制取整，否则高刷新率下会出现像素抖动：

// 错误示例：不要做取整
// const cameraX = Math.floor(canvas.width / 2 - renderX);
// 正确做法：直接使用浮点值
const cameraX = canvas.width / 2 - renderX;

问题现象 #

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