ゲーム開発

Godot ドット絵設定完全ガイド|Pixel Perfectでぼやけない2Dゲームを作る方法

更新: PixelArt編集部
ゲーム開発

Godot ドット絵設定完全ガイド|Pixel Perfectでぼやけない2Dゲームを作る方法

Godot 4のドット絵がぼやける主因は、デフォルトのテクスチャフィルタがLinearになっている点です。まずDefault Texture FilterをNearestに切り替え、次にWindowのStretch Modeをviewportへ合わせると、低解像度の画面をピクセル単位で保ったまま拡大できます。

Godot 4のドット絵がぼやける主因は、デフォルトのテクスチャフィルタがLinearになっている点です。
まずDefault Texture FilterをNearestに切り替え、次にWindowのStretch Modeをviewportへ合わせると、低解像度の画面をピクセル単位で保ったまま拡大できます。
Godot 4.3ではInteger Scalingが正式対応し、320×180は1920×1080で6倍、640×360は3倍の整数拡大ができます。
CrossCodeが568×320を採用しているように、ベース解像度の設計次第で見え方は大きく変わります。
おすすめです。

この記事を要約すると

  • Godot 4でドット絵がぼやける原因が、Linearのデフォルトテクスチャフィルタにあることと、その対策としてNearestへの変更が有効なこと
  • Project SettingsでDefault Texture FilterをNearestへ変更し、画面全体の輪郭をシャープにする手順
  • WindowのStretch Modeをviewportに設定して、低解像度レンダリングを拡大する考え方
  • Godot 4.3のInteger Scalingで、1920×1080上に320×180を6倍、640×360を3倍表示できることと、整数拡大によるピクセル表現の安定性
  • CrossCodeの568×320や、320×180・640×360というベース解像度の使い分け

Godotでドット絵がぼやける原因:バイリニアフィルタリングとは

Godot 4でドット絵がぼやける最大の理由は、デフォルトのテクスチャフィルタがLinear(バイリニア)だからです。
Linearは拡大時に周囲のピクセルを平均化するため、1ドットの輪郭がにじみ、線が細く見えます。
ドット絵は「隣の色を混ぜない」ことが命なので、ここで補間が入ると、輪郭の硬さや色面の切れ味が崩れてしまいます。

それに対してNearest Neighbor(最近傍補間)は、最も近いピクセルの色をそのまま採用します。
つまり中間色を作らないので、拡大してもドットの境界が保たれ、エッジがシャープなまま残るのです。
ドット絵らしさを支えるのは派手な特殊効果ではなく、この「1画素をどう扱うか」という基本で、ゲーム画面全体の印象を左右します。

ぼやけの原因はテクスチャ側だけではありません。
Godotではインポート設定とプロジェクト設定の2か所でフィルタが効くため、片方だけ直しても残像のようなにじみが残ることがあります。
Project Settings → Rendering → Textures → Default Texture Filter を Nearest に変えるだけでなく、素材ごとのインポート設定も見直しましょう。
さらに Display → Window → Stretch → Mode を viewport にして低解像度で描画・拡大する流れを組むと、ドットの並びが崩れにくくなります。

最重要設定:Default Texture FilterをNearestに変更する

Godot 4でドット絵がぼやける場合、最初に見るべきなのが Project Settings → Rendering → Textures → Canvas Textures → Default Texture Filter です。
ここを「Nearest」に変えるだけで、Linear のバイリニア補間によるにじみが止まり、低解像度のピクセルが輪郭を保ったまま表示されます。
見た目の改善幅が最も大きく、設定の優先順位も高いので、個別の調整より先にここを押さえましょう。

この設定はプロジェクト全体のテクスチャに適用されるため、単一の Sprite2D だけを触るより影響範囲が広いのが利点です。
背景、キャラ、UI 素材までまとめて効くので、あとから「この素材だけまだ少しぼやける」と悩む手間を減らせます。
まず全体方針を Nearest に寄せてから、必要に応じて個別調整を重ねる流れが扱いやすいでしょう。

ただし、個別ノードで例外を作りたい場面もあります。
その場合は Sprite2D ノードの Texture > Filter プロパティを Nearest に設定します。
プロジェクト設定で全体を揃えつつ、演出上あえて滑らかさを残したい素材だけを分ける、という使い分けができます。

Godot 4.0 以降では、Advanced Settings を有効化しないとこの項目が表示されない場合があります。
メニューの場所が見えないときは、項目が消えたのではなく表示条件に引っかかっているだけです。
設定画面を探す順番を知っておくと、初回のつまずきを避けやすくなります。

テクスチャインポート設定:「2D Pixel」プリセットを使う

FileSystemタブで画像を選び、Importタブへ移動したら、Presetsから「2D Pixel」を選んで Reimport を実行します。
これが最短の流れで、ピクセルを拡大したときに輪郭がにじみにくい状態へ整えやすい手順です。
特に新規素材をまとめて扱う場面では、最初にこのプリセットへ寄せておくと、後から個別調整する手間を減らせます。

