縦画面モード — 最近で一番達成感があった作業

ひらめきの瞬間

継続的にプロモーション動画を上げたいと思っていました。ゲームプレイをショート動画として投稿するのが自然な流れだと感じていたのですが、ゲームは横画面です。そこでふと思いつきました。ゲーム自体に縦画面モードを追加すればいいんじゃないか、と。

ショート動画の特性

ショートは主にスマートフォンで視聴されます。PC では画面全体が表示されますが、スマホではいいねボタンやコメントなどのUIが下部を大きく覆います。

私のゲームはダイアログシステムが画面下部に配置されています。ショートで投稿したとき、最も重要なコンテンツがちょうど隠れてしまう構造でした。

解決策：SubViewport

Godot の SubViewport が答えでした。

SubViewport を使えば、メインのゲーム画面の上下に別のコンテンツを配置できます。16:9 のゲームプレイを 9:16 のフレームに自然に収めることができるのです。空いたスペースは空白にせず、タリスマンコードのロゴとゲームプレイ画像で埋めました。

比率の問題は残った

しかしまだ問題がありました。ゲーム自体が 16:9 ベースで設計されているため、縦のスペースを無理に埋めると比率が崩れ、まともに表示できませんでした。

Web 開発から持ってきたアイデア

解決策は Web のレスポンシブデザインから来ました。

無理に伸ばすのではなく、縦のフォーマットに合わせて UI を最初から組み直しました。デスクトップ版とピクセル単位で同じではありませんが、ゲームが伝えたい内容はすべて表現できています。特にバトル画面が面白くて、横並びだったスキルカードを縦に配置したら、それはそれで独自の魅力が生まれました。

やった価値があった

縦画面モードは今や実際に動いています。ゲームプレイのショートを定期的に上げながら反応を見て、フィードバックをもとにゲームを改善し続けていく予定です。

最近の作業の中で、これが一番達成感がありました。一つのアイデアがゲームを紹介する全く新しい方法を開いてくれて、その過程で開発者としても多くを学べました。