Godot を入れたら、最初に覚えるのはエディタの4つのドックです。左下でファイルを開き、左上で部品を選び、右で設定を変えて、実行して確かめる、という流れが分かれば、画像を1枚置いて動かすところまで迷わずに進めます。
流れが見えないうちは、画面がいくつもの小窓に分かれていて、どこから触ればいいか分かりません。足した部品を左下の一覧で探して、見当たらずに戸惑うこともあります。
この記事では、4つのドックと中央のビューポートの役割と、画像を1枚置いて実行するまでを解説します。
この記事でわかること
- 4つのドックが「ファイル一覧 → 開いた中身 → 選んだ1つ」でつながっていること
- 中央のビューポートと、2D・3D の切り替え
- F5 と F6 が実行するものの違い
- 画像を1枚置いて、画面の中央に出すまで
動作確認環境: Godot 4.7
4つのドックのつながり
Godotのエディタは、周りに並ぶ小窓と、中央の広い画面（ビューポート。シーンの見た目を映す場所）でできています。小窓のことをドックと呼びます。たくさんありますが、最初に覚えるのは4つです。
| 場所 | ドック | 何が入っているか |
|---|---|---|
| 左上 | シーン（Scene） | いま開いているシーンの中身の一覧 |
| 左下 | ファイルシステム（FileSystem） | プロジェクトに保存されたファイルの一覧 |
| 右 | インスペクター（Inspector） | 左上で選んでいる1つの設定 |
| 画面下 | 出力（Output） | 実行したときの記録 |
4つは、左下から右へ1本の流れでつながっています。 左下のファイルシステムでシーンのファイル（.tscn）を開くと、その中身が左上に並びます。左上で1行を選ぶと、その設定が右に出ます。中央のビューポートには左上に開いているものの見た目が映り、実行したときの記録は画面下の出力に出ます。新しいシーンは左上で作り始め、保存したときにファイルシステムへファイルとして並びます。
初日に迷う場面は、ほとんどがこの流れのどこを見ているかの取り違えです。足した部品を左下で探す、選んでいる行がずれたまま右を見る、開いているものとは別のファイルを F5 で起動する。どれも、この流れで説明できます。
他のエンジンでいうと: 役割で見ると、シーン・ファイルシステム・インスペクター・出力は、Unity の Hierarchy・Project・Inspector・Console に近い画面です。Unreal Engine では、おおむね Outliner・Content Browser・Details・Output Log にあたります。
エディタは既定で OS の言語で表示されるので、ドックやボタンは日本語で並んでいるはずです。この記事では、ドックの名前は日本語と英語を並べ、ボタンやメニューは英語の名前で書きます。インスペクターの項目名（Texture・Position など）は、日本語表示でも英語のまま出ます。右側や画面下にはほかのタブも並んでいますが、しばらく触らなくて構いません。
中央のビューポート（2D と 3D）
中央のビューポートの上には、2D・3D・Script・Game・Asset Store のタブが並んでいます。2D と 3D は、左上に開いているものを2つの画面から見る切り替えで、切り替えても作ったものは消えません。残りの3つは別の仕事で、Script はコードを書く場所、Game は実行中のゲームを映す場所、Asset Store は素材を探して取り込む場所です。
新規プロジェクトを開いた直後は 3D が選ばれていて、中央には格子が広がっています。3Dの画面には2Dの部品が描かれませんが、まだ何も置いていないので、このままで構いません。左上で 2D Scene を作ると、ビューポートは自動で 2D に切り替わります。自分で 3D を押して2Dの部品が見えなくなったときは、2D タブで戻ります。
シーンドックとファイルシステムの違い
左上と左下は、どちらも「シーン」という言葉に関係するのに、映しているものが違います。
左下のファイルシステムには、保存されたファイルが並びます。画像も音も、シーンを 保存した .tscn もここです。左上には、いま開いている1つのシーンの中身が並びます。まだ保存していないものも、ここには出ています。
部品を足したのに左下を探して「消えた」と思う、という間違いがここで起きます。左上に並ぶ部品（Godotではノードと呼びます）はファイルではないので、ファイルシステムには並びません。 足した部品の名前は、左上だけを見てください。
ファイルシステムに並ぶファイルは、ダブルクリックで開きます。
.tscn を中央や左上へドラッグすると、そのファイルは開かず、いま開いているシーンの中へ部品として入ります。便利な操作ですが、開くつもりでドラッグして「知らないものが増えた」と驚く人が多いところです。
インスペクター（選んだ1つの設定）
右のインスペクターには、プロジェクト全体の設定ではなく、いま選んでいる1つの設定が出ます。左上で青くなっ ている行を切り替えるたびに、右の中身もまるごと入れ替わります。
慣れてくると、中央から触らなくなります。目は左上の行を追い、右でその設定を見て、中央は結果の確認に使います。中央をクリックすると、重なっている別のものを掴んでしまうことがあるからです。左上の行を押せば、選んだものが必ず確定します。
「絵が消えた」「右の項目が別物になった」と思ったときは、中央を凝視する前に左上の青い行を見てください。たいていは、選んでいるものがずれているだけです。
実行キー（F5 と F6）
Godotには実行キーが2つあります。ここを知らないと、編集している画面と違うものが起動して混乱します。
- F5: プロジェクトの「メインシーン」（最初に起動するシーン）を実行する
- F6: いま開いているシーンを実行する
- F8: 実行中のゲームを止める
キーが効かないノートPCでは、右上のボタンで同じことができます。左端の再生ボタンが F5、四角の停止ボタンが F8 で、少し右にある「いまのシーンを実行」のボタンが F6 です。マウスを乗せると説明が出ます。
最初に F5 を押すと、メインシーンがまだ決まっていないのでダイアログが出ます。ボタンは3つで、保存済みのシーンから選ぶ Select、いま編集しているシーンをメインにする Select Current、取りやめる Cancel です。初日は Select Current で足ります。
メインシーンに決めたファイルは、左下のファイルシステムで名前の色が変わります。星などの印は付かないので、色の違いで見分けます。
シーンが2つ以上になってから、F5 と F6 の違いが効いてきます。メインシーンを決めたあとで別のシーンを開き、F5 を押すと、画面に見えているものではなくメインシーンが起動します。いま作っているものを試したいときは F6 です。
実践：画像を1枚置いて、画面の中央に出す
横スクロールの主人公も、パズルのブロックも、タイトル画面のロゴも —— 最初は画像を1枚置くところから始まります。左上に部品を足し、ファイルシステムから画像を運び、右で位置を決めて、実行して確かめます。この往復で、4つのドックの流れが一周します。
① 置くもの
Godotを起動すると、最初にプロジェクトの一覧画面（プロジェクトマネージャ）が開きます。ここで新規プロジェクトを作ります。場所は空のフォルダを選び、レンダラー（画面の描き方）は、2Dでも Forward+ のままで構いません。
開いたら、左上のシーンドックにある 2D Scene のボタンを押します。Node2D という部品が1つでき、中央のビューポートも 2D に切り替わります。
Node2D ← ルート（いちばん上の部品）
└── Sprite2D ← これから足す
Node2D は部品をまとめる入れ物で、画像を描く欄を持っていません。画像を出すのは、その下に足す Sprite2D です。Node2D を選んだ状態で、左上の「＋」ボタン（Add Child Node）を押します。部品を探すウィンドウが開くので、検索欄に Sprite2D と入れて、出てきた Sprite2D をダブルクリックしてください。選んでいた Node2D の子（下にぶら下がる部品）として足されます。
② 画像を入れて、位置を決める
左上で Sprite2D を選びます。右のインスペクターの中身が入れ替わり、Texture（この部品が描く画像）という項目が出てきます。
左下のファイルシステムから icon.svg（新規プロジェクトに最初から入っている、Godotのアイコン画像）を探して、右の Texture の枠へドラッグしてください。ファイルシステムから右へ運ぶ、という往復がここで1回起きています。
ビューポートには、薄い青の枠が見えています。これがゲーム画面の範囲で、既定の大きさは 1152 × 648 です。Sprite2D は画像の中心を位置に合わせるので、位置が (0, 0) のいまは、枠の左上の角に画像の中心が来ています。枠に入っているのは、画像の右下の4分の1だけです。
右のインスペクターで Transform（位置や回転をまとめた見出し）を開き、Position の x に 576、y に 324 と入れてください。枠の大きさのちょうど半分なので、画像が枠の真ん中に来ます。Godot の2Dでは、y は下へ行くほど大きくなります。打ち込むと、中央の画像がその場で動きます。右の数値と中央の見た目がつながっていることを、ここで一度見ておいてください。
最後に Ctrl + S で保存します。保存先を聞かれるので、プロジェクトの直下に main.tscn という名前で保存してください。ダイアログに出る res:// は、プロジェクトのフォルダを指す書き方です。保存した瞬間、左下のファイルシステムに main.tscn が現れます。
③ 動かして確かめる
F6 を押して実行します。見るのは3つです。
まず、上にツールバーの付いた別のウィンドウが開き、暗い灰色の背景の真ん中に Godot のアイコンが1つ出ます。背景の灰色は既定の色です。端に寄っているなら Position の数値を、何も出ないなら Texture に画像が入っているかを確かめます。画面下の「出力」には、Godotの版や描画の方式が数行出ます。スクリプトが無いので、自分で出した文字はありません。
次に、実行したまま、右のインスペクターで Position の x を 300 に変えます。ゲームの中のアイコンも左へ動きます。Debug メニューの Synchronize Scene Changes（エディタで変えた値を、実行中のゲームへ送る設定）が既定でオンなので、実行中の変更もゲームへ届きます。確かめたら x を 576 に戻し、F8 で止めます。
仕上げに F5 を押します。メインシーンを聞かれるので Select Current を選ぶと、F6 と同じ画面が出ます。止めたあとで左下のファイルシステムを見ると、main.tscn の名前だけ色が変わっています。ファイルシステムから運んだ画像が、右で決めた位置に、実行したゲームの中で映っています。
ポイントは2つです。
- ドックは流れで覚える: ファイルシステムから開く、左上で選ぶ、右で決める、実行して確かめる。新しい機能に出会っても、この流れのどこの仕事かを先に決めると迷いません
- 見えないときは、左上の青い行から見る: 選んでいる行がずれていないか、F5 が別のメインシーンを起動していないか。保存したあとなら、作ったものが本当に消えることはまずありません
うまくいかないときは
| 症状 | 原因 | 直し方 |
|---|---|---|
| 左上や右のドックが消えた | ドックの閉じるボタンを押した | メニューの Editor → Editor Layout → Default で元の配置に戻す |
| 右の欄が、見たことのない項目に変わった | 左下で画像などのファイルをダブルクリックすると、右にそのファイル自身の設定が出る | 左上で部品の行を選び直す |
| エディタでは見えるのに、実行すると映らない | ビューポートの青い枠（ゲーム画面の範囲）の外に置いている | 画像全体が枠に入る位置へ動かす。Position は画像の中心の位置 |
| 閉じたら、置いた部品が消えた | 一度も保存していないシーンを、保存せずに閉じた。部品は保存するまでファイルにならない | 作り直して、閉じる前に Ctrl + S で保存する |
おまけ：先に知っておくと良いこと
- 名前の無いシーンは、実行前に保存を聞かれる: 一度も保存していないシーンで F6 を押すと、先に保存を求められます。一度保存したあとなら、変更したまま実行しても既定では自動で保存されます
- 画像は置くだけでファイルシステムに並ぶ: PNGをプロジェクトのフォルダへ入れると、Godotが自動で取り込み、左下のファイルシステムに並びます。取り込みの設定を触る必要は、しばらくありません
- 次に読むもの: 左上に並んでいたものが何なのかは シーンとノード入門、フォルダの分け方は プロジェクト整理、レンダラーの選び方など作り始める前に決めておく設定は プロジェクトの初期設定 にあります。何をどの順で覚えるかは 学習ロードマップ にまとめました
まとめ
- 覚えるドックは4つ: 左上「シーン」、左下「ファイルシステム」、右「インスペクター」、下「出力」
- 4つは流れでつながる: 左下のファイルシステムで開き、左上で選び、右で決める。中央はその見た目
- 開いた直後は 3D: 2D Scene を作ると 2D に切り替わる
- 開くか、入れるか: ファイルシステムに並ぶファイルは、ダブルクリックで開き、ドラッグするといまのシーンの中へ入る
- F5 と F6: F5 はメインシーン、F6 はいま開いているシーン。メインシーンはファイルシステムで名前の色が変わる
まずは Sprite2D を1枚置いて、F6 を押してみてください。灰色の画面にアイコンが1つ出れば、エディタの流れはもう一周しています。次は、そのアイコンを何の絵に差し替えますか。
