直屏模式 — 最近最有成就感的一次開發

靈光一現

我想持續上傳遊戲宣傳內容。把實機畫面剪成 Shorts 格式是個不錯的方向——但遊戲本身是橫屏的。就在這時，一個想法突然冒出來：直接在遊戲裡加一個直屏模式呢？

Shorts 的版面特性

Shorts 主要在手機上消費。在 PC 端，整個畫面都能完整顯示；但在手機端，螢幕下方會被按讚、留言等 UI 元素遮擋。

我的遊戲對話系統就在螢幕下方。這意味著最重要的內容恰好會被擋住——對 Shorts 來說是個不小的劣勢。

解決方案：SubViewport

Godot 的 SubViewport 給出了答案。

借助 SubViewport，可以在主遊戲畫面的上下方放置不同的內容，相當於在 16:9 的遊戲畫面外套上一個 9:16 的框架。空出來的區域我沒有留白，而是放上了符文密碼的 Logo 和遊戲畫面截圖。

比例問題依然存在

但還有一個問題沒解決。遊戲基於 16:9 設計，如果強行拉伸去填滿直向空間，比例就會變形，顯示效果完全不對。

從 Web 開發借來的思路

答案來自 Web 的響應式設計。

我沒有強行拉伸，而是根據直向比例重新構建了整套 UI。雖然和桌面端不是像素級別的一致，但遊戲想傳達的內容都能完整呈現。戰鬥介面尤其有趣——原本橫向排列的技能卡牌改成上下排列後，反而產生了一種獨特的視覺魅力。

值得付出的努力

直屏模式現在已經正式運行了。遊戲實機 Shorts 在持續更新，直向版面的效果也經得住考驗。

這是我最近做過最有成就感的功能。一個想法打開了推廣遊戲的全新方式——過程中，也讓我成長了不少。