Godotの画面サイズ設定を比較｜解像度・Stretch・Aspectの違い

Godotでゲーム制作を始めるとき、最初に決めておきたいものの一つがゲーム画面のサイズです。

横長にするのか、縦長にするのか。さらに、プレイヤーがゲームウィンドウを拡大・縮小したとき、画面をどのように表示するのかも考える必要があります。

今回は、Godotの初期設定にある解像度、ストレッチモード、アスペクトを実際に変更しました。ゲーム画面を大きくしたり小さくしたりして、画像が見切れる、変形する、設定範囲の外側が見えるといった違いを確認しています。

この記事は、各設定を机上で説明するだけではありません。四隅に画像を置いた検証用シーンを作り、設定ごとの表示結果を自分で見比べた記録です。

検証に使用したバージョンはGodot 4.7.2です。実際の操作は約8分45秒の動画にまとめています。

今回確認した初期設定

動画では、主に次の項目を確認しました。

横長画面と縦長画面の基準解像度
ビューポートの幅と高さ
ストレッチモードのdisabled
ストレッチモードのcanvas_items
ストレッチモードのviewport
アスペクトのkeep
アスペクトのignore
アスペクトのexpand
ウィンドウを大小にしたときの見切れ、変形、表示範囲

最終的な設定を一つに決めるというより、各組み合わせで何が起きるのかを自分の目で確認することを目的にしました。

横長ゲームで考えた解像度

横長画面は、主にパソコンやテレビ向けのゲームを想定しました。

動画内で例として挙げた解像度は次の二つです。

1920×1080
1280×720

どちらも16:9の横長です。

ゲーム内で使う背景やUI素材を作るときも、基準となる画面サイズを意識しておく必要がありそうです。画面比率を後から大きく変えると、素材の配置や見せ方も調整し直すことになります。

縦長ゲームで考えた解像度

スマートフォン向けの縦長ゲームでは、横と縦を入れ替えた次のサイズを例にしました。

1080×1920
720×1280

同じ素材を使用していても、横長と縦長では使える空間が大きく違います。

そのため、制作開始時に横長か縦長かを決め、ボタンやスコアなどのUIを画面の端へ寄せすぎないことも大切だと考えました。

実際の端末にはさまざまな画面サイズがあるため、端ぎりぎりに重要な情報を置くと、設定によっては見切れる可能性があります。

検証用に四隅へ画像を配置した

設定の違いを分かりやすくするため、新規プロジェクトの2Dシーンを少し準備しました。

現在のゲーム画面を示す青い枠の四隅へ画像を配置します。四隅に目印があれば、ウィンドウサイズを変更した際に次の違いを確認しやすくなります。

端の画像が見切れていないか
画像が縦や横に変形していないか
本来のゲーム画面より外側が表示されていないか
画面と素材が一緒に拡大・縮小されるか

実行して四隅に画像が表示されることを確認したあと、エディターの表示も「フィットするように引き伸ばす」に変更して検証を進めました。

ビューポートの幅と高さを変更する

画面左上の「プロジェクト」から設定画面を開き、「ウィンドウ」の項目を選択しました。

ビューポートの幅と高さを変更すると、2D画面上でゲーム範囲を示していた青い線が広がりました。実行したゲーム画面も、設定したサイズに合わせて大きくなります。

数字だけを変更するよりも、エディター上の基準範囲が変わる様子を見ると、解像度がゲーム制作領域へ与える影響を理解しやすく感じました。

disabled・keepの状態を確認する

最初に、ストレッチモードがdisabled、アスペクトがkeepの状態で動作を確認しました。

ゲーム実行画面を小さくすると、四隅に配置した画像が見切れました。反対にウィンドウを大きくすると、設定したゲーム領域より外側まで表示されます。

この結果から、異なるサイズの画面で遊んでもらう場合には、そのままでは扱いにくそうだと感じました。

canvas_items・keepを試す

次に、ストレッチモードをcanvas_itemsへ変更しました。

ゲームウィンドウを小さくすると、画面内の素材も一緒に縮小しました。ウィンドウを大きくすると、素材を含めて拡大されます。

少なくとも今回の検証シーンでは、四隅の画像が画面サイズに合わせて追従しているように見え、悪くなさそうな印象でした。

viewport・keepを試す

続いて、ストレッチモードをviewportへ変更しました。

ウィンドウを拡大・縮小して確認したところ、今回の単純なシーンではcanvas_itemsと大きく変わらないように見えました。

ただし、動画のまとめでは、両者の処理の考え方を次のように整理しています。

canvas_items：画面サイズに合わせて拡大し、再描画する
viewport：基準サイズで描画してから拡大する

見た目が似ていても、拡大時の滑らかさや元のゲームらしい表示の保ち方には違いがあると考えています。単純な静止画だけで判断せず、実際のゲームや実機で追加確認したい項目です。

disabled・ignoreを試す

ストレッチモードをdisabledへ戻し、アスペクトをignoreへ変更しました。

結果はdisabled・keepのときと同様に、ウィンドウを大きくすると設定領域の外側が見え、小さくすると画像が見切れました。

