Godotはゲーム開発のための無料ミドルウェアです。このツールを使えば、画像表示や音楽再生などの面倒な処理を自動で行ってくれます。私は現在、Godotを使ってレトロゲーム「XeGrader」の移植を進めています。Godotでは2Dも3Dも扱えますが、XeGraderは元々2Dタイトルなので、この記事では2D開発を例に画面に何か表示するまでを解説します。

本記事はGodotを全く触ったことがない人向けに説明してはいますが、最低限のプログラム知識がある前提としています。開発環境はWindows11で説明します。

Godotは 2025/10/10現在は v4.5が安定版としてリリースされています。本ブログではこのバージョンを元に解説を進めていきます。簡単な手順のまとめです。

ダウンロードは下記の公式サイトからダウンロードしてください。

このリンク先に Godot Engine 4.5 とありますので、そちらをクリックします。Godot Engine - .NET というのもあります。こちらを使えば C# で記述できるようです。私も最初は慣れている C# でと思っていたのですが、Godot Engine で使用するスクリプト言語 GDScript もなかなか扱いやすかったので、今は GDScript を使っています。

Godot_v4.5-stable_win64.exe.zip というファイルが落ちてくると思います。これを解凍して得られる Godot_v4.5-stable_win64.exe が、そのままツール本体です。私はなるべくパスは短いほうが良いだろうと C:\\Godot というフォルダを作成して、その中に Godot_v4.5-stable_win64.exe を格納しています。

最後に必要に応じて Godot_v4.5-stable_win64.exe のショートカットを作っておいてください。インストールはたったこれだけです。パスの設定とか何も必要ありません。

Godot_v4.5-stable_win64.exe をダブルクリック、またはショートカットから起動すると、この画面が表示されます。

まずはテストで新規プロジェクトを作成してみます。左側の当該ボタンをクリックすると、新規プロジェクトを作成ダイアログが表示されます。

最初にデフォルトでドキュメントフォルダが選択されています。このままだと様々なファイルが入り乱れて大変なことになります。参照ボタンをクリックして新規フォルダを指定してください。今回はドキュメントフォルダに新規に TestProgram というフォルダを作ってみました。

先程は黄色で「指定したパスは空ではありません…お勧めします。」という警告が黄色で表示されていましたが、空のフォルダを指定したことで、緑色で「プロジェクトフォルダが自動的に作成されます。」と変わりました。Godot では基本的には黄色が警告、赤色がエラーの表記となります。

レンダラーは変更する必要は（今は）ありません。バージョン管理メタデータに Git が選択されていますが、これは私の環境に Git がインストールされているためです。何もなければここは「None」という表示にします。

今すぐ編集を始めるのチェックを付けたまま「作成」とすると、即座にエディタが起動しますが、次回起動時の確認のために、今回はこのチェックを外してください。準備ができたら「作成」ボタンをクリックします。

新しいゲームプロジェクトがランチャーに登録されました。次回からは、この「新しいゲームプロジェクト」をダブルクリックするとエディターが起動するようになります。ここまでが最初の起動までの準備です。

では、お待たせしました。「新しいゲームプロジェクト」をダブルクリックしてエディタを起動しましょう。

これがエディタの画面です。いきなりたくさんあるので面食らう人もいるかもしれません。すぐに使う可能性が高い項目だけ順に説明していきます。

Godot では映像表現を「シーン」単位で管理しています。無理やり日本語に直すと「場面」って事になるかな。それぞれの場面、例えばオープニングだったり、ゲームスタートデモだったり、ステージ1だったり、こういう場面の違い毎にシーンという概念で管理しています。このシーンは場面の違いのような大きな単位だけではなく、プレイヤーとか、モンスターとかの登場キャラ単位もひとつのシーンとして扱われます。

シーンタブの中に「ルートノードを生成」という表示があります。シーンはいろんなノードの集まりで構成されています。表示だったら Sprite2D とか、当たり判定なら Collision～ とか、様々なノードが最初から Godot が用意しています。このノードの組み合わせてシーンが作られます。無理やり日本語に直すとしたら「部品」でしょうか。用意された部品を組み合わせて場面を作る、そんな概念だと、今は「ふーん」と思っておいてください。

部品であるノードはツリー構造を持ちます。そのため最初の起点となるノードが必要となります。この起点のノードを「ルートノード」と呼びます。ノードがツリー構造を持つということは、その下にぶら下がったノードは「子」であり、自分がくっついているノードが「親」になります。この親子関係は、Godot では意識する必要があります。

