Unity技术问询：如何调整2D精灵场景以适配任意屏幕分辨率？

核心思路 #

要实现保持游戏原生16:9比例、通过黑边填充适配非标准屏幕的效果，核心是基于Canvas上下文做正确的缩放与平移计算，步骤如下：

• 定义游戏原生分辨率：先确定你的游戏设计时的基准16:9分辨率（比如1920x1080或1280x720，根据实际情况调整）。
• 计算屏幕适配参数：对比当前屏幕/Canvas的宽高比与16:9的差异，算出合适的缩放比例和内容偏移量，确保游戏内容完整居中显示。
• 绘制黑边与游戏内容：先填充Canvas为黑色，再通过上下文的scale和translate变换，将游戏内容缩放到合适大小并居中绘制。

具体代码实现（以JavaScript Canvas为例） #

假设你的游戏原生基准分辨率是gameWidth = 1280，gameHeight = 720（16:9），以下是关键逻辑：

// 获取Canvas元素和上下文
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// 设置Canvas尺寸为屏幕大小
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  renderGame();
}

function renderGame() {
  // 1. 填充黑边
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 2. 计算缩放比例和偏移量
  const gameAspectRatio = gameWidth / gameHeight; // 16/9 ≈1.777
  const screenAspectRatio = canvas.width / canvas.height;

  let scale, offsetX, offsetY;

  if (screenAspectRatio > gameAspectRatio) {
    // 屏幕比16:9宽，左右留黑边
    scale = canvas.height / gameHeight;
    offsetX = (canvas.width - gameWidth * scale) / 2;
    offsetY = 0;
  } else {
    // 屏幕比16:9高，上下留黑边
    scale = canvas.width / gameWidth;
    offsetX = 0;
    offsetY = (canvas.height - gameHeight * scale) / 2;
  }

  // 3. 变换上下文，居中绘制游戏内容
  ctx.save();
  ctx.translate(offsetX, offsetY);
  ctx.scale(scale, scale);

  // --- 这里绘制你的自定义网格、精灵等游戏内容 ---
  // 比如绘制测试网格：
  drawCustomGrid();
  drawSprites();

  ctx.restore();
}

// 监听窗口大小变化，实时适配
window.addEventListener('resize', resizeCanvas);
// 初始化
resizeCanvas();

关键注意事项 #

• 所有游戏内元素（网格、精灵）的绘制坐标都基于原生基准分辨率，无需额外修改，上下文的变换会自动处理缩放和居中。
• 如果你的游戏有相机跟随逻辑，只需要在drawCustomGrid()等绘制函数中处理相机的平移，和这套适配逻辑互不冲突——因为适配是在最外层做的全局缩放居中。
• 无需依赖pixel-perfect camera：你的需求是保持比例+黑边填充，这套方案直接通过Canvas上下文变换即可实现，完全符合你的需求。

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