如何在P5.js中实现玩家居中的俯视视角移动与地图旋转？

核心问题分析 #

1. 方块旋转中心错误：原代码先平移到玩家世界坐标再旋转，导致方块绕世界中的玩家位置旋转，而非屏幕中心的玩家。
2. 移动方向受视角旋转影响：直接基于原始坐标轴的速度计算，会导致视角旋转后WASD方向跟着旋转，不符合预期。

修改后的完整代码 #

Draw函数

let lookAngle = 0;
let mouseSensitivity = 0.001;

function draw() {
  // 先清除画布，确保背景不受坐标系变换影响
  background(180);
  
  // 将坐标系原点移到屏幕中心，并翻转Y轴（适配P5.js的坐标系）
  translate(width/2, height/2); 
  scale(1, -1);
  
  // 更新视角旋转角度
  lookAngle += movedX * mouseSensitivity;
  
  // 绘制世界物体（示例方块）
  push();
  // 绕屏幕中心（玩家位置）旋转坐标系
  rotate(lookAngle);
  // 绘制相对于玩家的偏移位置（100,100），此时方块会绕玩家旋转
  rect(100, 100, 50, 50);
  pop();
  
  // 最后绘制玩家，确保玩家在最上层
  player.update();
}

Player类的update方法

update() {
  let acceleration = 3;
  let maxSpeed = 20;
  let screenXSpeed = 0;
  let screenYSpeed = 0;
  
  // 基于屏幕方向获取输入
  if (keyIsDown(65)) screenXSpeed += acceleration; // 屏幕左
  if (keyIsDown(68)) screenXSpeed -= acceleration; // 屏幕右
  if (keyIsDown(87)) screenYSpeed -= acceleration; // 屏幕上
  if (keyIsDown(83)) screenYSpeed += acceleration; // 屏幕下
  
  // 限制最大速度
  let screenVelocity = createVector(screenXSpeed, screenYSpeed);
  screenVelocity.limit(maxSpeed);
  
  // 将屏幕方向的速度转换为世界坐标系速度（反向旋转视角角度）
  screenVelocity.rotate(-lookAngle);
  
  // 更新玩家的世界坐标
  this.xPosition += screenVelocity.x;
  this.yPosition += screenVelocity.y;
  this.position.set(this.xPosition, this.yPosition);
  
  // 绘制玩家（始终在屏幕中心，因为坐标系已平移到屏幕中心）
  fill(100);
  rect(0, 10, 5, 15);
  fill(255);
  circle(0, 0, 20);
}

关键修改说明 #

• 方块旋转逻辑：移除了translate(player.position)，直接在旋转后的坐标系中绘制相对于玩家的偏移位置，确保旋转中心是屏幕中心的玩家。
• 移动逻辑优化：将输入的屏幕方向速度向量反向旋转视角角度，转换为世界坐标系的速度，保证WASD始终对应屏幕固定方向，不受视角旋转影响。
• 绘制顺序调整：玩家绘制放在最后，避免被世界物体遮挡。

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