チュートリアル:入門コース

ACTION GAME MAKERの世界へようこそ!

このチュートリアルは、操作を学ぶために最初にオススメするチュートリアルです。
チュートリアル用のプロジェクトを使い、簡単なジャンプアクションを制作してみましょう。

日本語のみですが、動画も用意しておりますのでよろしければご利用ください。

STEP1: はじめに

  1. チュートリアルプロジェクトを読み込もう
    まず、ACTION GAME MAKERを起動します。
    起動できたら、上部の「チュートリアル」ボタンを押しましょう。

image

  1. チュートリアルの開始をおすすめするダイアログが出てきます。OKを押して進みましょう。

  2. 続いて、チュートリアル記事をおすすめするダイアログが出てきます。リンクはこのチュートリアル記事なので今ご覧の皆様はそのままOKを押して大丈夫です。

  3. OKボタンをおすと、新しいプロジェクトを作成するためのダイアログが出てきます。
    わかりやすい名前に変更しましょう。
    プロジェクトは、デフォルトではユーザー名/ドキュメント/ActionGameMakerのフォルダに自動作成されます。

  4. 作成ボタンを押すと、しばらく読み込みが表示されます。
    この間チュートリアルプロジェクトのデータをコピーしているので、しばらくお待ち下さい。
    チュートリアルプロジェクトにはたくさんのサンプル素材のすべてが同梱されているため、コピーに数分かかる場合があります。
    以下のような画面が表示されれば読み込み完了です。

STEP2: エディター画面の見方
さて、沢山のウィンドウが表示されていますが、まずはこの4つを覚えていただければ大丈夫です。

左上のウィンドウ[シーン]:


現在のゲームシーンに置かれているモノ(Godotでは[ノード]といいます)の一覧です、タイルマップやオブジェクトを配置するためのレイヤー等がひとまとめに表示されています。

左下のウィンドウ[ファイルシステム]


ゲームで利用できる状態になっている素材の一覧が表示されています。本チュートリアルではここにある素材を使います。

中央のウィンドウ[エディター画面]


現在の[シーン]がプレビューされている画面です。
すでにキャラクターやタイルがある程度配置されているのがわかります。

右側のウィンドウ[インスペクター]:


選択したモノの詳細なデータ、プロパティを表示しています。基本的には[シーン]で選択した[ノード]のデータをここで調整することでゲームを作っていきます。

STEP3: サンプルオブジェクトを使ってゲームをツクってみよう。
それでは、同梱素材を使って早速ゲームを作ってみましょう。
中央の画面を見てください。すでにキャラクターと地面が配置されています。このキャラクターは操作できるようになっていますので、早速テストプレイをしてみましょう。

画面右上の:play_button:ボタンを押すことで新たなウィンドウが立ち上がり、テストプレイを開始できます。
操作方法はシンプル。
コントローラーであれば左スティックで移動し、Aボタンでジャンプ。
キーボードであれば←→キーで移動し、Zキーでジャンプです。

もしステージから落っこちてしまったら、F5キーを押すことでリセットすることができます。

一通り動かしてみたら、テストプレイウィンドウを閉じてください。

STEP4: タイルを配置してみよう。
このままではステージが小さいですね。
早速、タイルを配置して大きくしていきましょう。

  1. まずは左上の[シーン]ウィンドウを見てください。
    ひし形のアイコンがタイルを示しています。(正式にはTileMapLayerノードといいます。)
    デフォルトで配置されている土台のファイルの名前は[Base]となっているのでこちらを選択してください。

