Godot で新しいプロジェクトを作ったら、作り始める前に、レンダラー・設計解像度・ストレッチの3つを決めます。この3つで、大きさや形の違う他人の画面に、ゲームがどう映るかが決まります。
決めずに作り始めると、友達の横長のモニタでは、画面の外に置いた敵が見えます。ピクセルアートのドットは、太いところと細いところが混ざってにじみます。自分のモニタで見ているかぎり、設定の正解も間違いも同じに見えるのがやっかいなところです。
この記事では、最初に決める3つと、ウィンドウの端をドラッグして映り方を確かめる手順を解説します。
この記事でわかること
- ゲームの画面が「設計の1枚を、ストレッチでウィンドウへ写したもの」であること
- 最初に決める3つと、あとから変えると困る順
- 設計解像度の選び方（サポートする一番狭い画面に合わせる）
- 4.7 の新規プロジェクトの既定（
canvas_items＋expand）と、変えるとき
動作確認環境: Godot 4.7
設計解像度とストレッチの仕組み
ゲームは、決まった大きさの1枚を思い浮かべて作ります。この1枚の大きさが設計解像度です。ところが、実際に遊ぶ人のウィンドウは、その1枚と大きさも縦横比も違います。そのあいだで、1枚をウィンドウへどう写すかを決めるのがストレッチです。
写し方で決まるのは3つです。ウィンドウが大きいときに、1枚をどう拡大するか（mode）。縦横比が違うときに、余った部分へ黒帯を出すか、設計の外まで見せるか（aspect）。拡大率を整数に丸めるか（scale_mode）。友達のモニタで画面の外が見えるのも、ドットがにじむのも、この3つのどれかで起きています。
自分のPCで差が出ないのは、ウィンドウと設計の1枚が同じ大きさで、写し方が1倍のまま何もしていないからです。設定が合っているかは、ウィンドウの大きさを変えないと分かりません。
最初に決める3つの設定
プロジェクト設定には項目が何百とありますが、作り始める前に決めておくのは3つで足ります。レンダラー、設計解像度、ストレッチです。あとから変えるほど、すでに作ったものを直すことになります。困る順に並べるとこうなります。ストレッチは mode と aspect を分けて並べます。
- レンダラー（画面の描き方）: 光やグロー（明るい部分のにじみ）の見え方が変わり、シェーダー（見た目を描く小さなプログラム）を作り直すことがある
- ストレッチの
mode: 絵の描き方が変わる。文字も2Dのライトも3Dのシャープさも変わる - 設計解像度: 置いたスプライトの位置、タイルの見える枚数、固定サイズのUIがずれる
- ストレッチの
aspect: 黒帯を出すか、設計の外まで見せるかが入れ替わる
レンダラーの選び方
レンダラーは3つあります。見た目の好みではなく、どこに出すかで決めてください。
- Forward+: デスクトップだけに出す場合。3Dで光を凝るならこれ
- Mobile: スマホにも出す場合。指での操作やノッチ（画面上部の切り欠き）の避け方は タッチ入力入門 にあります
- Compatibility: Webに出す場合、または古いPCまで動かしたい場合
Compatibility は動く範囲が広い代わりに、Forward+ だけの機能が使えません。リアルタイムに跳ね返る光や、画面に映るものを床へ映し込む効果などです。2Dのゲームなら、困ることはほとんどありません。
既定では、Forward+ のプロジェクトでも、スマホでは Mobile、Webでは Compatibility に切り替わって動きます。編集中は Forward+ の見た目のまま進むので、ライトの数や光の見え方の違いに、実機で動かすまで気づきません。出す先が決まっているなら、編集中のレンダラーもそろえてください。
レンダラーを変えたあとは、エディタの再起動が必要です。再起動前の画面を見て「変わっていない」と判断しないでください。
設計解像度の決め方
設計解像度は、どの画面でも必ず見せる範囲の約束です。次の節で選ぶストレッチの mode によって、置き場所の基準として使われるか、この大きさで実際に絵を描くかが変わります。
新規プロジェクトの既定は 1152 × 648 です。これはプロジェクト設定の幅と高さ（viewport_width と viewport_height）の初期値です。あなたのゲームに合わせて選ばれた値ではないので、作り始める前に上書きします。
ピクセルアートなら 640 × 360、普通の2Dと3Dなら 1280 × 720 から始めてください。640 × 360 を勧めるのは、2倍で 1280 × 720、3倍で 1920 × 1080、4倍で 2560 × 1440 になるからです。16:9の画面なら、ノートPCでもフルHDでも4Kでも整数倍で収まります。16:10のノートPCや 1366 × 768 の画面では割り切れず、余りは黒帯か設計の外の景色になります。
1280 × 720 は、どの画面でもここまでは見せる、という約束の値です。ここで迷いやすいのが、自分のフルHDモニタに合わせて 1920 × 1080 を入れる選択です。狭いノートPCや、Steam Deck のような携帯型のゲーム機にも出すと、その画面では縮小されてUIが詰まります。設計解像度は、持っている一番良いモニタではなく、サポートする一番狭い画面に合わせます。
ストレッチ（mode・aspect・scale_mode）
4.7 で新しく作ったプロジェクトは、最初から mode が canvas_items、aspect が expand になっています。普通の2Dと3Dなら、このままで困りません。変えるのは、ピクセルアートのときと、構図を守りたいときです。4.6 以前に作り、ストレッチを変えていないプロジェクトは mode が disabled のままで、ウィンドウを大きくしてもゲームが拡大されません。
mode には2つの選び方があります。違いは、どこで絵を描くかです。
canvas_items は、ウィンドウの解像度で描き直します。設計解像度は置き場所の基準として使い、実際に絵を描くのはウィンドウの解像度です。だから文字も3Dもシャープなままです。その代わり、拡大率が 2.13 のような半端な数になると、ドットの幅がそろわなくなります。
viewport は、設計解像度で1枚の絵を描いてから、それをウィンドウへ引き伸ばします。設計解像度の項目名 viewport_width とは別物です。文字も3Dも、引き伸ばしたぶんやわらかくなります。ピクセルアートでは、この1枚をドットのまま拡大したいので viewport を選びます。
次に aspect です。縦横比が違う画面で、余った部分をどうするかを決めます。
keep は構図を守り、余った側に黒帯を出します。expand は黒帯を出さずに、見える範囲を広げます。横長の画面なら横へ、16:10のように縦に長い画面なら縦へ広がり、設計の外に置いたものが見えてしまうことがあります。
黒帯は未完成の印ではなく、 設計していない範囲を、プレイヤーに見せなかった証拠 です。一画面で完結するパズルのように構図が意味を持つゲームでは、keep を選んでください。横スクロールなら、既定の expand が自然です。3Dは、見える範囲をカメラが決めるので、既定のままで構いません。
最後が scale_mode です。integer にすると倍率を整数に切り下げます。2.5倍で収まる場所には2倍で表示し、余りは黒帯になります。fractional のままだと、2.5倍のときに1つのドットが2画素幅と3画素幅に分かれ、太いドットと細いドットが混ざります。viewport にしただけでは、ウィンドウの大きさによって半端な倍率になります。integer と組にすると、どんなウィンドウでもドットの幅がそろいます。
ピクセルアートではもう1つ、テクスチャの拡大方法を Nearest（隣り合う色を混ぜずに拡大する）に変えます。rendering/textures/canvas_textures/default_texture_filter で、2Dの既定をまとめて切り替えられます。
まとめると、普通の2Dと3Dは設計解像度を 1280 × 720 にするだけで、ほかは 4.7 の既定のままで足ります。ピクセルアートは、次の5つを変えます。
- 設計解像度:
640 × 360 mode:viewportaspect:keepscale_mode:integer- フィルタ: Nearest
実践：ウィンドウの端をドラッグして、崩れ方を見る
ピクセルアートのアクション、一画面のパズル、横スクロールのシューティング —— どれも、他人の画面でどう崩れるかを先に決めておくゲームです。設定画面を眺めても、正しく入っているかは分かりません。設計解像度を 640 × 360 にして、既定の写し方から順に3通り試します。
① 置くもの
新規プロジェクトで2Dシーンを作り、main.tscn として保存して、F5 で最初に開くメインシーンにします。
Main (Node2D)
├── Background (ColorRect) 設計解像度いっぱいの背景
├── Logo (Sprite2D) 中央に置く目印
└── Outside (ColorRect) 設計解像度のすぐ外に置く四角
- Background: Position
(0, 0)、Size(640, 360)、濃紺 - Logo: Texture に
res://icon.svg、Position(320, 180)、Scale(0.5, 0.5) - Outside: Position
(660, 150)、Size(60, 60)、水色
Outside は、設計解像度の右の外側に置いています。構図を守る設定なら、この四角は見えません。
② 設定を入れる
プロジェクト設定で、次の4つを入れます。見つからない項目は、右上の Advanced Settings をオンにすると出てきます。
display/window/size/viewport_width:640display/window/size/viewport_height:360display/window/size/window_width_override:960display/window/size/window_height_override:540
mode と aspect は、4.7 の既定（canvas_items と expand）のまま始めます。4.6 以前に作ったプロジェクトなら、ここで同じ値にそろえてください。ストレッチの項目は display/window/stretch/ の下にあります。
オーバーライド（最初に開くウィンドウの大きさ）を 960 × 540 にしたのは、設計のちょうど1.5倍で開くためです。設計と同じ値だと倍率が1倍になり、設定が正しくても間違っていても見た目が同じになります。小さいノートPCの画面にも収まる大きさにしてあります。このオーバーライドは書き出したゲームにも効きます。実際に出すときは、開きたい大きさ（ピクセルアートなら設計の2倍の 1280 × 720 など）に入れ直します。
もう1つ 、4.7 は実行したゲームをエディタの Game の画面に埋め込みます。埋め込んだままでは、枠を広げてもゲームは設定した大きさより大きくなりません。Game タブのツールバーにあるメニューから、Embed Game on Next Play のチェックを外してください。次の実行から、ゲームが普通のウィンドウで開き、端をドラッグできるようになります。
③ 動かして確かめる
F5 で実行します。見るのは3つです。
まず、既定の expand のままです。960 × 540 のウィンドウに、設計の1枚が1.5倍で映ります。ウィンドウの右端をドラッグして横に広げると、見える範囲が右へ伸び、Outside の水色の四角が出てきます。濃紺の背景は設計の 640 の位置で終わり、その先はゲームの既定の暗い灰色です。最初のウィンドウで濃紺の背景が左上に小さく出て、ウィンドウいっぱいに広がらないなら、mode が disabled のままです。
次に、aspect を keep にして実行し、同じように横に広げます。今度は左右に黒帯が出て、Outside は見えません。ロゴと背景は、形を変えずにウィンドウの中央に収まります。
仕上げに、ピクセルアートの組み合わせにします。aspect は keep のまま、mode を viewport、scale_mode を integer にします。default_texture_filter も Nearest にして実行します。960 × 540 のウィンドウの中央に 640 × 360 の絵が1倍のまま出て、四辺に黒帯が付きます。1.5倍にはせず、整数の1倍へ切り下げた結果です。崩れ方を、黒帯か設計の外を見せるかのどちらかに、自分で選べるようになりました。
ポイントは2つです。
- 自分の画面では差が出ない: ウィンドウと設計解像度が同じ大きさのあいだ、ストレッチは1倍で何もしません。何週間ステージを作っても、開発者の画面は完璧なままです。ウィンドウをドラッグする数秒が、その盲点を埋めます
- 崩れ方を先に選んでおく:
keepとexpandは、どちらが正しいという話ではなく、何を捨てるかの選択です。expandにするなら、床も敵も操作するものも設計解像度の内側に置き、広がった側には背景だけを置きます
普通の2D・3Dのプロジェクトでは、試した設定を 4.7 の既定に戻します。ストレッチは canvas_items・expand・fractional、フィルタは Linear です。そのうえで設計解像度を 1280 × 720 にして作り始めます。ファイルの置き場所は プロジェクト整理 にあります。
うまくいかないときは
| 症状 | 原因 | 直し方 |
|---|---|---|
| ピクセルアートのキャラやカメラが動くと、ドットが揺れてにじむ | 位置の小数（0.5ピクセルなど）が、そのまま描画に使 われている | rendering/2d/snap/snap_2d_transforms_to_pixel をオンにすると、描く位置がピクセルにそろう。動きは少し階段状になる |
expand にしたら、右上に置いたUIが画面の端から離れた | UIを Position の数値で置いている。見える範囲が広がっても、置いた座標は動かない | 画面いっぱいに広がる Control の子にして、右上のアンカー（親の端からの位置で置く仕組み）で置く（UIレイアウト） |
| 書き出したゲームが、思った大きさのウィンドウで開かない | 試したときの window_width_override の値が残っている。0 だと設計解像度の大きさ（640 × 360 なら小さなウィンドウ）で開く | 開きたい大きさ（1280 × 720 など）を入れる |
おまけ：先に知っておくと良いこと
stretch/scaleは1.0のまま: ここを変えると、ストレッチの倍率の上にもう一段の拡大が掛かり、見える範囲まで変わります。倍率はストレッチに任せます- フルスクリーンはコード1行:
DisplayServer.window_set_mode(DisplayServer.WINDOW_MODE_FULLSCREEN)で切り替わります - 高DPIの設定は初期値のまま:
display/window/dpi/allow_hidpiは有効のままにします。無効にすると、Windowsの表示スケールが125%や150%の画面で、OSがゲームのウィンドウごと引き伸ばしてぼやけます - 次に読むもの: 書き出して人に渡すなら エクスポート入門、ブラウザで遊べる形にするなら Webエクスポート入門、フレームレートとV-Syncは フレームレート入門 にあります
まとめ
- 画面は設計の1枚を写したもの: ストレッチでウィンドウへ写すので、自分の画面では1倍になり差が出ない
- 最初に決めるのは3つ: レンダラー・設計解像度・ストレッチ
- レンダラーは出す先で決める: デスクトップは Forward+、スマホは Mobile、Webは Compatibility
- 設計解像度はいちばん狭い画面: ピクセルアートは
640 × 360、ほかは1280 × 720から - ストレッチの既定と例外: 4.7 の新規プロジェクトは
canvas_items＋expand。ピクセルアートはviewport＋keep＋integer＋ Nearest
まずはウィンドウの端をドラッグしてみてください。崩れ方が、自分で選んだほう（黒帯か、設計の外か）になっていれば、その設定はもう効いています。あなたのゲームは、黒帯と設計の外の景色、どちらを見せますか。
