6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Godot 4.x】2D脱出ゲームを作ってみる①〜環境構築とプロジェクト作成〜

6
Last updated at Posted at 2026-06-21

はじめに

この記事は、Godot 4.xで簡単な脱出ゲーム(部屋に隠されたアイテムを探し、謎を解いて脱出する)を作る連載の第1回です。

最終的にはPC・スマホ・ブラウザなど様々な画面サイズに対応したレスポンシブな脱出ゲームを目指します。今回はその第一歩として、Godotのインストールからプロジェクトの初期設定までを行います。

第2回では、Claude CodeMCPの連携を行う予定です。

この記事で作るもの

  • Godot Engineのインストール
  • 脱出ゲーム用プロジェクトの新規作成
  • レスポンシブ表示を見据えた画面設定
  • 今後の連載を見据えたフォルダ構成

想定環境

  • Godot Engine 4.7(執筆時点の最新安定版)
  • 言語:GDScript
  • 対象プラットフォーム:Web(HTML5)/ デスクトップ / モバイル(マルチプラットフォーム)

1. Godotのダウンロード

公式サイト( https://godotengine.org/download/ )から最新の安定版をダウンロードします。

スクリーンショット 2026-06-21 22.55.54.png

Standard版とDotnet(.NET)版の違い

対応言語 特徴
Standard GDScript, GDExtension(C++等) 軽量。本連載で使用
.NET (mono) 上記+C# C#を使う場合のみ必要。やや重い

本連載ではGDScriptのみを使用するため、Standard版をダウンロードしてください。

インストール方法

GodotはZIP配布されている実行ファイル(バイナリ)をそのまま使う形式で、インストーラーは不要です。

  1. OSに合った版(Windows / macOS / Linux)をダウンロード
  2. ZIPを任意の場所に展開
  3. 実行ファイル(Godot.exeなど)をダブルクリックして起動

初回起動時にプロジェクトマネージャー画面が表示されます。

※MacOSはダブルクリックで起動しました。


2. 新規プロジェクトの作成

2-1. プロジェクトマネージャーでの作成手順

  1. プロジェクトマネージャー画面で「新規プロジェクトを作成」もしくは「+」をクリック
  2. プロジェクト名を入力(例:EscapeGameSample
  3. プロジェクトの保存先フォルダを指定
  4. レンダラーを選択

スクリーンショット 2026-06-21 23.03.49.png

2-2. レンダラーの選択について

Godot 4には主に3種類のレンダラーがあります。

レンダラー 特徴 用途
Forward+ 高品質。最新のGPU機能を活用 PC向け高品質ゲーム
モバイル 軽量。モバイル・Web向けに最適化 スマホ・ブラウザ向け
Compatibility 互換性重視。古いハードウェアでも動作 低スペック端末対応

今回作る脱出ゲームは2D中心で描画負荷が軽く、かつマルチプラットフォーム(特にWebブラウザ)での動作を想定しているため、モバイルを選択することを推奨します。Forward+でも問題なく動作しますが、Web書き出し時の安定性や読み込み速度を考えるとMobileの方が無難です。

  1. レンダラー選択後、「作成」をクリック

エディタが起動したら、プロジェクトの作成は完了です。

スクリーンショット 2026-06-21 23.03.02.png


3. プロジェクトの初期設定

3-1. レスポンシブ表示を見据えた画面設定

この連載では最終的に画面幅いっぱいに表示されるレスポンシブな脱出ゲームを目指すため、最初の設定段階からそれを見据えておきます。

メニューから プロジェクト > プロジェクト設定 を開き、表示 > ウィンドウ タブで以下を設定します。

項目 理由
サイズ > ビューポートの幅 1920 基準デザインサイズ
サイズ > ビューポートの高さ 1080 基準デザインサイズ
ストレッチ > モード canvas_items UIも含めて拡大縮小される
ストレッチ > アスペクト expand 余白を作らず画面幅いっぱいに広げる

expand設定の詳しい挙動や、画面サイズが変わったときにUI配置をどう追従させるかについては、第4回(部屋表示編)で詳しく扱います。今回はひとまず「将来こういう設定にする」という前提を作っておくだけで問題ありません。

スクリーンショット 2026-06-21 23.08.30.png

3-2. プロジェクトの基本情報設定(任意)

プロジェクト設定 > Application > Config で、アプリ名やアイコンを設定しておくと、後でWeb書き出しやウィンドウタイトルに反映されます。今の段階では必須ではないため、余裕があれば設定しておく程度で構いません。


4. フォルダ構成の準備

連載全体を見据えて、最初に以下のようなフォルダ構成を作っておきます。FileSystemパネル上で右クリック→「新規フォルダ」で作成してください。

res://
├── scenes/        # 各画面のシーンファイルを格納
├── scripts/       # GDScriptファイルを格納
├── assets/
│   ├── images/    # 背景・アイテム画像などを格納
│   └── fonts/     # フォントファイルを格納
└── autoload/      # ゲーム全体で共有する状態管理用スクリプト(次々回以降使用)

スクリーンショット 2026-06-21 23.10.39.png

それぞれの役割は以下の通りです。

  • scenes/:スプラッシュ画面、タイトル画面、部屋シーンなど、Godotの.tscnファイルをまとめて管理します
  • scripts/:各シーンに対応する.gdスクリプトを格納します
  • assets/:画像・フォントなどの素材ファイル一式です
  • autoload/:インベントリの状態など、シーンをまたいで保持したいデータを管理するシングルトンスクリプトを今後ここに追加していきます(具体的な実装は連載の中盤で扱います)

5. 動作確認

ここまでの設定が正しく反映されているか、確認用の仮シーンを作って確かめておきます。

5-1. 確認用シーンの作成

  1. シーンから「ユーザーインターフェース」(ルートノードがControlになるもの)を選択
    • 後の回でスプラッシュ画面・タイトル画面ともにControlをルートにするため、ここで選択肢を合わせておきます
  2. ルートノードが Control という名前で作成されるので、そのままで構いません(後でSplash等にリネームします)
  3. ルートノードを選択した状態でインスペクタを開き、Layout の右側にあるアンカーアイコン(鎖のようなアイコン)をクリックし、プリセット一覧から 「Full Rect」(日本語環境では「Rect全面」と表示されます)を選択
    • 画面全体にControlが広がるよう設定されます
    • 補足:この時点でインスペクタに「このノードには制御する親がありません。」という水色の注意メッセージが表示されますが、これはエラーではありません。Anchors Presetは本来「親のControlに対する配置」を決める機能ですが、今回のようにControlを**シーンの一番上(ルート)**に置いた場合は親が存在しないため、Godotがその旨を案内しているだけです。Rect全面(Full Rect)の設定自体は問題なく反映されているので、そのまま次の手順に進んで構いません

スクリーンショット 2026-06-21 23.17.12.png

  1. メニューの シーン > シーンを保存 (または Ctrl+S / Cmd+S)を選択
  2. 保存先を聞かれるので、scenesフォルダの中に splash.tscn という名前で保存

5-2. 実行して確認

  • シーンを開いた状態で F6 キー(または再生ボタンの隣にある「現在のシーンを実行」ボタン)を押す

スクリーンショット 2026-06-21 23.22.15.png

  • 何も配置していないため、何も表示されない真っ暗な(または背景色の)ウィンドウが立ち上がれば正常です
  • このとき、エディタ下部の「出力」パネルに赤いエラーメッセージが出ていないことを確認してください

スクリーンショット 2026-06-21 23.23.14.png

  • ウィンドウの端をドラッグしてサイズを変更し、ウィンドウが落ちたり固まったりしないことを確認
  • 確認できたら、ウィンドウを閉じるかエディタの停止ボタンで実行を終了

つまずきやすいポイント

  • F6を押してもエラーが出て実行できない場合、「現在のシーンを実行できません。シーンに親ノードがありません」のようなメッセージが出ることがあります。これはシーンがまだ保存されていない場合に起きるので、5-1の手順6で保存できているか確認してください
  • 初めてF6を押すと「メインシーンが選択されていません」という趣旨のダイアログが出ることがありますが、これは「アプリ起動時に最初に開くシーン」の設定(後の回で行います)が未設定なための確認です。今回は今開いているシーン単体を実行したいだけなので、ダイアログが出た場合は「選択」ボタンで今のシーン(splash.tscn)を選べばそのまま実行されます

この時点ではsplash.tscnはまだ空ですが、次回ここにロゴ画像やフェードイン/アウト演出を実装していきます。


まとめ

今回は以下を行いました。

  • Godot 4.7(Standard版)のダウンロードとインストール
  • 脱出ゲーム用プロジェクトの新規作成(レンダラーはMobileを選択)
  • レスポンシブ表示を見据えたStretch ModeAspectの初期設定
  • 連載全体を見据えたフォルダ構成の準備

環境構築は地味な作業ですが、特にレンダラー選択とStretch設定は後から変更すると見た目に影響が出やすい部分なので、最初に固めておくと後の回がスムーズに進みます。

次回は、起動直後に表示するスプラッシュ画面(ロゴ表示とフェードイン/アウト演出)を実装していきます。

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?