Vue3+Canvas俯视角RPG视口相机实现技术咨询

相机跟随的本质是通过绘制偏移量模拟相机移动——不直接移动背景图，而是给所有绘制元素（地图、玩家、其他玩家）的坐标加上偏移量，让本地玩家始终处于视口目标位置，同时保证多玩家同步时用世界坐标传递位置。

1. 定义基础变量 #

在Vue组件中声明核心参数，和现有逻辑兼容：

// 视口尺寸（和Canvas画布大小一致）
const viewportWidth = ref(800);
const viewportHeight = ref(600);
// 本地玩家的世界坐标（WASD控制的原始位置，碰撞检测用这个）
const playerPos = ref({x: 0, y: 0});
// 相机偏移量（所有元素绘制时都要加这个值）
const cameraOffset = ref({x: 0, y: 0});
// 其他玩家的世界坐标（从WebSocket同步）
const otherPlayers = ref([]);

2. 实时计算相机偏移 #

每次玩家位置更新后，计算偏移量让玩家保持在视口中心（或自定义位置）：

function updateCamera() {
  // 核心公式：视口目标位置 - 玩家世界坐标 = 相机偏移量
  // 这里让玩家处于视口中心
  cameraOffset.value.x = viewportWidth.value / 2 - playerPos.value.x;
  cameraOffset.value.y = viewportHeight.value / 2 - playerPos.value.y;

  // 可选：限制偏移，防止视口超出地图边界
  const mapWidth = 2000; // Tiled地图实际宽度（像素）
  const mapHeight = 1500; // Tiled地图实际高度（像素）
  cameraOffset.value.x = Math.max(cameraOffset.value.x, viewportWidth.value - mapWidth);
  cameraOffset.value.x = Math.min(cameraOffset.value.x, 0);
  cameraOffset.value.y = Math.max(cameraOffset.value.y, viewportHeight.value - mapHeight);
  cameraOffset.value.y = Math.min(cameraOffset.value.y, 0);
}

3. 视口绘制逻辑（核心步骤） #

在Canvas渲染函数中，按顺序绘制所有元素，每个元素的绘制坐标都要加上相机偏移量：

function render(ctx) {
  // 清空画布
  ctx.clearRect(0, 0, viewportWidth.value, viewportHeight.value);

  // 绘制地图：地图世界坐标是(0,0)，所以视口坐标 = 0 + 偏移量
  // 性能优化：只绘制视口范围内的地图区域
  ctx.drawImage(
    mapImage,
    -cameraOffset.value.x, -cameraOffset.value.y, // 裁剪地图的起始坐标
    viewportWidth.value, viewportHeight.value, // 裁剪尺寸
    0, 0, // 绘制到画布的起始坐标
    viewportWidth.value, viewportHeight.value // 绘制尺寸
  );

  // 绘制本地玩家：世界坐标 + 偏移量 = 视口坐标
  ctx.drawImage(
    playerImage,
    playerPos.value.x + cameraOffset.value.x,
    playerPos.value.y + cameraOffset.value.y
  );

  // 绘制其他玩家（WebSocket同步的世界坐标直接用）
  otherPlayers.value.forEach(player => {
    ctx.drawImage(
      otherPlayerImage,
      player.x + cameraOffset.value.x,
      player.y + cameraOffset.value.y
    );
  });
}

4. 适配WebSocket多人同步 #

所有玩家的位置传递都用世界坐标，客户端本地计算相机偏移，不同客户端的相机各自跟随自己的玩家：

// WebSocket接收其他玩家位置更新
ws.onmessage = (event) => {
  const data = JSON.parse(event.data);
  if (data.type === 'playerMove') {
    const targetPlayer = otherPlayers.value.find(p => p.id === data.playerId);
    if (targetPlayer) {
      targetPlayer.x = data.x;
      targetPlayer.y = data.y;
    }
  }
};

// 本地玩家移动后，发送世界坐标到服务器
function handlePlayerMove(newX, newY) {
  playerPos.value.x = newX;
  playerPos.value.y = newY;
  updateCamera();
  ws.send(JSON.stringify({
    type: 'playerMove',
    x: newX,
    y: newY
  }));
}

5. 和现有逻辑兼容 #

你的WASD控制、碰撞检测完全不需要改动——这些逻辑都是基于世界坐标的，相机偏移只是视觉层的修正，不影响实际位置计算：

// 现有WASD控制逻辑示例
function handleKeyDown(e) {
  const speed = 5;
  let newX = playerPos.value.x;
  let newY = playerPos.value.y;

  if (e.key === 'w') newY -= speed;
  if (e.key === 's') newY += speed;
  if (e.key === 'a') newX -= speed;
  if (e.key === 'd') newX += speed;

  // 碰撞检测（基于世界坐标）
  if (!checkCollision(newX, newY)) {
    handlePlayerMove(newX, newY);
  }
}

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