ここからは実際にアクションシューティングゲームを作っていきます。今回は「プレイヤーキャラクターが歩いて、ジャンプする簡単なステージを作る」ところまでを解説します。
第二章の完成イメージはこんな感じです。
まず、ステージとなるシーンが必要です。そのシーンにはキャラクターが動き回るための足場が必要でしょう。その後、キャラクターのシーンを作り、ヴィジュアルスクリプトで動きを設定していきます。
第一章では、Godot Engineの機能だけを使って作成しましたが、ここからはACTION GAME MAKERの機能を使ってゲームを作成していきます。
Godot Engineでは、ルートノードに1つ1つノードを追加していくことで、キャラクターやコースといったシーンを制作していくのですが、それはなかなか大変です。
そのため、ACTION GAME MAKERでは、大きく2つに機能わけしたプリセットシーンを用意しています。
「ゲームシーン」とは、ゲームのステージやコースのためのシーンです。
「ゲームオブジェクト」とは、プレイヤーや、敵、アイテムなどのシーンです。
「ゲームシーン」の中に、「ゲームオブジェクト」を配置してゲームを作っていく、という制作方式をACTION GAME MAKERでは採用しています。
「ゲームシーン」「ゲームオブジェクト」のように、ACTION GAME MAKERで追加されたシステムやノードには、青とオレンジで色分けされたアイコンを設定しています。この色分けのノードやボタンがあれば、ACTION GAME MAKER用の機能です。Godot用の元から存在するノードは、白や青、緑等の一色で表現されています。(一部2色以上使われるものもあります。)
それでは、早速ゲームシーンを用意してみましょう。
1. シーンタブの「＋」(新規シーンを追加する)ボタンをクリックします。
2. シーンウィンドウのルートノードを作成：で「ゲームシーン」を選択します。
3. シーンウィンドウに自動でたくさんのノードが設定されました。これが、「ゲームシーン」のプリセットノードです。
4. 新しいシーンをつくったので保存しておきましょう。[未保存](*)を右クリックして、「名前をつけてシーンを保存」します。
5. ゲームシーンはステージやコースのことなので、stage1.tscnと名付けて保存しましょう。
さて、突然大量のノードが追加されたわけですが、それぞれどのような機能を持っているのでしょうか。ACTION GAME MAKERでは、「レイヤー」の概念を使ってゲームシーンを整理しています。
レイヤーとは奥行きの表現方法の１つで、舞台のようなものです。一番奥にある背景レイヤー（書き割り）、中央にあるキャラクターレイヤー（出演者が演技をするスペース）、一番手前にある前景（ステージ前面に置かれた小物）を、「カメラで正面から撮影する」ことでゲームのシーンを表現します。
ACTION GAME MAKERでは、大きく7つのデフォルトのレイヤーを用意しています。名前やアイコンが違い、それぞれ少し機能が異なるのですが、以下の図のような形で重なっています。
ゲームシーンの初期状態では、それぞれのレイヤーの中に、動作に最低限必要となる「ノード」がプリセットで設定されており、それを映し出すためのカメラが１つ用意されている、という状態です。
7つのレイヤーはアイコンを見ると少し違いがあることがわかると思います。大きく2種類、「SceneLayer」ノードの子になっているBase~DistantViewの5つのレイヤーと「UI」「PostEffectLayer」2つのレイヤーです。
この2つの違いは、カメラの位置によって見え方が変わる奥行きのある「空間」なのかカメラの位置にかかわらず常にカメラに表示されるものなのか、という違いです。
**舞台の例であれば、実際の舞台が「SceneLayer」、カメラのレンズにかけられたフィルターが「UI」「PostEffectLayer」**になります。
ACTION GAME MAKERでは、専用の「シーン遷移」システムでシーンの動作を管理しています。このシステムは、シーン同士のつながりをヴィジュアルスクリプトと同様の操作で設定するものです。
まずは、今回作成したシーンをゲームで最初に表示されるシーン「初期シーン」として設定しましょう。
1. 画面中央上部のボタンを**「SceneTransition」に変更**します。このボタンは、中央のエディター画面の表示を切り替えるものです。
2. なにもないグリッド画面が表示されます。先程ファイルシステムに保存した**「stage1.tscn」を左下のファイルシステムウィンドウからドラッグ＆ドロップ**しましょう。
3. 何もなかったグリッドにstage1.tscnが表示されれば完了です。
4. 中央上部のボタンで「2D」を選択して先ほどの画面に戻りましょう。これで、ゲームを起動した際にstage1が表示されるようになりました。
補足：もし、初期シーンを設定しないとどうなる？
ACTION GAME MAKERでは、core.tscnという処理専用のシーンを裏で実行し、その前に各ゲームシーンを表示するという設定になっています。
もし、初期シーンを設定しない場合は、処理専用のシーンのみが表示される、つまりなにもないシーンが表示されてしまいます。
それでは、足場の作成に入りましょう。
地面と、ジャンプして乗る空中の足場などがほしいですね。足場を作るために使うノードは色々ありますが、今回は広い範囲で色々な形の足場を作ることになりますから、それに適したノードを使っていくことが必要です。
今回は、「タイル」形式で作成しましょう。「タイル」とはその名の通りタイルのような小さな画像を敷き詰めることで足場をつくっていく形式です。
タイルはまずは以下の画像を使ってみましょう。
画像を右クリックしてダウンロードしてください。
第一章で解説した通り、Godot Engineでは、素材を扱うためには「ファイルシステム」という倉庫に一度いれる必要があります。ファイルシステムに取り込む方法は、エディター上に素材をドラッグ＆ドロップするだけです。
1. 画像をダウンロードしたPCのフォルダを開いた状態にしておきましょう。
2. エディターを開き、左下の「ファイルシステム」でres://をクリックして選択した状態にしてください。素材は、選択したフォルダの中に取り込まれるためです。
3. PCのフォルダからエディター上の好きなところに、tile.pngをドラッグ＆ドロップしてください。
続いて、どのレイヤーにタイルを敷いていくのかですがBaseLayerを使っていきましょう。BaseLayerは、基本となるレイヤーとしてプリセットで設定されており、それより奥のレイヤーは背景として設定されています。
BaseLayerをみると、すでにBase, BaseDecoration, BaseCoverの3つのノードが配置されています。
これらのノードは、タイルを扱うためのノード、TileMapLayerノードの名前を変えただけのものです。
なぜ同じノードが名前を変えて3つも存在するのか？というと、**タイルを重ねることで奥行きを表現するために存在しています。**例えば、地面となるタイルの上に、装飾として装飾を重ねて置きたいとします。このとき、レイヤーが1つしかないと、地面のタイルが松明に置き換わってしまって重ねることができませんが、レイヤーの数だけ重ねて配置することができ、奥行きを表現することができます。
今回は、Baseという名前のTileMapLayerを使ってタイルを配置してみましょう。Baseを選択してみてください。
下から「タイル配置」というウィンドウが現れましたが、何やら英文が書かれています。ここには、「タイルセットがありません、インスペクターでタイルセットをつくってください」という事が書かれています。
タイルセットとはなにかというと、このTileMapLayerノードで取り扱うタイルがどのような大きさで、どのような形をしているのか、キャラクターとぶつかるかどうか、といった基本情報を設定するものです。
先ほどタイル用に用意した画像は高さ48x48の四角形で、キャラクターの足場となるためキャラクターとぶつかるタイルです。それに合う形でタイルセットを作りましょう。
1. インスペクターの**タイルセットの<空>をクリックして、「新規タイル設定」**を選びます。
2. タイル設定の中身が編集できますので、以下のように設定します。
タイルの形：Square
タイルサイズ：x = 48px, y = 48px
3. 物理レイヤーを展開し、[+要素を追加]ボタンを押します。
4. コリジョンレイヤー/コリジョンマスクという項目がでますが特に変更は必要ありません、最終的に以下の状態になっていればタイルセットの設定は完成です。
補足：コリジョンレイヤーとコリジョンマスクについて
Godotでは、ノード同士がぶつかることができる、できない、をこの項目で設定します。コリジョンレイヤーとは、所属するグループを示し、コリジョンマスクはどのグループとぶつかりたいか、を設定します。
詳しくは次の第三章で紹介します。
タイルセットの作成が終わると、下部のウィンドウにでているメッセージが「TileSet」のソースがないというメッセージに変わりました。これは、タイルに使う画像が設定されていないので配置できません、という意味になります。
次は、タイルの画像に先ほどのtile.pngを設定し、タイルに衝突の形(壁判定)をポリゴンで設定する必要があります。
1. 最下部にあるタブを**「タイル配置」から「タイル設定」に**切り替えます。
2.ファイルシステムウィンドウのtile.pngを「タイル設定」ウィンドウの左にある黒い枠の中にドラッグ＆ドロップで入れ込みましょう。
3. 新しいウィンドウが立ち上がります。このタイルセットは48pxの正方形なので**、タイルサイズ項目をx:48 y:48にして「はい」**を押しましょう。
補足：アトラスとは？
アトラスとは、様々な種類の画像をまとめて1枚の大きな画像ファイルとしたものです。ゲームエンジンでは、効率良く画像を表示するために、大きな画像ファイルの一部だけを切り出して表示する仕組みがあります。今回のタイルは1種類だけなのでアトラス化は不要ですが、床、壁、空中、坂など様々な形状のタイルを同時に扱いたい場合、１つの大きな画像にまとめることで、複数の小さな画像を扱うよりも効率的に表示をすることができます。
4. 続いて、**オートタイルとして読み込みますか？**というウィンドウが開きます。
ACTION GAME MAKERでは特定の形式で並べられたアトラスをオートタイルという、配置や繋がり方に合わせて自動で表示するタイルを変える仕組みを用意していますが、今回はタイルが1つだけなので使用できません、「いいえ」を押してください。
5. タイル設定が以下の表示になっていれば成功です。続いて、壁判定の形をつくります。
6. タイル設定ウィンドウの中央上部の**「選択」をクリックしてタブを切り替えます。**このタブは、選んだタイルの詳細な設定を行うタブです。
7. ウィンドウ右側に表示されているタイルをクリックしてください。「選択」タブの下部がインスペクターのような表示に変わります。
8. 選択タブをスクロールして、**一番下にある「物理」＞Physics Layer 0を開きます。**Physics Layer 0は先ほどタイル設定で作成した物理レイヤーのことです。
9. ここからは、壁判定をポリゴンツールで描写していきます。**□に+のついたアイコン（ポリゴンツールを追加）**をクリックしてください。これは、ポリゴンを描写するための頂点を追加するツールです。ポリゴンとは、点で囲むことで図形を描写するシステムです。
10. 選択できたら、緑の四角形の右上の角をクリックしてください。ポリゴンの頂点を示す◇が表示されるはずです。
11. 同様に、右下、左下、左上と時計回りに四隅に点を追加していきましょう。
12. 最後に右上の追加済の点をもう一度クリックすると、緑色のタイルがオレンジになるはずです。これは、頂点で囲まれた領域＝タイル全体が壁判定となった、ということを示しています。
トラブルの対処法
頂点の位置がズレてしまった場合：□に矢印アイコンのツール（ポイントツールの編集）を使うことで点を動かすことができます。
余計な頂点をつくってしまって五角形になってしまった場合：□に✕印のツール(ポイントツールの削除) を使うことで点を消すことができます。
さて、これでタイルの準備が整ったので配置していきましょう。まずは、カメラの範囲内に床と足場を作ることを目指します。
1. 中央上部のエディター画面を見てください。赤い線と緑の線が交わる点を中心とした、紫色の細い線が見えるはずです。これは、カメラの範囲を示しています。まずは、カメラの範囲を中心に捉えていきましょう。
2. エディター画面内で**マウスのミドルクリック（ホイール押し込み）**をしてください。マウスカーソルが十字の矢印の形になるはずです。そのまま、マウスを動かして表示範囲を動かして紫色の四角形がすべて表示されるようにしましょう。紫色の四角形が小さすぎる/大きすぎる場合はマウスホイールを回して拡大/縮小して画面内に収まるように調整しましょう。
3. 中央下部のウィンドウのタブを**「タイル配置」に戻し**ます。新たにタイルが表示されたはずです。
4. 下部ウィンドウ右側に表示されたタイルをクリックして選択してください。
5. 中央上部のエディターにマウスを持っていくとタイルが表示されるはずです。左クリックでタイルを配置、右クリックでタイルを削除することができます。
6. 床と足場を以下のような形で描きましょう、厳密に同じである必要はありませんが、足場が高すぎるとジャンプが届かないかもしれないのでこれくらいの高さにしておきましょう。
きちんとカメラの範囲内にタイルが配置できているか、テストプレイをしてみましょう。
右上のボタン「プロジェクトを実行(F5)」よりテストプレイをしてみましょう。
これまでの設定がうまくできていれば、以下のようにタイルが配置された画面が出るはずです。
うまくいかないときのチェックリスト
タイルが表示されないときは、タイルが紫の枠の中に配置されているか？
シーン遷移(SceneTransition)の「初期シーン」が正しくstage1.tscnに設定されているか？を確認してみてください。
さて、簡素ですがステージができたので次はプレイヤーキャラクターをつくっていきたいところですが、先に、「インプットマップ(操作系統)」を設定します。インプットマップでは、このボタンやキーを押せば、この動きになる、ということを設定できます。
このチュートリアルで作成するゲームはアクションシューティングゲームで、基本的な動きのみを作ります。まずは、「攻撃」「ジャンプ」「右移動」「左移動」が入力できるボタンがあれば大丈夫でしょう。スライディング、武器選択、ハシゴ移動なども後々必要になるかもしれませんが、今必要な基本的な操作だけを作ります。
1. 左上のプロジェクトメニューからプロジェクト設定を開きます。
2. ウィンドウが開くので、上部の一般となっているタブを「インプットマップ」に切り替えましょう。
3. **「新しいアクションを追加」**と書かれた欄を選択します。
4. 「右」と記入して、右側の「＋追加」ボタンを押します。
5. **同様の操作を繰り返して「左」「ジャンプ」「攻撃」**を作りましょう。以下のような画面になればOKです。
6. 「右」の右端にある「＋」ボタンをクリックしてください。
7. 「右のイベントの設定」というウィンドウが開きますので、キーボードの「→」キーを押してください。
8. **表記がRight(物理)**になっていれば成功です、OKボタンを押してください。
9. 同様の操作を繰り返して、左に「←キー」ジャンプに「Zキー」攻撃に「Xキー」を割り当てましょう。日本語入力が有効の場合、ZやXは正常に認識されないかもしれませんので英字入力にして設定してください。以下の画像のようになっていれば設定完了です。
10. 「閉じる」ボタンで閉じましょう。
それではゲームオブジェクト用のシーンを作成しましょう。
1. Stage1作成時と同様、エディター画面上部の「＋」から新規シーンを追加します。
2. ルートノードを作成：で 「ゲームオブジェクト」を選びます。
3. 「新しいオブジェクトを作成」ウィンドウが立ち上がります。ACTION GAME MAKERでは様々なオブジェクトをテンプレートから作成できるようにしています。以下のように設定しましょう。
オブジェクト名：プレイヤー
テンプレートを使用：キャラクター
タイプ(型)：2DSprite Character Base
オブジェクトグループ: Player(プレイヤー)
入力デバイスで操作する対象とする：オン
カメラ追従設定(CameraTargetSettings)を自動生成する。：オン
4. 様々なノードがあるシーンが生成されました。
5. 名前をつけてシーンを保存しておきましょう。名前はそのまま「player.tscn」で大丈夫です。
たくさんのノードがあり混乱するかもしれませんが、これらのノードは大きく3種類に分けられます。
ACTION GAME MAKERのヴィジュアルスクリプトで取り扱う情報を設定するためのノードです。HPや攻撃力、移動速度やジャンプ力といった情報をここで設定することで、ヴィジュアルスクリプトで呼び出して扱うことができるようになります。
衝突を判定するための形状を作るノードです。壁や床との衝突はCollisionShape2D、攻撃範囲の形状はAttackCollision、攻撃を受けるあたり判定の形状はHitCollisionで設定できます。
キャラクターのアニメーションを作るツール(AnimationPlayer)と、それに使うための画像(Sprite2D)があります。
これらの3種類のノードを使ってオブジェクトを設定していきます。
ACTION GAME MAKERのヴィジュアルスクリプトは、これらの3つのノードのデータを読み込んで動作します。そのため、GameObjectノード(ここではPlayerがそれにあたります)のみにヴィジュアルスクリプトを設定することができます。
このパートで作成するのは、移動とジャンプだけです。つまり、攻撃や被ダメージ等の設定は必要ありません。プレイヤーの画像と、移動やジャンプのアニメーション、そして、移動力、ジャンプ力、移動キーだけが設定できれば大丈夫です。つまり、このパートで設定しないといけない部分は以下になります。
画像を表示するためのノード、Sprite2Dにプレイヤーの画像を適用しましょう。画像はこちらで用意したものを使いましょう。
1. 以下の画像を右クリックでパソコンに保存してください。
2. ダウンロードした画像をファイルシステムにドラッグ＆ドロップで読み込みます。
3. 画像を表示するためのノード、Sprite2Dを選択してください。
4. 右側、インスペクターウィンドウのテクスチャ<空>となっている部分に2.でファイルシステムに読み込んだplayer.pngをドラッグ＆ドロップで適用します。
5. 画像が表示されますが、9体のキャラクターが表示されてしまっています。これは、スプライトシートと呼ばれるアニメーションのための画像をすべてまとめた画像シートだからです。(タイルで説明したアトラス画像の1種です。)
この画像を分割(スライス)し、この画像のどの部分を表示するか、を指定する必要があります。
6. インスペクターの「アニメーション」を開いてください。
7. Hframes(横方向フレーム数)を5、Vframes(縦方向フレーム数)を2にしてください。これで、画像が横5、縦2の合計10個の小さな画像(フレーム)に分割されました。
8. インスペクターのフレームの上下をクリックしてみてください。画像が少しずつ変わっていくはずです。ゲームのアニメーションはこのように、フレームを少しずつ変えることでパラパラ漫画のように実現されています。
補足：なぜ最初のフレームが0なの？
最初の番号では1ではないのか？と少し違和感があるかもしれませんが、プログラムでは基本的に「0」を最初の項目として扱います。Godotでも、各所のこういった番号は0から割り当てられています。
Godot Engine/ACTION GAME MAKERではAnimation Playerというノードでアニメーションを作ります。このアニメーションは動画編集と同じ、タイムライン型と呼ばれる制作方法になっています。画像や音などの「トラック」と呼ばれるライン上に、「キーフレーム」というイベントを配置して、時間経過にそってそれぞれのトラックのキーフレームを実行していきます。
例えるなら、タイムライン型のアニメーションとは、オーケストラの楽譜のようなものです。演奏開始か1秒地点でピアノが「ドの音を鳴らす」、バイオリンは「レの音を鳴らす」といった形です。この場合はトラックは「楽器の種類」、キーフレームは「弾き方の指示」となります。
今回必要なアニメーションは、何も入力がない状態の「待機」、ジャンプボタンが押されたときの「ジャンプ」、左右入力があったときの「移動」の3種類でしたね、この3つのアニメーションを、AnimationPlayerを使ってつくっていきましょう。
1. シーンウィンドウでAnimationPlayerを選択します。
2. タイルのように、中央下部にアニメーションという新たなウィンドウが出現しました。
3. アニメーションボタンを押して、新規を選択しましょう。
4. 新規アニメーション名というウィンドウが立ち上がります。まずは、「待機」から作りましょう、「待機」と入力してOKボタンを押します。
5. 待機のアニメーションが作成されました。ここに、先程登録した画像の「フレーム」を入れ込むことでアニメーションを作ります。
6. Sprite2Dノードを選択してください。9種類の画像のうち、待機のフレームは一番左上の一つだけです。一番左上の画像のフレームは0なので、「待機」アニメーションではフレーム0を表示する。という設定ができれば良いということになります。
7. インスペクターのアニメーション>フレームが0になっていることを確認し、「
+」となっているマークをクリックしてください。これは、キーフレームを挿入というボタンで、現在表示しているアニメーションにこのフレームを登録するという機能を持っています。
8. 以下のようなウィンドウが出ますので、「RESETトラックを作成」をオフにして作成ボタンを押してください。
補足：RESETトラックとは？
シーンの初期状態を指定するためのものです、「待機」であれば初期状態として指定してもよいのですが、ACTION GAME MAKERでは基本的に使用しませんので、オフにしておきましょう。
9. アニメーションにSprite2Dのframeというトラックが作成されました。0秒地点player.pngのフレーム0が設定されていますので、「待機」アニメが始まると瞬時にこの画像が表示されることになります。「待機」は画像1枚なのでこれで完成です。次は「ジャンプ」を作ります。
10. 1~8の手順を繰り返し、同様に「ジャンプ」を作りましょう。なお、「ジャンプ」のフレームは上段の左から3つめ、つまり、フレーム「2」がジャンプのフレームです。うまく設定できれば、以下の表示になっているはずです。
11. 最後に「移動」を作ります。しかし、「移動」のフレームは下段の左から1つめから４つめまで、つまり、5,6,7,8の4つのフレームがあるため待機やジャンプより少し設定項目が多くなります。
4つのフレームを、0.2秒毎に順番に切り替えてループをさせると程よいモーションになりそうです。
12. まずは、待機、ジャンプと同様1~8の手順を繰り返し、「移動」を作ります。フレーム「5」を指定して設定しましょう。うまく設定できれば以下の表示になります。
13. 続いて、フレーム6を、フレーム5の0.2秒後に設定します。アニメーションの横の「0」と記載のあるボックスに「0.2」と入力してください、これは、再生バーの位置を設定するもので、こうすることで0.2秒地点に再生バーが移動します。
14. Sprite2Dのフレームを「6」に切り替えて+ボタンでキーフレームを挿入しましょう。うまく設定できれば、以下のように0.2秒地点にフレーム6が挿入されます。
15. 13~14の手順を繰り返し、0.4秒地点にフレーム「7」、0.6秒地点にフレーム「8」を挿入しましょう。4つのフレームが設定されたはずです。
16. 続いて、アニメーションの長さを変更します。右上の時計マークの横にある「1」がアニメーションの長さで、今移動アニメーションが1秒あることを示しています。今回のアニメーションは、0.2秒毎に切り替えるスプライトが4枚なので、0.8秒の長さであればきれいにループするはずです。数字を「0.8」にしましょう。
17. 最後に、アニメーションがループするようにしましょう。秒数の横にある繰り返しマークがループボタンです。クリックしてループを有効にしましょう。
補足：最初からループと折返しループ
こちらの手順で設定しているのは「アニメーションの最後まで行くと最初から自動で再生する」というループです。もう一度クリックすることで、「アニメーションの最後までいくと折り返し、逆再生する」という折り返しループを設定することもできます。
18. 一通り設定ができたら、アニメーションを再生ボタンでアニメーションが正常に行われるかチェックしましょう。きれいに動いていればOKです。
アニメーションがきれいに再生されないときは。
トラック上の画像を選択すると、「値」という項目にその画像のフレームが表示されています。順に選択して5,6,7,8と順に並んでいるか確認しましょう。間違っている場合は、「値」の数値を変えることでその画像のフレームを変えることができます。
また、ループ再生が正しく設定されているか、アニメーションの長さが正しく0.8秒になっているか確認してください。
ACTION GAME MAKERでは、移動方向に応じて**自動でアニメーションを切り替えるシステム「アニメーションセット」**を用意しています。
アニメーションセットで8方向それぞれにアニメーションを設定することで、１つのアニメーションセットを選択するだけで右移動時、左移動時、上移動時など自動でアニメーションが切り替わるようになります。
今回作成するゲームであれば、右移動時のアニメ、左移動時のアニメの2種類があれば大丈夫です。現在ある待機、ジャンプ、移動の3種類のアニメはすべて「右向き」のもので「左向き」のものがありませんが・・・この場合は「自動で反転」してくれるオプションがあり、デフォルトで有効になっているため「左向き」のアニメを作る必要はありません。
また、今回のように設定が「左右移動のみ」「アニメが右向きで用意されており、左向きは反転で良い」場合は一括で設定する機能があるのでこれを使ってアニメーションセットを作りましょう。
1. シーンウィンドウでPlayerノード(GameObjectノード)を選択してください。
2. インスペクターの「AnimationPlayerを指定」ボタンをクリックしてください。
3.ノードを選択するウィンドウが出るので、AnimationPlayerを指定しましょう。
4.続いて、「アニメーション一括読み込み」ボタンをクリックしてください。
5. 正しく読み込めているか確認をしましょう、「アニメーションセット」をクリックして展開してください。
6. 正しく読み込めていれば、ジャンプ、待機、移動のアニメーションセットが作成されているはずです。
もし読み込めていない場合はAnimationPlayerを指定でAnimationPlayerノードを再指定してみましょう。
さて、これでアニメーションが作成できたので、続いてプレイヤーに関する設定を行います。必要なことは、「移動に使うキーを設定する」「移動速度を調整する」と、「壁判定」の大きさをキャラクターに合わせる、の3つです。
このキャラクターの移動に使うキーを、先程設定したキーから設定しましょう。
1. シーンウィンドウでMoveAndJumpSettingsノードを選択してください。
2. インスペクターで、「左方向への移動」に「左」、「右方向への移動」に「右」を設定しましょう。
キーを押された際の移動速度とジャンプ力を、キャラクターにあったものにしましょう。
1. 引き続き、MoveAndJumpSettigsのインスペクターを使います。
2. 左右の移動量の値を、100から300に変更します。これで、1秒キーが押されると300px移動するようになりました。
3. 下方にある「ジャンプの初速」プロパティの値を500から700に変更しましょう。これで、ジャンプを押すと上方に秒間700pixelの勢いで移動します。
キャラクターが、他のオブジェクトや床と衝突するための壁判定の形状はCollisionShape2Dで設定することができます。現在は、顔より小さい形状になっているため、体が地面に潜ってしまいます。全身のサイズに合うように調整しましょう。
1. シーンウィンドウでCollisionShape2Dを選択します。オレンジの点に囲まれた小さな青い四角形が強調されますが、これが今の壁判定の大きさです。
もし、キャラクターのフレームがジャンプや移動になっている場合は、サイズを設定しやすいようにAnimationPlayerでアニメーションを「待機」に切り替えましょう。
2. オレンジの点をクリックしてドラッグすることで形を変更できますので、四隅のオレンジの点を動かして、キャラクターを覆うようにしましょう。
事前準備がすべて整いましたので、ヴィジュアルスクリプトでキャラクターを動かしてみましょう。まずは、プレイヤーにヴィジュアルスクリプトをアタッチ（付与）します。
1. シーンウィンドウでPlayerノード(GameObject)を選択してください。
2. 「
+」(スクリプトをアタッチ)ボタンをクリックします。
3. 新しいウィンドウが立ち上がります。VisualScriptかGDScript(通常のプログラム言語)のどちらをアタッチするのか？という設定を行う画面ですが、Playerノード(GameObject)を選択した場合は、自動でVisualScriptが選択されますのでそのまま「作成」ボタンを押してください。
4. エディター画面が自動で「Script」に切り替わり、「ステート001」という箱と「AnyState」という2種類の箱がある画面になりました。これがヴィジュアルスクリプトの画面です。
元の画面に戻りたいときは・・・
上部のタブを「2D」に切り替えれば戻ることができます。シーン遷移で説明した通り、上部のタブはエディター画面の表示を切り替えるボタンです。
第一章で説明した通り、ACTION GAME MAKERのヴィジュアルスクリプトはキャラクターのステート(状態)に対して、動きを追加し、そのステート同士をつなぐ(リンクする)ことで作っていきます。
今回の、ステージを歩き回ってジャンプする・・・であれば、「待機」「移動」「ジャンプ」の3つのステートだけがあれば大丈夫そうです。
この3つのステートをつなぎ、条件でステートを切り替えることでキャラクターの動きを作ります。
それでは、まずは「待機」、「移動」、「ジャンプ」のステートを用意し、動きやアニメを設定しましょう。「待機」はすでに配置されている「ステート001」を再利用することができそうです。
「ステート001」の名前を「待機」に変え、このステートでは「待機」アニメーションセットが再生される、と設定しましょう。
1. Scriptウィンドウで「ステート001」を選択してください。
2. インスペクターの下部にある「タイトル」を「ステート001」から「待機」に変更しましょう。
3. 割り当てるアニメーション>アニメーションカテゴリ名の横の空欄をクリックして、「待機」を設定しましょう。これで、このステートでは待機アニメーションセットが再生されます。
「移動」ステートは新しく作る必要があります、新しく作ったステートに、「移動」アニメーションセットが再生される、と設定しましょう。
1. 「待機」ステートの右の空白地帯を右クリックしてください。
2. メニューが表示されるので「ステートを追加」します。
3. 再び「ステート001」が作成されるので、タイトルを変更して「移動」にしましょう。
4. アニメーションカテゴリ名で「移動」を選択します。これで「移動」ステートでは「移動」アニメが再生されるようになりました。
「ジャンプ」ステートでは、アニメーションを再生するだけではなく、「ジャンプ」の動き(アクション)を設定する必要があります。
1. 新しいステートを「待機」、「移動」の下の方に作成します。
2. 先程の2~4の手順を行い、タイトル「ジャンプ」アニメーションカテゴリ「ジャンプ」と設定します。
3. アクション設定を展開し、その中にある「ジャンプ動作を行う」のチェックボックスをオンにしましょう。これで、「ジャンプ」ステートになると「ジャンプ動作」を行うようになります。
補足：「移動」には「移動動作を行う」といった設定はいらないの？
キャラクターのキー入力に応じた移動は、先ほど設定した「MoveAndJumpSettings」の移動に使うキー設定で動作します。この設定は全ステートで共通で動くため、「移動」ステート自体には移動に関するアクションの設定は不要です。
今回作成した3つのステートを、リンクでつないで遷移できるようにしていきましょう。
今回の動きとしては、左右入力があれば「移動」ジャンプ入力があれば「ジャンプ」何も入力がなければ「待機」というのが基本となります。
「移動」の動きを考えると、左右入力があれば「待機」→「移動」、なければ「移動」→「待機」という動きで実現できそうです。
「ジャンプ」は、ジャンプの入力があれば「待機」→「ジャンプ」、そして移動中もジャンプしたいので、「移動」→「ジャンプ」も必要そうです。「ジャンプ」からは、地面に触れた時・・・つまり、「タイルに下方向が触れた」ときに「ジャンプ」→「待機」があれば良さそうです。
補足：ジャンプから移動にはつながなくてよいのか？
繋いでも問題はありませんが、移動キーを入力しながら着地した場合は、「待機」から「移動」への遷移が瞬時に行われるので繋ぐ必要はありません。
それでは、「待機」から左右の入力で「移動」、入力がなくなれば「待機」というリンクをつくっていきましょう。
1. 「待機」ステートを右クリックして、「リンクを追加」を選択します。
2. 待機から線がでるので、「移動」ステートをクリックしてリンクを作成します。これで待機と移動がリンクでつながります。次は左右の入力があったら移動になる、となるように切り替わる条件（遷移条件）を設定します。
3. 作成したリンクを選択し、インスペクター画面の「以下の入力操作がされた」のチェックボックスをクリックします。
4. 入力操作リストという新しい項目が出現するので「Array[InputCondition]…」となっている欄をクリックして展開します。
5. 展開された中にある、「＋入力を追加」ボタンをクリックします。
6. 入力操作リストの中に<空>というものが出るので、クリックをして「新規 入力に関する条件」をクリックします。
7. 「<空>」が「入力に関する条件」に変わるので再びクリックして展開します。
8. 新しい項目が出現するので、以下のように設定します。
入力形式：4方向の任意の入力
上方向入力キー：なし
下方向入力キー：なし
左方向入力キー：左
右方向入力キー：右
入力の条件：押されている
9. これで、「左」か「右」の入力が「押されている」と待機から移動ステートに遷移するようになります。
10. 続いて、「移動」から「待機」に戻るリンクを作ります。「移動」を右クリックして「リンクを追加」します。
11. 作成された移動から待機へのリンクを選択します。
12. インスペクターで「何も入力されなかった」のチェックをオンにします。これで、何もボタンやキーが押されていない場合、移動から待機に遷移します。
さて、床の上を左右に動くことだけであればできる状態になりました。stage1.tscnに配置して正常に動くか試してみましょう。stage1のタイルと同じレイヤー、BaseLayerにplayer.tscnを配置してテストプレイをします。
1. まずはエディター画面を「Script」から「2D」に切り替えましょう。
2. 続いてPlayerの変更を保存しましょう。playerタブを右クリックでシーンを保存します。
3. stage1.tscnにタブを切り替えます。
4. シーンウィンドウでBase(TileMapLayer)を選択します。
5. ファイルシステムのplayer.tscnをドラッグ＆ドロップでエディター画面の床の上に配置します。
6. 以下の図のようBaseLayerの子としてPlayerが配置されていればOKです。
BaseLayer以外の子になってしまった場合は、シーンウィンドウ上でPlayerをドラッグで動かして場所を移動しましょう。エディター上の配置がずれてしまった場合は移動モードを使って位置を微調整しましょう。
7. 右上の「プロジェクトを実行」ボタンでテストプレイをしましょう。
8. うまく設定できていれば、左右を押せばキャラクターが歩き、はなせば止まるはずです。
動かない場合のチェック項目
キャラクターが動かない: MoveAndJumpSettingsの移動キーが正常に設定されているか確認しましょう。
キャラクターが移動アニメにならない：待機から移動のリンクと、移動ステートのアニメーション設定が正しいか確認しましょう。
キャラクターが待機に戻らない：移動から待機へのリンクが正しいか確認をしましょう。
これは、カメラ追従設定(CameraTargetSettings)があるのに中身が未設定ですよ、という警告です。
現在カメラ追従機能は設定していないので出てしまっています、第4章で設定するので、ここでは一旦無視してもらって大丈夫です。
続いて、「待機」「移動」から「ジャンプ」をつなぎましょう。
1. タブをplayerに戻し、エディター画面を2DからScriptに戻しておきましょう。
2. 「待機」を右クリックしてリンクを作成し、「ジャンプ」につなぎます。
3. リンクを選択し、「以下の入力操作がなされた」のチェックボックスをオンにします。
4. 入力操作リストを展開し、「＋入力条件を追加」、「<空>」、「入力条件を追加」と選択していきます。
5. 入力形式：入力に使う操作キー、入力キー：ジャンプ、入力の条件：押された瞬間と設定しましょう。これで待機中にジャンプボタンを押された瞬間、ジャンプに遷移します。
6. 続いて移動からジャンプをリンクでつなぐのですが、条件としては待機からジャンプのリンクと全く同一のもの「ジャンプキーが押された瞬間遷移」です。先ほどつくったリンクをコピーして使いましょう。
7. 待機からジャンプのリンクを右クリックして、「コピー」します。
8. 「移動」ステートを右クリックして、「リンクをペースト」します。
9. 新規リンク追加時と同じく、移動から線がでるので「ジャンプ」をクリックしてつなぎます。
10. 「移動」→「ジャンプ」のリンクをクリックして正しくコピーできているか軽くチェックしておきましょう、以下のような表示であれば成功です。
11. 「ジャンプ」→「待機」のリンクを作ります。ジャンプを右クリックしてリンクを作成し、待機につなぎましょう。
12. 「ジャンプ」から「待機」の遷移条件は床と接触したらで、入力とは関係がない条件です。今回は入力条件ではなく、「その他の条件」を使います。インスペクター画面の「＋その他条件の追加」をクリックしてください。
13. その他条件の選択、という新しいウィンドウが立ち上がります。ここでは、入力以外の様々な条件を選択できます。今回は床タイルとの接触なので、「タイルと接触」を選択してください。
14. 条件の中身は、「このオブジェクトからみた接触方向」で「下」のチェックボックスをオンにします。これで、オブジェクトの下がタイルと接触したときだけ遷移するようになります。
15. 以下の図のようになっていればOKです。
16. 右上のテストプレイボタンでテストプレイをしてみましょう。待機中、移動中にZキーでジャンプできるか試してみます。正常に動作すれば完成です。
正常に動作しないときのチェックリスト
ジャンプできないとき：移動、待機からジャンプへのリンクが正しいか？ジャンプアクションでジャンプを実行が正しくチェックされているか？
着地できないとき：ジャンプから待機へのリンクが正しいか？
第二章では、「ゲームシーン」「ゲームオブジェクト」の概念を学び、ステージとキャラクターを作成しました。
「ゲームシーン」では、レイヤーの概念とタイルの読み込み、配置について学びました。
「ゲームオブジェクト」では、画像を読み込み、アニメをつけ、各設定を行い、ヴィジュアルスクリプトをつけるという一連の流れを体験できました。
この流れはほとんどのゲーム制作で共通する流れとなりますので、今後制作に困ったときは見返してみると良いでしょう。
今回でACTION GAME MAKERの基本的な操作と概念を学んだことになります。第三章では、きちんとゲームになるよう、弾の射撃と敵の作成をしていきましょう。