「2D Pixel」プリセットでは Filter チェックボックスがオフになり、バイリニアフィルタリングを無効化します。
ここが肝心で、フィルタが有効なままだと1px単位の階段状の輪郭が丸まり、ドット絵のエッジがぼやけます。
ピクセルアートは線の太さより境界の硬さが見た目を支えるので、まず Filter を切ることが基本です。

プロジェクト設定で Default Texture Filter を Nearest にしておけば、インポートごとの設定変更を省けるケースが多いです。
毎回の手動調整を減らせるため、制作の初速が上がりますし、複数アセットで設定の揺れも起きにくくなります。
共通ルールを先に置く考え方で、あとから迷いにくい運用になるでしょう。

3Dドット絵で色が滲むときは、Importタブで圧縮設定を Disable にする必要があります。
圧縮は容量面では便利でも、色数の少ない面やベタ塗りの境界では階調が崩れやすく、意図しない色の混入につながります。
とくに面積の広い単色パーツや輪郭の強いモデルでは、圧縮を切ったほうが輪郭が保ちやすいです。
状況に応じて Filter と圧縮を分けて見直してみてください。

Stretch Mode・解像度設定:ベース解像度の選び方とScaling

Display → Window → Stretch → Modeを「viewport」にすると、ゲームはまず指定したベース解像度で描画され、その後にウィンドウへ合わせて拡大されます。
ここで狙うのは、画面サイズに引きずられず、ドットの密度やUIの見え方を先に固定することです。
16:9なら、320×180は低解像度のレトロ感を強めやすく、640×360は標準的な作りやすさがあります。
568×320はCrossCodeが採用した値として知られ、実用上のバランスを取りやすいベース解像度です。

Godot 4.3以降では、Display → Window → Stretch → Scale Modeを「integer」にしておくと、拡大率は2×、3×、4×のような整数倍に限定されます。
これは見た目の安定に直結します。
非整数倍ではピクセルの横幅と縦幅がそろわず、輪郭がにじんだり、細い線が妙に太く見えたりしやすいからです。
Integerスケーリングならピクセルは常に正方形を保ち、こうした歪みを避けられます。
結果として、ドット絵の輪郭や文字のエッジを揃えやすくなるわけです。

ただし、整数倍に固定する以上、画面をぴったり埋められない場合は余白が出ます。
黒帯が生じることがありますが、これは欠点というより仕様です。
むしろ、無理に伸ばして絵を崩すより、余白を受け入れてでもピクセルの形を守るほうが、レトロ表現やUIの可読性には向いています。
拡大率の自由度より見た目の一貫性を優先するなら、この設定はおすすめです。

サブピクセルのズレを防ぐ:Snap 2D設定の使い方

Project Settings → Rendering → 2D → Snap 2D Transforms to Pixel をオンにすると、ノードの座標は整数ピクセルに丸められます。
これだけで、移動中にスプライトの輪郭がにじんだり、1フレームごとに位置が揺れて見えたりする症状はかなり抑えやすくなります。
ピクセルアートは座標が半端な値に乗るだけで見え方が崩れるため、まず最初に効かせたい設定です。

Snap 2D Vertices to Pixel は、ポリゴンの頂点単位でスナップするためのオプションです。
Transform の丸めだけでは形状の頂点がサブピクセル位置に残る場面があるので、必要に応じて Snap 2D Transforms to Pixel と組み合わせて使いましょう。
とはいえ、Godot 4.3 では Snap 2D Vertices to Pixel のバグとして反転タイルのワープが報告されています。
そうした症状が出た場合は、Vertices 側を切って Transforms のみ有効にする構成がおすすめです。

カメラ側の設計でも、サブピクセルのジッターは抑えられます。
SubViewport 内にカメラを置き、整数座標だけで移動させる作りにすると、表示面全体の揺れをまとめて防ぎやすくなるからです。
個々のスプライトだけでなく、背景やタイルの見え方まで安定しやすいので、画面全体のピクセル感をそろえたいときに有効です。
移動処理と表示処理を分けて考えると、原因の切り分けもしやすくなります。

ドット絵とUI高解像度の共存:SubViewportを使った混在構成

SubViewportを使うと、低解像度のゲーム世界と高解像度UIを同じ画面に分けて載せられます。
ゲーム本体は SubViewport 側でベース解像度を 320×180 などに落とし、SubViewportContainer で整数倍に拡大して表示すると、ドットの輪郭を崩しにくい設計になります。
UIはメインビューポートをフル解像度のまま使えるので、テキストやボタンを細かく描けるのが利点です。
つまり、見た目のレトロ感と操作系の読みやすさを両立しやすい構成だと考えてよいでしょう。