プログラムを格納しているファイルは .gd という拡張子を持ちます。画像データからおそらく .png が基本になるでしょう。音声データならオススメは .ogg です。これらのファイルが管理化のどこにあるのかを視覚化して確認できるのが、このファイルシステムタブです。作ったばかりですので、中身は空っぽです。暫定サンプルとしてアプリアイコンとなる icon.svg が入っているだけです。

起動直後は「透視投影」と表示されている場所です。デフォルトで 3D が選択されているため、編集表示も 3D 空間的な表示となっています。これを切り替えるのが上部のボタンです。

シーンの編集は 2D または 3D をクリックします。今回は 2D で説明していくので 2D をクリックすると表示がXY座標のゲージが付いた画像編集のような表示になります。

Script をクリックするとテキストエディタの画面になります。ただ、今は完全に空っぽの状態なので、なにも編集することは出来ませんが、そのうちここで編集することがメインになってきます。

各ノードの設定値を確認したり変更したりする場所です。なんでもかんでもプログラムで設定する必要はなくて、このインスペクターで初期値を設定しておくと、そのノード（厳密にはシーン）を使う時には最初から設定した値で作られています。上手く使うととても便利ですが、時々設定を忘れて困ることもあるので一長一短ですけどね…。

ここはノードごとに説明が変わる場所なので、今はノードの詳細設定場所なんだと理解しておく程度で大丈夫です。

兎にも角にも、まずは絵を表示させてみたいよね。私が初めてのゲームエンジンなり、ターゲットマシンを触り始める時も、この最初の一歩である画面に何かを表示されるまでが大変なんだ。ところが、Godot だと、その大変な部分を全部システムがフォローしてくれるので、とっても簡単。その簡単さを味わってほしいのが、本記事の目的です。

まずキャラクター画像ですが以下のデータをダウンロードして使います。

画像は OpenGameArt サイト掲載のデータです。

スライム：https://opengameart.org/content/slimes-0

背景画像：https://opengameart.org/content/forest-tiles

ダウンロードしたら解凍してください。以下の2つの画像が出てきます。

この2つの画像をファイルシステムの res:// にドラッグ＆ドロップします。正常にドラッグ＆ドロップできればこのような表示に切り替わります。これで表示に必要な画像の準備は完了です。

シーンのルートノードを生成から2Dシーンをクリックします。

シーンに Node2D というノードが追加されました。このノードには座標以外に特に目立った特徴がないノードです。フォルダとかグループ管理みたいな役割で使用されることが多いです。この Node2D が今回の起点（ルートノード）となります。このままでは何も設定することが出来ませんので、続いて絵を表示するノードを子として追加します。

Node2Dを右クリックします。するとサブメニューが表示されますので、その中から「＋子ノードを追加...」という項目をクリックして選択します。Node の新規作成というダイアログが表示されます。

かなりたくさんのノードがあります。今回は 2D画像の表示だけですので、Sprite2D というノードを使用します。ツリーから探すのは大変なので、検索項目に追加したいノード名を入力して絞り込みます。Sprite2D なら Spri ぐらいまで入力するとヒットすると思います。Sprite2D にカーソルが合っているのを確認の後、作成ボタンをクリックします。

Node2D の下に Sprite2D がぶら下がりました。これが親子関係を示しています。Node2D の子が Sprite2D で、Sprite2D の親が Node2D です。この Sprite2D は背景画像として使用するつもりなので、名前を BackGround に変えます。Windows のエクスプローラーと同じようにクリックするか、キーボードで F2 キーを押すか、右クリックから名前の変更をクリックして選択するか、…自分の好きな方法でリネームしてください。

さて、そのまま同じようにもう一つ Sprite2D ノードを作ってしまいましょう。親の位置は BackGround としてください。背景画像の上にスライムというキャラクターを乗せるので、このような親子関係とすると重ね合わせを考えなくて良くなります。名前も Slime に変えておいてください。正しく追加すると、以下のような状態になります。

最後にシーンの保存をします。シーンメニューを開いてシーンを保存をクリックします

…が、私はショートカットの Ctrl + S をオススメします。名前をつけてシーンを保存というダイアログが表示されます。Node2D がルートなので、保存名称が node_2d.tscn になっていると思いますが、ここでは草原を場面としてイメージしていますので、名前を grass.tscn としておきます。