そうすると、中央の画面にグリッドが表示され、中央下部に[タイル配置]という新しいウィンドウが表示されるはずです。もし、グリッドが表示されていない場合は、[タイル配置]右上のマス目のアイコンをクリックして下さい。

  1. タイル配置は配置するタイルを選ぶパレットのようなものです。ここで1つずつ選んでいくこともできますが、地形(オートタイル)機能を使いましょう。ウィンドウ左上のタブを[タイル]から[地形]に切り替えてください。


    切り替えたら、3つのオートタイルがすでにあることがわかります。
    Terrain Set 0(一番上): 既に配置されている土風のタイル
    Terrain Set 1(真ん中):岩風のタイル
    Terrain Set 2(一番下):遺跡風のタイル
    お好みのタイルを選択しましょう。

  2. 選択できたら、中央の[エディター画面]をドラッグしてタイルを描いてみましょう。設置済みのタイルと合わせるように自動でタイルが塗られていくはずです。
    もしうまく描けない場合は以下をチェックしてください。
    [オートタイル選択画面]で :sun:のようなマーク[コネクトモード]が選択されていますか?
    [オートタイル選択画面]上部の:pencil:ペイントが選択されていますか?
    image
    [エディター画面]上部のツールバーで :up_left_arrow:選択ツールが選択できていますか?移動ツール等になっていませんか?
    image

  3. 中央画面にタイルマップを描いていきましょう。
    右クリックでタイルを消すこともできます。[タイル配置]ウィンドウの上部でお絵かき用のツールを切り替えることもできます。左から順に、
    image
    ペイント: 1マスずつ塗る
    ライン: 直線を引く
    四角形: 塗りつぶされた四角形を描写する
    バケツ: 塗りつぶし
    ピッカー(スポイト): 配置されているタイルを再選択する
    消しゴム: 配置されたタイルを消す。ライン/四角形/バケツと併用できます。
    です、消しゴムとピッカーはトグル式で、選択を外すまで有効になってしまうので注意してください。

  4. さて、地面を描くことができましたが、最初に配置されていたタイルには草が生えていたはずです。
    新しく設置したタイルを草で装飾してみましょう。
    草は別のタイルマップレイヤーで描写されています。
    [シーン]で[BaseCover]を選択しましょう。草もオートタイル化されているので好きなものを選んで心ゆくまでマップを作りましょう。

STEP5: サンプルオブジェクトを配置してみよう。
このプロジェクトにはいくつかのサンプルオブジェクトを用意してありますので、次はこれを配置してみましょう。

  1. 左下の[ファイルシステム]ウィンドウの[sampleobject]フォルダを展開してみてください。この中にある.tscn形式のファイルがサンプルオブジェクトです。それではオブジェクトを配置していきましょう。
  2. まずは、どのレイヤーに配置するかを指定しましょう。左上の[シーン]ウィンドウを見てください。AGMaker用のオブジェクトは、[Object Root]というノードの子として配置する必要があります。
    SceneLayer>BaseLayer>ObjectRootにあるPlayerノードを選択してください。これで、オブジェクトを配置する際にBaseレイヤーのObjectRootの子として配置されるようになります。
  3. 次に、実際にシーン上にオブジェクトを配置します。まずはコインを配置してみましょう。
    左下のファイルシステムウィンドウのObject_Coin.tscnを中央のシーンの配置したい場所にドラッグ&ドロップするだけで配置できます。
  4. 位置を変えたいときは、配置されたCoinを選択してマウスで動かしてください。もし、ObjectRootの子以外のレイヤーに配置してしまった場合は、シーンウィンドウでCoinを選択し、ObjectRootの子に移動してください。配置ができたら、再び右上の:play_button:ボタンかF5キーでテストプレイをしてみてください。プレイヤーがコインにあたればコインが消え、右上のコイン数が1増えるはずです。
  5. あとは好きなオブジェクトを好きなように配置してみましょう。合計13種類のサンプルオブジェクトがあります。試しに配置してみてください。

サンプルオブジェクト概要

ファイル名 内容
Enemy_Kanibo 左右に動くだけの雑魚敵です。踏みつけることで倒すことができます。
Object_block 頭突きで破壊できるブロックです。
Object_Coin コインです。プレイヤーが触れると取得します。
Object_Floorlamp ジャンプで踏みつけると壊せるランプです。
Object_Goalflag プレイヤーが触れると演出を行います。
Object_Jumpboard プレイヤーが乗ると跳ね上げます。
Object_Platform_horizontal, Object_Platform_vertical 定期的に左右(上下)に動く足場です。
Object_Sampleplayer プレイヤーキャラクターです。
Decoration_Statue 装飾用の像です。
Decoration_lamp, Decoration_torch 光源つきのランプです。自動で影を生成します。
UI_Coin_counter 所持しているコインの枚数を表示します。

配置ができたら、 :play_button:でテストプレイをしてみましょう。テストプレイは、[F5]キーでショートカット起動することもできます。
このように、ステージにオブジェクトを配置していくことでゲームが出来上がっていきます。

