竖屏模式 — 最近最有成就感的一次开发

灵光一现

我想持续上传游戏宣传内容。把实机画面剪成 Shorts 格式是个不错的方向——但游戏本身是横屏的。就在这时，一个想法突然冒出来：直接在游戏里加一个竖屏模式呢？

Shorts 的版面特性

Shorts 主要在手机上消费。在 PC 端，整个画面都能完整显示；但在手机端，屏幕下方会被点赞、评论等 UI 元素遮挡。

我的游戏对话系统就在屏幕下方。这意味着最重要的内容恰好会被挡住——对 Shorts 来说是个不小的劣势。

解决方案：SubViewport

Godot 的 SubViewport 给出了答案。

借助 SubViewport，可以在主游戏画面的上下方放置不同的内容，相当于在 16:9 的游戏画面外套上一个 9:16 的框架。空出来的区域我没有留白，而是放上了符文密码的 Logo 和游戏画面截图。

比例问题依然存在

但还有一个问题没解决。游戏基于 16:9 设计，如果强行拉伸去填满竖向空间，比例就会变形，显示效果完全不对。

从 Web 开发借来的思路

答案来自 Web 的响应式设计。

我没有强行拉伸，而是根据竖向比例重新构建了整套 UI。虽然和桌面端不是像素级别的一致，但游戏想传达的内容都能完整呈现。战斗界面尤其有意思——原本横向排列的技能卡牌改成上下排列后，反而产生了一种独特的视觉魅力。

值得付出的努力

竖屏模式现在已经正式运行了。游戏实机 Shorts 在持续更新，竖向版面的效果也经得住考验。

这是我最近做过最有成就感的功能。一个想法打开了推广游戏的全新方式——过程中，也让我成长了不少。