この方式で気をつけたいのが、SubViewport のテクスチャフィルタです。
Godot 4.2 の時点では Nearest に設定しておかないと、拡大時ににじみや半端なぼけが入り、せっかくのピクセル感が失われます。
とくに整数倍で拡大している場合は、補間が入るだけで輪郭がずれて見えるため、フィルタ設定は見た目の品質を左右する要点になります。
ドット絵をそのまま保ちたいなら、ここはおすすめの確認項目です。

ただし、この混在構成は机上でうまく見えても、機種によって動作が不安定になる事例が報告されています。
描画順やリサイズ、入力の重なり方が絡むため、エディタ上の再生だけで判断すると取りこぼしが出やすいのです。
デバッグは実機テストを複数環境で行うことが推奨されるので、少なくとも異なる端末で表示崩れと操作感を見比べてみてください。
UIとゲーム画面の分離は強力ですが、最後は実際の表示結果で詰めるのが安全です。

設定チェックリスト:Godot 4ドット絵プロジェクトの完全セットアップ

Godot 4ドット絵プロジェクトの土台は、画像の補間、画面拡大、ピクセルの揃え方、そしてレンダラー選択の4点で決まります。
ここを先に固定しておくと、後から素材を増やしても輪郭がにじまず、ゲーム全体の見た目が安定します。
設定は難しくありませんが、順番を守って詰めることが肝心です。

設定項目推奨値ねらい
Rendering/Textures/Default Texture FilterNearestドットの輪郭をぼかさない
Display/Window/Stretch/Modeviewport画面全体を基準に拡大する
Display/Window/Stretch/Scale Modeinteger(Godot 4.3+)端数拡大を避けて整数倍に揃える
Rendering/2D/Snap 2D Transforms to Pixelオンサブピクセルずれを防ぐ
レンダラー互換性(Compatibility)2Dドット絵向けで軽量、低スペックPCにも合わせやすい

Rendering/Textures/Default Texture Filter は Nearest にしておきます。
これを線形補間のまま残すと、16×16や32×32の素材を拡大した瞬間に輪郭がぼけ、1ピクセルの境界が曖昧になります。
ドット絵は輪郭の段差そのものが絵柄なので、最初から補間を切っておくほうが安全です。
UIアイコンや文字用の小さな画像も同じ扱いにしておくと、画面全体の統一感が出ます。

Display/Window/Stretch/Mode は viewport、Scale Mode は integer(Godot 4.3+)を合わせて使います。
前者はゲーム画面をひとつの仮想解像度として扱い、後者は拡大率を整数に固定する設定です。
これにより、拡大時に半端な比率が混ざらず、タイルやスプライトの縁が崩れにくくなります。
特に4.3+では integer を選んでおくと、ドットの並びが素直に保たれます。

Rendering/2D/Snap 2D Transforms to Pixel はオンにします。
キャラクターやカメラが少しずつ動くとき、座標が小数のままだと1フレームごとに位置が揺れ、静止しているはずの線が細かく震えて見えます。
ピクセルに吸着させれば、その揺れを止められます。
移動中の見た目が落ち着くので、プレイヤーは操作の気持ちよさを感じやすくなるでしょう。

レンダラーは「互換性(Compatibility)」を選びます。
ドット絵2Dゲームでは高機能な描画よりも、軽くて予測しやすい表示のほうが扱いやすく、低スペックPCへの対応もしやすいからです。
余計な表現力を追うより、画面の再現性を優先するほうが完成後の調整も少なくなります。
ここまでの4点を先に固定してから、素材とUIを並べていきましょう。
必要なら一度テストシーンを作り、スプライトが崩れないか確認してみてください。

シェア

関連記事

ツール

Piskel 使い方完全ガイド|無料ブラウザで始めるドット絵・アニメーション入門

Piskelは、Julian Descottes が制作したブラウザ完結型のドット絵エディタで、Apache License Version 2.0 のもとで公開されているオープンソースツールです。

ゲーム開発

ドット絵歩行アニメーション完全ガイド|4方向×8フレームの作り方

ドット絵の歩行アニメーションとは、4方向のスプライトをウォークサイクルに沿って描き、ゲーム内で上下左右の移動を自然に見せるための基本技法です。RPGツクールMV/MZでは、幅576px×高さ384pxのシートに8キャラ分を並べ、1キャラは4行×3列の12コマで構成します。

ツール

Pixilart 使い方|ブラウザ無料でドット絵を描いてSNSで共有する方法

Pixilartは、2013年にBryan Wareが個人で立ち上げ、2018年7月にベータ公開されたブラウザ型のドット絵制作ツール兼SNSプラットフォームです。ツールとコミュニティが一体化しており、描く・投稿する・反応を得る流れが1つにつながっています。

テクニック

ドット絵グラデーションの作り方|色数を絞って滑らかに見せる5つの技法

ドット絵グラデーションは、色数の少ない環境で滑らかな階調を作るためのピクセルアート技法であり、ファミコン時代の厳しいパレット制約から磨かれた表現です。現代の制作では、ディザリング、カラーランプ、色相シフトの3軸で整理すると理解しやすくなります。