STEP6 オブジェクトのカスタマイズ
次は、サンプルオブジェクトをカスタマイズしてみましょう。

  1. Playerオブジェクトの :clapper_board:「エディターで開く」をクリックしてください。
    image
  2. [エディター]画面に新しいタブ「Object_Sampleplayer」が追加され、キャラクターが表示されるはずです。[シーン]画面を見ると、最初のシーンと同じようにノードがツリー状に沢山配置されているのがわかります。
    それぞれのノードには、このプレイヤーオブジェクトに必要な情報が格納されています。
  3. [MoveAndJumpSettings]ノードを選択してみてください。右側のインスペクターウィンドウが、このノードの情報に切り替わったのがわかるでしょうか?
    このノードは、その名の通りこのオブジェクトの移動入力に使うキーや、移動速度、ジャンプ力などを設定できるノードです。
    左右の移動速度の欄にはデフォルトで300の値が入力されていますが、これを600に変えてみましょう。
  4. :play_button:か[F5キー]でテストプレイをしてみましょう。キャラクターの速度が2倍になったはずです。確認できたら、速度は300に戻しておきましょう。

STEP7 ヴィジュアルスクリプトの見方

  1. 続いて、ヴィジュアルスクリプトを学んでいきましょう。画面左上の、Playerの横にある:scroll:マークをクリックしてください。
    image
  2. [エディター]画面にヴィジュアルスクリプトが表示されたはずです。これは、プレイヤーの動作を制御するプログラムです。
    [Idle]や[Move]等の言葉が書かれた箱が実行される動作を示しています。この箱は、ステートと言います。
    ステート同士をつなぐ線は動作が切り替わる条件を表しています。この線はリンクと言います。
    では、[Jump]をクリックしてみてください。右側の[インスペクター]に[Jump]の動作設定が表示されます。
  3. デフォルトでは各設定が閉じられているのでクリックして展開して中身を見てみましょう。
    アニメーション設定は、再生するアニメーションを設定するものです。ここでは、009_Jumpが指定されています。
    アクション設定では、ジャンプ等の基本的な動作の設定が行えます。ここでは、ジャンプを行うように設定されています。
    その他の実行アクションでは、色々なアクションから実行したいアクションを選んで追加していくことができます。RPGツクールでいうイベントコマンドのようなものです。ここでは「音を再生」が設定されています。

STEP8 新しいアクションを作ってみよう

  1. それでは、新しいアクションを追加します。今回は、スライディングのアクションを作ってみましょう。[move]のステートボックスの近くの何も無い空間を右クリックして、「ステートを追加」してください。[ステート001]という新しいステートが制作されたはずです。[ステート001]を選択して、右側のインスペクターウィンドウを見てください。

  2. まずは、名前を変更しましょう。インスペクターウィンドウの下の方、タイトル欄を選択し、[Sliding]に変更してください。

  3. 続いて、動作中に再生するアニメーションを設定しましょう。「割り当てるアニメーション」を展開し、<アニメーションカテゴリ>をクリックしてください。登録されているアニメーションがプルダウンリストで表示されます。今回はスライディングなので、[028_sliding]を選びましょう。

  4. 最後に、アクションを設定します。「アクション設定」を展開してください。ここでは、移動速度やジャンプ等の設定ができます。
    ダッシュはキャンセルできないようにしたいので、[動作中の移動の入力を受け付けない]にチェックをいれます。このオプションがオンの場合、このステートの間は入力で操作ができなくなります。
    高速で移動したいので、<左右の移動速度を変更(%)>の値を200にしましょう。これでこのアクション中は2倍速で移動できます。

  5. 続いて、向かっている方向に強制的に移動するようにしましょう。これは少し深い位置にあります。「その他の実行アクション」を展開し、「ArrayActions」を展開。「+アクションを追加」ボタンを押してください。

  6. アクションを追加するウィンドウが立ち上がりますので、上から3つめ表示方向に移動を選択して追加してください。いくつか選択できるオプションがありますが、設定項目はデフォルトのままで大丈夫ですので、下にある追加ボタンから追加しまよう。これで、スライディングのステートは完成です。