今回の検証では、ストレッチが無効な時点で、画面サイズの違いへ対応する用途には向いていないように感じました。

disabled・expandを試す

次に、ストレッチモードをdisabledのまま、アスペクトをexpandへ変更しました。

この組み合わせも、今回のシーンでは期待した調整にはなりませんでした。アスペクトだけでなく、ストレッチモードとの組み合わせが重要だと分かります。

canvas_items・ignoreを試す

ストレッチモードをcanvas_items、アスペクトをignoreにしました。

ゲームウィンドウを小さくしても、四隅の画像は見切れませんでした。ただし、画面の縦横比に合わせて画像が変形します。

ウィンドウを大きくした場合も、設定範囲の外側は見えにくいようでした。

見切れを防げる一方で、キャラクターや円形のUIが縦長・横長に変形してもよいかは、ゲーム内容によって判断する必要があります。

canvas_items・expandを試す

次に、ストレッチモードをcanvas_itemsのまま、アスペクトをexpandへ変更しました。

ゲームウィンドウを小さくすると、画像は変形せずに縮小しました。ただし、基準としていたゲーム画面の外側まで表示されているように見えました。

画像の比率は守りやすいものの、画面が広がった場合に何を表示するかも考える必要がありそうです。

viewport・ignoreを試す

ストレッチモードをviewport、アスペクトをignoreにしました。

今回の検証では、画像が画面の比率に合わせて変形しました。その一方で、基準画面の外側は見えにくいようでした。

ピクセル表現などで描画後の画面全体を拡大したい場合でも、アスペクトを無視すると縦横比が崩れる可能性を意識する必要があります。

viewport・expandを試す

最後に、ストレッチモードをviewportのまま、アスペクトをexpandへ変更しました。

画像は変形せず、ゲームウィンドウに合わせて拡大・縮小されました。ただし、画面の外側も表示されているように見えました。

変形を避けつつ表示範囲を広げる場合は、広がった領域に背景やゲーム要素をどう配置するかも考える必要があります。

実際に比較した結果

今回の検証で見えた傾向をまとめます。

ストレッチ	アスペクト	小さいウィンドウでの見え方	大きいウィンドウでの見え方
disabled	keep	画像が見切れた	基準範囲の外側が見えた
canvas_items	keep	素材ごと縮小した	素材ごと拡大した
viewport	keep	今回はcanvas_itemsと似て見えた	今回はcanvas_itemsと似て見えた
disabled	ignore	画像が見切れた	基準範囲の外側が見えた
disabled	expand	今回は扱いにくく感じた	今回は扱いにくく感じた
canvas_items	ignore	見切れにくいが変形した	外側は見えにくかった
canvas_items	expand	変形せず縮小した	表示範囲が広がった
viewport	ignore	変形した	外側は見えにくかった
viewport	expand	変形せず拡大・縮小した	表示範囲が広がった

これは四隅に画像を置いた単純な検証シーンでの観察結果です。実際のゲームでは、UI、カメラ、背景、ピクセルアートなどの条件によって適した設定が変わると考えています。

canvas_itemsとviewportをどう考えたか

動画では、両者の違いを次のようにまとめました。

canvas_items

画面サイズに合わせて拡大し、再描画する
拡大時の滑らかさを保ちやすいと考えられる

viewport

基準サイズで描画してから画面全体を拡大する
元のゲームらしい見た目を維持しやすいと考えられる

今回の検証だけでは細かな差を十分に確認できなかったため、今後は複数の実機や異なる解像度で試してみたいと思います。

初期設定で大切だと感じたこと

実際に設定を切り替えて感じたのは、「有名な設定値をそのまま選ぶ」だけでは不十分だということです。

横長か縦長か、画像の変形を許容するか、画面が広がったとき外側を見せるかによって、適した組み合わせは変わります。

特にUIは、画面の端ぎりぎりへ置かない方が安全そうです。スコアやボタンを実装するときは、異なる画面サイズでも操作や確認ができる余白を意識したいと思います。

動画では設定変更を連続して確認できます

約8分45秒の動画では、四隅に画像を配置した同じシーンを使い、ストレッチとアスペクトの組み合わせを順番に変更しています。

静止画では分かりにくい、ウィンドウをドラッグして大小を変えたときの動きも確認できます。

まとめ

今回は、Godotでゲームを作る前の初期設定として、解像度、ストレッチモード、アスペクトを実際に変更しました。

検証して分かったのは、設定によって次のような違いが起きることです。

小さい画面で画像が見切れる
縦横比に合わせて画像が変形する
基準にしたゲーム範囲の外側が表示される
素材を含めて拡大・縮小される

私はまだGodotを学習中ですが、設定名だけを見るより、同じシーンで一つずつ切り替えて比較したことで理解しやすくなりました。

今後は、UIを置いた状態や実際の端末でも表示を確認し、自分のゲームに合う設定を探していきたいと思います。

最初に読んでおきたい記事

初期設定を試す前に、次の記事もあわせて読んでおくと理解しやすくなります。

Godotの初期画面設定を実際に比較｜解像度・ストレッチ・アスペクトで表示はどう変わる？