このチュートリアルでは、ゲーム制作の知識は全くない、プログラミングもできない、それでも本格的なゲームをツクりたい！という方のために、「ACTION GAME MAKER」でゲームを作る方法を基礎から学んでいくチュートリアルです。
第一章では、実際にゲーム制作を始める前に、
「ACTION GAME MAKERとはどんなツールなのか」
「ベースとなっているGodot Engineとはどんなエンジンなのか」
「Godot Engineの基礎的な操作方法」
といった基礎的な知識を学んでいきます。
UnityやUnrealのような、いわゆるゲームエンジンと呼ばれる「ゲームを制作するソフトウェア」の１つ、Godot Engineを、プログラミングが全くわからない人でも扱えるようにカスタマイズしたものです。
Godot Engineは近年急速に利用の拡大が進んでいるゲームエンジンです。
どのようなジャンルのゲームでも制作できる汎用のゲームエンジンで、UnityやUnreal Engine等に劣らぬ多彩な機能をもった高性能エンジンです。
PCはもちろん、スマホ用ゲームやNintendo Switch用ゲームなど様々なゲームが制作されています。どのようなゲームが作られているのかについては、以下の公式ショーケースをご覧ください。
このように，Godot Engineはどのようなゲームでも制作できる強力なゲームエンジンですが、プログラミングを扱えることが必要不可欠となっています。ACTION GAME MAKERは、専用のヴィジュアルスクリプトを用意することで、プログラミングが扱えない人でもGodot Engineを扱えるようにしように設計したものになります。
Godot Engineの2Dの機能はすべて利用できますので、ACTION GAME MAKERでも、2D作品であればショーケースにあるようなゲームが作成可能になっています。
Godotがいくら強力なエンジンでも、プログラミングではないヴィジュアルスクリプトでは制作できるゲームが限られているのでは？と思った方もいるのではないでしょうか。
本作のヴィジュアルスクリプトは、前作「アクションゲームツクールMV」から引き継いだものですが、前作ではそのヴィジュアルスクリプトの高い自由度から、ジャンプアクションだけではなく、シューティング、格闘、パズル、RPGなど様々なジャンルの作品が制作されました。
さらに、60作品以上のゲームがNintendo Switch™でリリースされています。
前作「アクションゲームツクールMV」から引き継いだビジュアルスクリプトに、Godotの高度な機能が加わったものが「ACTION GAME MAKER」です。
ACTION GAME MAKERを扱うにあたって、まずは基本となるGodot Engineを触ってみましょう。ACTION GAME MAKERはGodot Engineに専用機能を追加したものなので、基本のUIはGodot Engineと同一で、そのままGodot Engineとして扱うことができます。
ACTION GAME MAKERを起動すると、「プロジェクト」を管理するための「ランチャー」と呼ばれる画面が立ち上がります。「プロジェクト」とはゲームを制作するための作業場所のようなものと考えてください。
まずは、左上の「＋新規作成」から新しいプロジェクトを作成しましょう。
プロジェクト名を入力できますので、Tutorialと名前を入力しましょう。プロジェクト名はそのままゲームの名前になりますので、わかりやすい名前にすることがおすすめです。
入力できたら、「作成して編集」ボタンを押します。
ここで作成したプロジェクトは、ユーザー名\Documents\ActionGameMaker\{プロジェクト名}のフォルダに格納されます。
実際に操作をはじめる前に、Godotのゲーム制作で重要となる「シーン」と「ノード」について説明します。
Godotでは、「シーン」というものを作り、そこに「ノード」というものを配置することでゲームをつくっていきます。
少し分かりづらいので、遊園地を例に説明します。**「シーン」は遊園地のアトラクション、「ノード」はアトラクションの部品です。ジェットコースターであれば、レールや柱、コースターの車体等が「ノード」**というわけです。
これらのアトラクションを、「プロジェクト」という土地の中に配置していくことで大きな遊園地が作られていくということです。
さて、現在以下のような画面が開かれているはずです。これがGodot、そしてACTION GAME MAKERの基本の画面となります。
各表示領域は以下のような振り分けになっています。
たくさんの画面が並んでいて複雑に思えるかもしれませんが、Godotの画面は
「左で選んで、中央で見て、右で変える」
という概念で設計されています。
シーン：シーン内にあるノードが一覧で表示されています。アトラクションの部品が一つ一つ表示されているイメージです。
ファイルシステム：プロジェクト全体にある素材が一覧で表示されています。遊園地の例では、建設予定地に搬入済みの資材置き場だと考えてください。
エディター画面：シーンの全体像が表示されています。部品をこのウィンドウで配置をしてアトラクションをつくっていきます。
インスペクター：左で選択したノードの情報が表示されます。選択した部品の設定を調整します。ジェットコースターの色を変えたり、最高速度を変えたりといったイメージです。
説明していない画面もありますが、まずはこの考え方を覚えておくと理解しやすいはずです。では、実際に操作していきましょう。
まずは、「シーン」のルート「ノード」というものを作る必要があります。ルートノードとは、その名の通りシーンの根っこ(元)となるノードです。これから作るのはアトラクションです、売店です等、作るものの種類を決めるものになります。
画面左上のルートノードを作成：から、2Dシーンを選択してください。
ルートノードを作成：がNode2Dというものに変わりました。これがルートノードです。Node2Dは2Dの画面の元となるノードですので、2Dのゲームを作りますよ、と決めたことになります。
中央のエディター画面の左上に**[未保存](*)と**表示されています。シーンは作成しただけでは保存されませんので、まずは保存しましょう。
1. [未保存](*)と表示されているタブを右クリックしてください。
2. メニューが表示されるので、「名前をつけてシーンを保存」を選択しましょう。
3. エクスプローラーのような画面が立ち上がります。これは、**「ファイルシステム」**というプロジェクトにあるフォルダやファイルを表示するものです。遊園地の建設に使う資材を保管している倉庫のようなものだと考えてください。
4. 下部のファイル名はデフォルトではnode2d.tscnという名前になっています。このまま保存をすると、後で探すときに困ることになるのでtest_scene.tscnという名称に変えて保存をしましょう。
AGMakerというフォルダが最初からありますが、これはACTION GAME MAKERの機能で扱うデータがまとめて保管されている場所になりますので、混ざらないようにフォルダは何も選択しないで保存しましょう。
5. うまく保存ができれば**[未保存](*)がtest_sceneという名称に変わります。また、画面の左下の[ファイルシステム]という名前のウィンドウにtest_scene.tscnが表示**されているはずです。
つぎは、ノードの扱い方について学んでみましょう。新しくノードをつくって、ゲーム世界に配置して、カスタマイズしていきます。
まずは、四角形をシーンに配置してみましょう。
「左で選んで、中央で見て、右で変える」の最初、「左で選ぶ」の部分です。
1. 四角形を描写するノードをシーンに配置します。Godotで2D画面に長方形を描写するノードは「ColorRect」といいます。Color(色)Rectangle(四角形)という名前の通り、色がついた四角形を描写する機能を持ったノードです。
2. シーンウィンドウ左上の「＋」(子ノードを追加)ボタンをクリックします。
3. 上部の検索バーでColorRectと入力し、出てきたColorRectというノードを選択します。
4. 「作成」ボタンを押します。
5. 中央のエディター画面に真っ白な四角形が出現しました。これがColorRectノードで描写された四角形です。
1. 早速、テストプレイをしてみましょう画面右上の**「現在のシーンを実行(F6)」ボタン**でテストプレイを実行してみましょう。
似たようなボタンで「プロジェクトを実行(F5)」というボタンがありますが、それは別のシーンが実行されてしまいますので、必ず「現在のシーンを実行」で起動してください。
2. 新しいウィンドウが立ち上がります。これが、実際にゲームとして起動した際の見え方になります。四角形がどこに描写されているのかというと・・・位置を変えていなければ左上の隅に表示されているはずです。
3. 表示が確認できたら、右上の✕ボタンでウィンドウを閉じましょう。
もし表示されていない場合は、一度ウィンドウを閉じて、改めて「現在のシーンを実行(F6)」を試してください。それでも見えない場合は四角形の場所を動かしてしまったのかもしれません、次に進んだあとにもう一度ためしてみましょう。
現在、四角形は左上に表示されてしまっているのでいまいちです。中央の画面、エディター画面はシーンのプレビュー画面なので、ここで操作をして見え方を直してみましょう。
「左で選んで、中央で見て、右で変える」の「中央で見る」の部分です。
1. まずはプレビューの拡大、縮小を試してみましょう。エディター画面を選択した状態で、マウス中央のホイールを回してみてください。前に回せば拡大、後ろに回せば縮小できます。現在の倍率は、エディター画面の左上に表示されます。
2. プレビュー画面の位置を動かしてみましょう。引き続きエディター画面を選択した状態で、マ**ウスのミドルクリック（ホイールの押し込み）をしてみましょう。**マウスのアイコンが十字の矢印に変わるはずなので、押し込んだままマウスを動かしてみましょう。プレビューの位置が動くはずです。
3. 拡大縮小とプレビューの移動を使って、緑の線と赤い線の十字(ここを原点といいます)の右下にある、青い細い線の四角形が収まるようにしましょう。この青い四角形は、ゲーム画面の領域を示します。ColorRectで作成された白い四角形は、青い四角形の左上にあるのでテストプレイでもその位置に表示されたのです。
ゲーム画面の中央に白い四角形を動かしてみましょう。
1. ColorRectノードをクリックして選択状態にしてください。
2. エディター画面の上部の操作パネルで「移動モード(W)」をクリックして切り替えます。
3. このモードでは選択したノードの位置を動かすことができますので、エディター画面で左クリックしてドラッグして四角形を画面(青い四角形)の中央に移動しましょう。
4. 再び、テストプレイをして見え方を確かめましょう。右上のメニューで「現在のシーンを実行(F6)」します。
5. うまく移動できていれば四角形がゲーム画面の中央付近に表示されるはずです。
現在ColorRectノードは真っ白ですが、ノードの機能として色を変更することが可能になっています。別の色に変えてみましょう。
「左で選んで、中央で見て、右で変える」の「右で変える」の部分です。
1. 左のシーンウィンドウでColorRectノードを選択します。
2. 右のインスペクターウィンドウを見てください。たくさんの設定項目が並んでいます。これらの設定項目は選択しているノードが扱える機能が一覧で並んでいます。それぞれの項目は「プロパティ」といいます。ジェットコースターの例であれば、最高速度や車体の色といった変更可能なものが表示されているイメージです。
3. 今回変更する項目はわかりやすく、一番上にある「色」というプロパティです。「色」の横の真っ白な長方形をクリックしてみましょう。
4. 様々な方式で色を変更できますが、一番わかりやすいデフォルトのRGBで設定しましょう。RGBとは、Red(赤)Green(緑)Blue(青)の略です。モニターは、この3色の光を混ぜることで様々な色を表現しています。
TIPS: 3つの色を混ぜると黒くなるのでは？と感じる方もいるかもしれません。絵の具であればそれは正しいのですが、こちらは「光」なので、2つのライトが重なる部分は光量が2倍になり、明るくなります。このような色の混ぜ方を「加法混色」といいます。
5. 試しにRの値を255から0にしてみましょう。上の図にあるように、四角形は緑と青の混合色であるシアン色になったはずです。
6. このように、Godotでは右側のインスペクターでプロパティ(設定項目)を変更することでノードをカスタマイズしていくことができます。
続いて、ノードの操作についてより深く学んでみましょう。
複数のノードを配置したときに、位置関係はどうなるのでしょうか？実際に試してみましょう。
今回はただの四角形ではない画像を配置してみましょう。画像を表示できる機能を持ったSprite2Dを使います。このノードは2Dの画像(スプライト)を表示する機能を持ったノードです。
1. 左側のシーン画面で、Node2Dを選択しましょう。これは、新しく追加されるノードは選択したノードを親とする「子ノード」として配置されてしまうためです。「子ノード」とは、親となるノードに付属するノードとなります。ジェットコースターの例でいうと、車体の中にある車輪や椅子のより小さなパーツが子ノードです。今回新しく設定するSprite2DはColorRectの付属品ではない独立したものとしたいので、Node2Dを選択した状態とします。
2. Node2Dを選択した状態で左上の＋ボタン(子ノードを追加)を押します。
3. 上部の検索バーでSpriteと入力し、Sprite2Dというノードを選択します。
4. 「作成」ボタンを押します。左上の画面にはSprite2Dというものが表示されました・・・が、他は何も変化はないようです。これは、「どの画像を表示するか？」という情報が設定されていないからです。
5. 左で選んで、右で設定していきましょう。左の画面でSprite2Dを選択し、右の画面、インスペクターを見てください。
6. 今回設定する表示画像を決めるプロパティは一番上の「テクスチャ」です。
「テクスチャ」とは、ゲームの中の物体に貼る模様やシールのようなものです。
7. テクスチャの横にある<空>を選択してください。たくさんの選択項目がでてきますが、一番下の「読み込む」ボタンを押してください。
8. 以下のようなファイル選択ウィンドウが開きます。AGMakerというフォルダと、icon.svgという画像だけ表示されているはずです。この2つはACTION GAME MAKERでプロジェクトを作成したときに自動で生成されるものです。
なお、ここに表示されているものと、画面左下の「ファイルシステム」に表示されているものは同じです。test_scene.tscnが表示されていませんが、それは画像とは関係がないファイルのためフィルターで除外されているためです。
Godot Engineでは、この「ファイルシステム」の中にある素材しか利用できません。パソコンの中にあるものを直接選択して利用することはできないのです。素材を扱うためには、遊園地の建設予定地(プロジェクト)の倉庫(ファイルシステム)に一度運び込む必要があります。
9. まずは、既に倉庫にあるicon.svgを選択してください。水色の四角形の左上、赤い線と緑の線が交わる部分にアイコンが表示されるはずです。これで、Sprite2Dというノードに、アイコンの画像をシールとして貼り付けることができました。
シーンウィンドウでSprite2Dを選択して、エディター画面の移動モードを使って動かし、水色の四角形に重ねてみてください。
水色の四角形の上に画像が表示されているはずです。これは、Godotでは、左のシーンウィンドウで下の方向にあるものを手前に表示するためです。
試しにシーンウィンドウで順番を入れ替えてみましょう。シーンウィンドウでSprite2Dをクリックしてドラッグし、ColorRectとNode2Dの間に配置しましょう。
アイコンの前に水色の四角形が表示されるようになりました。
このように、Godotでは、**「シーンウィンドウで下にあるものほど、ゲーム画面では手前」**で表示されることになります。
さて、先程の説明の中で「子ノード」というものがでてきました、実際にどのような動作になるのか試してみましょう。
今度はSprite2DをColorRectの子ノードにしてみます。
1. Sprite2Dを先程と同じくクリックしてドラッグし、ColorRectに重ねるように置きます。
2. 表示が以下のように変わりました。Sprite2DはColorRectの下に、少し右にずれて表示されています。これが子ノードになった状態です。
3. 子ノードはシーンウィンドウでColorRectより下の方になるため、「シーン上で下が手前に表示」のルール通り、シーン上でもColorRectより手前に表示されます。
4. 次は親ノードであるColorRectを移動すると子ノードのSprite2Dがどうなるか試してみましょう。
5. 左のシーン画面でColorRectノードを選択して、中央のエディター画面を移動モードにします。
6. 正しく子ノードになっていれば、ColorRectノードを動かすとSprite2Dも一緒に動くはずです。
7. 子ノード化をすることで、このようにSprite2DをColorRectの付属品としてまとめて操作をすることが可能になります。
さて、これでGodotの基本的な概念や操作方法を学ぶことができました。第一章では、ノードの作成と操作を通じて
「Godotではシーンの中にノードを配置することでゲームを作る」
「ウィンドウは左で選んで、中央で見て、右で変更」
「シーンウィンドウで下の方のノードがゲーム画面では手前に表示」
といった、基本事項を学びました。
次はいよいよ、「スクリプト」というものを使ってゲームとして動かしていく、アトラクションに乗って遊べるようにしていくのですが・・・Godot Engineではプログラミングの技術が必須になっています。実際にゲームと言えるような状態にしていくにはプログラミングを少しずつ、基礎から学んでいく必要があるのですが、それにはたくさんの時間が必要になります。
でも大丈夫です、ACTION GAME MAKERのヴィジュアルスクリプトであれば事前学習無しでもすぐにゲームをつくっていくことができます。
プログラミングはわからないけど、Godotでゲームをつくってみたい、そんな人のためにACTION GAME MAKERがあるのです。
第二章では、ACTION GAME MAKERのヴィジュアルスクリプトを学んで行きましょう。