STEP9 ステート同士をリンクでつなごう
さて、スライディングアクションはできましたがどのステートともつながっていない状態なので、このステートに遷移することができません。なので、[Move]から[Sliding]につながるリンクを作りましょう。

  1. [Move]ステートを右クリックして、リンクを追加を選択してください。

  2. 線が出現するので、それを先程作成した[Sliding]ステートに持っていって左クリックしましょう。[Move]から[Sliding]に線がつながったはずです。

  3. 次に、遷移の条件を設定します。作成したリンクをクリックしてインスペクターウィンドウを見てください。入力があった時、のプロパティをオンにしてください。新しい枠が出現するので、Array[InputCondition]をクリックして展開し、[+入力を追加]ボタンを押してください。

  4. <空>という欄ができるので、こちらをクリックしてNew InputConditionを選択してください。

  5. <空>がInputConditionに変わるので再度クリックして展開します。キー入力の設定オプションが表示されるので、以下のように設定しましょう。これで、[Move]のステート中、Bボタン(キーボードではXキーです。)が押された瞬間に[Sliding]に遷移するようになりました。

  6. これでスライディングができるようになりました・・・が、スライディングから別のステートに遷移するリンクがありません。このままでは永遠にスライディングしてしまいます。なので、[Sliding]から[Idle]に遷移するリンクを作りましょう。先ほどと同じように、[Sliding]ステートを右クリックして、リンクを作成してください。

  7. そのまま、右側にある[Idle]に繋いでください。


    ところで、皆さん[Idle]という同じ名前のステートが左右の2つあることにはお気づきでしょうか?実は、この2つは同じもので、右側にある[Idle]はショートカットです。ショートカットステートは名前の左上に :up_right_arrow:のマークがついています。
    image
    ヴィジュアルスクリプトのリンクは、必ず左から右に向かうようになっているため、最初の方のステートに戻す際にはショートカットが便利です。リンクがスパゲッティになってしまうことを防ぐことができます。

  8. 今度は入力以外の条件を使いましょう。その他の条件のArray[Conditions]を選択して展開し、[+条件を追加]をクリックします。

  9. 条件を追加するウィンドウが開きますので、[一定時間が経過]条件を選択して、値を0.3秒としてください。この条件は下の方にあるので、上部の検索バーで文字を入力して探しても良いかもしれません。追加ボタンを押せば完成です。

  10. では、 :play_button:かF5キーでテストプレイをしてみましょう。うまく設定できていれば、移動中にXキーを押せばスライディングを行い、0.3秒後に待機動作に戻るはずです。(なお、移動キーをいれっぱなしであれば即座に移動に遷移します。)
    うまくいかない場合は以下をチェックしてください。

  • [Idle]や[Jump]からはリンクをつないでいないので遷移しません、移動しながらキーを押してください。
  • キーを押しても遷移しない場合は、[Move]から[Sliding]のリンクをチェックしてください。
  • リンクが正常でも動作しない場合は、[Sliding]の設定でアニメや実行アクションが設定できているかチェックしてください。
  • スライディングから戻れない場合は、[Sliding]から[Idle]のリンクをチェックしてください。

うまく動作すれば完成です。これでスクリプトを一通り作成できるようになりました。
ダッシュ速度や遷移時間を変更して自分好みにカスタマイズしてもよいですし、「その他の実行アクション」の「音の再生」アクションでダッシュにSEやボイスをつけてもいいかもしれません。
Idleからリンクをつないでその場からスライディングできるようにするのもよいでしょう。
JumpやFallからつないで空中スライディングができるようにしてもいいでしょう。(その場合は、Idleではなくlandingにリンクを戻しましょう、着地できなくなってしまいます。)

これで本チュートリアルは以上です、スクリプト画面を抜ける場合は、最上部のタブを[2D]に切り替えれば抜けることができます。

アクション制作は遷移と条件の組み合わせです。組み合わせ次第で色々なことができますので、他のサンプルオブジェクトのスクリプトを覗いてみると勉強になるかもしれません。
その際の注意点が一つあります。
ヴィジュアルスクリプトを開く際は、必ずそのヴィジュアルスクリプトを持つオブジェクトのタブを選択した状態としてください。
Godotの機能として、タブがどこであっても自由にスクリプト画面を開くことができるのですが、ヴィジュアルスクリプトのアニメーション設定や変数設定などは、開いているタブの情報を読み込むため、一部の設定ができなくなります。

こちらのチュートリアルでは、基本的な操作を説明させていただきましたが、まだまだ説明していない機能が沢山ありますが・・・皆さんが「ACTION GAME MAKER」でやりたいことはバラバラだと思います。
なので、以後のチュートリアルコースは大きく2つに分けました。

1. グラフィックコース
自分が描いたキャラクターを動かしたい!という人向けのコースです。

2. スクリプトコース
デフォルトキャラでいいからいろんな動きやシステムを作りたい!という人向けのコースです。

3. 表現強化コース
Godotらしいカッコイイ表現をつけてみたい!という人向けのコースです。

どのコースから始めて頂いても大丈夫ですが、0からゲームを作るのであれば最終的には全てのコースの受講をおすすめします。