Magpie缩放游戏窗口时如何保持画面比例不畸变？

Question

在使用Magpie框架调整游戏窗口大小时，如何保持画面比例不发生畸变是一个常见问题。当窗口尺寸改变时，如果直接拉伸画布以适配新尺寸，可能会导致图像被挤压或拉长，破坏原始画面比例。为避免这种情况，可以通过计算窗口宽高比与游戏画布宽高比的差异，动态调整视口（Viewport）大小和位置。具体实现中，可以采用“黑边模式”（Letterbox或Pillarbox），即在窗口尺寸变化时，通过在两侧或上下添加黑色填充区域来维持原有比例，而不是强行拉伸图像。此外，确保相机投影矩阵正确更新也至关重要，这样能保证渲染内容始终以正确的比例显示。这种技术方案既简单又高效，广泛应用于各类2D和3D游戏中。

Answer 1

1. 问题概述

在使用Magpie框架开发游戏时，调整窗口大小是一个常见的需求。然而，直接拉伸画布以适配新尺寸可能会导致图像比例失真，表现为画面被挤压或拉长。这种现象破坏了原始的画面比例，影响玩家的视觉体验。

为解决这一问题，我们需要通过计算窗口宽高比与游戏画布宽高比的差异，动态调整视口（Viewport）的大小和位置。以下是实现这一目标的具体步骤和注意事项：

2. 技术分析

为了保持画面比例不发生畸变，可以采用“黑边模式”（Letterbox或Pillarbox）。这种方法的核心思想是通过在窗口两侧或上下添加黑色填充区域来维持原有的画面比例，而不是强行拉伸图像。

• Letterbox模式：当窗口宽高比较宽时，在上下添加黑色填充区域。
• Pillarbox模式：当窗口宽高比较窄时，在左右添加黑色填充区域。

此外，确保相机投影矩阵正确更新也是关键。这一步骤能够保证渲染内容始终以正确的比例显示。

3. 实现步骤

1. 计算宽高比：首先获取当前窗口的宽度和高度，并计算其宽高比（AspectRatio = Width / Height）。
2. 比较宽高比：将窗口宽高比与游戏画布的宽高比进行比较，确定需要应用Letterbox还是Pillarbox模式。
3. 调整视口：根据宽高比差异，重新设置视口的大小和位置。
4. 更新投影矩阵：确保相机的投影矩阵反映新的视口变化。

以下是具体代码示例：

function adjustViewport(windowWidth, windowHeight, gameCanvasAspectRatio)
    local windowAspectRatio = windowWidth / windowHeight
    local viewportX, viewportY = 0, 0
    local viewportWidth, viewportHeight = windowWidth, windowHeight

    if windowAspectRatio > gameCanvasAspectRatio then
        -- Letterbox mode: Add black bars on top and bottom
        local scale = gameCanvasAspectRatio / windowAspectRatio
        viewportHeight = math.floor(windowHeight * scale)
        viewportY = math.floor((windowHeight - viewportHeight) / 2)
    elseif windowAspectRatio < gameCanvasAspectRatio then
        -- Pillarbox mode: Add black bars on left and right
        local scale = windowAspectRatio / gameCanvasAspectRatio
        viewportWidth = math.floor(windowWidth * scale)
        viewportX = math.floor((windowWidth - viewportWidth) / 2)
    end

    love.graphics.setScissor(viewportX, viewportY, viewportWidth, viewportHeight)
end

4. 解决方案验证

为了验证解决方案的有效性，可以通过以下测试用例进行验证：

窗口宽度	窗口高度	游戏画布宽高比	预期结果
1920	1080	16:9	无黑边，画面正常显示
1280	720	16:9	无黑边，画面正常显示
800	600	16:9	Pillarbox模式，左右有黑边
2560	1080	16:9	Letterbox模式，上下有黑边

以上测试结果表明，该方案能够有效应对不同窗口尺寸下的画面比例问题。

5. 流程图说明

以下是整个流程的Mermaid格式流程图：

graph TD;
            A[开始] --> B{窗口宽高比 > 游戏画布宽高比?};
            B --是--> C[Letterbox模式];
            B --否--> D{窗口宽高比 < 游戏画布宽高比?};
            D --是--> E[Pillarbox模式];
            D --否--> F[无黑边模式];
            C --> G[更新视口];
            E --> G;
            F --> G;
            G --> H[结束];