いよいよ最後の段階です。Godot に限らずですが、ノードなどに貼り付ける絵の事を専門的にはテクスチャーと呼んでいます。以後は絵のことはテクスチャーと呼びます。

では、まずシーンの BackGround をクリックします。インスペクターの表示が次のように切り替わります。

このインスペクター、Sprite2D項目に Texture <空> という表示が見えます。ここが Sprite2D ノードに画像を指定する項目になります。ファイルシステムから BackGround.png を <空> の部分にドラッグ＆ドロップしてください。

<空> だった場所にドラッグ＆ドロップした画像が表示されれば成功です。実際にどのような表示になっているか確認してみましょう。編集エリアの切り替えで 2D をクリックします。

画像が表示されています。赤い十字点が 0 地点です。通常の画面では左上になります。つまりこのままでは、背景画像は左上にはみ出していることが分かります。これを正しい位置に表示させたいのですが、その方法は大きく2つあります。

まずインスペクターで状態を確認しましょう。Offset 項目の > をマウスでクリックすると、項目が広がって隠されていた設定項目が表示されます。

この中に Centered という項目があります。デフォルトはオン（水色のチェック状態）になっています。試しにこれをクリックして、チェックを外します。すると…

どうですか。表示位置がいきなりぴったり左上に揃いました。この Centered は起点をテクスチャーの中心にする指定です。そして、表示位置はデフォルトで原点である X=0, Y=0 に配置されています。Centered を外すことで、起点はテクスチャーの中心から左上に変わるため、いきなり位置がぴったり合ったというわけです。このやり方は 2.  Sprite2Dノードの表示起点を左上に変更するというやり方です。

では、1 の位置を移動するにはどうすればよいでしょうか。それは簡単です。2D 編集画面で BackGround の画像をクリックしたままドラッグ移動させるだけです。移動中は左下に移動として、その座標情報が表示されます。

…えっ!? この方法だと移動は簡単だけで1ドット単位でキッチリ位置合わせするのは難しいって？なるほど、ではまたインスペクターに戻って今度は Transform の > をマウスでクリックして設定表示を広げてみてください。

Positionという項目が出てきました。これが表示位置の数値入力をする場所です。ここに任意の数値を入力することで、好きな位置に移動させることが出来ます。

💡Tips

Position の項目名にクルッと回った矢印アイコンがありますが、これはデフォルトから何か設定が変更されていることを示しています。このクルッとアイコンをクリックすることでデフォルト値に戻すことが出来ます。

ここまでくれば、あとは地形画像表示の応用だけです。まず、Slimeノードを選択してください。インスペクターの Texture に、ファイルシステムから slime.png をドラッグ＆ドロップします。

編集領域原点にスライムが表示されました。マウスでスライムをドラッグして背景の中心に移動させます。今回は位置は適当で良いので、だいたい真ん中とします。この 2D編集画面ですが、マウスホイールで次の操作ができます。

操作の練習として、この画面のように出来たら OK です。

ここまでただの一度もプログラミング的なことはしてないですが、Godot システムがちゃんと処理をして、実行可能な状態に変換してくれます。では、実行確認をしてみましょう。F5 キーを押すとデバッグ実行開始です！

おっと、確認ダイアログが出てきました。ダイアログに表示されている通り、本来であればアプリケーション設定が必要なのですが、今回はそういう難しいことは省略してここまで作成してきました。いざ実行しようとしたら、どれが最初のシーンになるのか分からないので困ってしまって、こちら側にどうするのかと確認してきているのです。

現在はシーンは grass.tscn 一つしか無いので、「現在のものを選択」で簡単に済ませてしまいます。このボタンをクリックすると、

このようにアプリケーションとしてウィンドウが表示されて、先程まで設定してた画像が表示されています。この状態で実は内部的にはほとんど実行ファイル状態に近いのです。今回の解説はここまでですが如何だったでしょうか。失敗を恐れず、いろいろな画像で試してみてください。また、ノードはいくつでも配置できますので、例えばスライムを10匹登場させるなり、分かる範囲でノードの追加やインスペクター設定を弄ってみてください。弄れば弄るほど理解が早いですよん。

どうしても困ったらコメント欄から質問してください。続きは下記のリンクからです（読んでね♥