# チュートリアル：「ACTION GAME MAKERをゼロから始める」第2章 **URL:** \ **Category:** チュートリアル\ **Tags:** tutorial, english\ **Created:** [2025 年 9 月 28 日午前 8:06 UTC](https://guild.rpgmakerofficial.com/t/topic/883 "2025-09-28T08:06:40Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 8:06 UTC](https://guild.rpgmakerofficial.com/t/topic/883/1 "2025-09-28T08:06:40Z")
## 第2章：簡単なステージを作ろう！ ### 第2章の目標 ここからは、実際に **アクションシューティングゲーム** の作成に取り掛かります。 この章では、以下のことが可能な簡単なステージの作成プロセスを解説します。 - **プレイヤーキャラクターが移動し、ジャンプできる** 。 この章が終わる頃には、以下に示すような例のようなものが完成しているはずです。 [![](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/2X/3/31c0a4054e2ef45659a403caec005b505c6960f2.jpeg "「0からはじめるACTION GAME MAKER」第二章完成イメージ") ](https://www.youtube.com/watch?v=jH91fQF0QtA) * * * ### ワークフロー 1. まず、ステージそのものの **シーン** が必要です。 2. そのステージの中に、キャラクターが移動やジャンプができる **プラットフォーム** を配置します。 3. 次に、 **キャラクターのシーン** を作成し、 **ビジュアルスクリプト** を使用して移動機能を実装します。 ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 8:06 UTC](https://guild.rpgmakerofficial.com/t/topic/883/2 "2025-09-28T08:06:50Z")
非表示: 2025 年 9 月 28 日午前 8:06 UTC ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 8:08 UTC](https://guild.rpgmakerofficial.com/t/topic/883/3 "2025-09-28T08:08:08Z")
# 「ゲームシーン」と「ゲームオブジェクト」について学ぶ 第1章では、 **Godot Engine** の機能のみを使用してすべてを作成しました。 ここからは、ゲームを構築するために **ACTION GAME MAKER** の追加機能を使い始めます。 Godot Engineでは、通常、キャラクター、コース、その他の要素を、ルートノードにノードを一つずつ追加して作成します。しかし、これは非常に時間がかかることがあります。 これを簡単にするために、ACTION GAME MAKERは2つの主要な **プリセットシーン** を提供します。 - **ゲームシーン** - **ゲームオブジェクト** ACTION GAME MAKERでは、 **ゲームシーン** 内に **ゲームオブジェクト** を配置することでゲームを作成します。 * * * ## ACTION GAME MAKERによって追加された機能の見分け方 **ゲームシーン** や **ゲームオブジェクト** など、ACTION GAME MAKERによって追加された機能は、 **青とオレンジの2色アイコン** でマークされています。 これらの色付きのノードやボタンが表示された場合は、それがACTION GAME MAKERの機能であることを意味します。 一方、元のGodotノードは **単色アイコン** （白、青、緑など）を使用しますが、いくつかは複数の色を使用する場合があります。 ![画像1](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/2X/a/a6feaed2ee4f6dcc64ff3e93310a99720f57ac85.png) ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 8:13 UTC](https://guild.rpgmakerofficial.com/t/topic/883/4 "2025-09-28T08:13:23Z")
# 「ゲームシーン」の作成 それでは、 **ゲームシーン** を設定していきましょう。 * * * ## 手順 1. **シーンタブ** で、\*\*「+」（新規シーン追加）\*\*ボタンをクリックします。 2. シーンウィンドウの **ルートノードの作成** セクションで、 **ゲームシーン** を選択します。 3. シーンウィンドウに多数のノードが自動的に表示されます。これらはゲームシーンを構成する **プリセットノード** です。 4. 新しいシーンなので、保存しましょう。 5. これはステージ（コース）シーンなので、 **stage1.tscn** として保存します。 * * * ## ゲームシーンの構造 突然多くのノードが追加されたことに気づかれたかもしれませんが、それぞれが具体的に何をするのでしょうか？ ACTION GAME MAKERでは、 **ゲームシーンは「レイヤー」という概念を用いて構成されています。** **レイヤー** とは、劇場の舞台のように奥行きを表す方法の一つです。 - **背景レイヤー** （背景美術）が最も奥に位置します。 - **キャラクターレイヤー** は中央にあり、ここで俳優（キャラクター）が演技を行います。 - **前景レイヤー** は手前にあり、観客に最も近い位置に小道具が配置されます。 「前方に設置されたカメラを通して」見た場合、これらのレイヤーが組み合わさってゲームのシーンが形成されます。 ACTION GAME MAKERには **7つのデフォルトレイヤー** が用意されています。それぞれ名前とアイコンが異なり、わずかに機能も異なりますが、図のように積み重ねられています。 ![アートボード 1](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/2X/4/45a726dce1cd31af612e801183810c3ced54a98c.png) デフォルトでは、各レイヤーに **最低限必要なプリセットノード** が既に配置されており、さらに **シーン全体を捉える単一のカメラ** も用意されています。 * * * ## 「SceneLayer」ノードと「UI」/「PostEffectLayer」ノードの違い 7つのレイヤーのアイコンを詳しく見ると、いくつかの違いに気づくでしょう。大まかに分けると、2つのタイプがあります。 1. **SceneLayer** ノードの子要素である、 **Base** から **DistantView** までの5つのレイヤー。 2. **UI** と **PostEffectLayer** の2つのレイヤー。 その違いは以下の通りです。 - **SceneLayerノード** は、カメラの位置によって見えるものが変化する、奥行きを持つ空間を表します。 - **UI** および **PostEffectLayer** ノードは、カメラの位置に関わらず、常にカメラに表示されます。 劇場の例えを使うと： - **舞台そのもの** が **SceneLayer** です。 - **カメラレンズに装着されたフィルター** が **UI** および **PostEffectLayer** です。 ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 8:15 UTC](https://guild.rpgmakerofficial.com/t/topic/883/5 "2025-09-28T08:15:31Z")
# 「初期シーン」の設定 ACTION GAME MAKER では、シーン管理に専用の **シーン遷移システム** を使用します。 このシステムを使えば、ビジュアルスクリプトに似た操作で、シーン同士をどのように接続するかを定義できます。 まず、ゲーム開始時に最初に表示されるシーンである **初期シーン** として、今回作成したシーンを設定しましょう。 * * * ## 手順 1. 画面上部中央のボタンから、エディタモードを **SceneTransition** に切り替えます。 2. 空のグリッドが表示されます。 3. グリッド上に **stage1.tscn** が表示されていれば完了です。 4. 画面上部中央のボタンから **2D** モードに戻り、以前の表示に戻ります。 * * * ## 注意：初期シーンを設定しなかった場合 ACTION GAME MAKER では、常に **core.tscn** という特別なシーンがバックグラウンドで実行されます。 通常、このシーンが指定されたゲームシーンをロードして表示します。 初期シーンを設定しない場合、 **core.tscn** のみが表示されるため、ゲームは **空の画面** で起動することになります。 ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 8:27 UTC](https://guild.rpgmakerofficial.com/t/topic/883/6 "2025-09-28T08:27:52Z")
# タイルの設定 さて、ステージのプラットフォームを作成していきましょう。 **地面** と、ジャンプするためのいくつかの **浮遊プラットフォーム** が必要です。プラットフォームを作成するには、さまざまなノードを使う方法がありますが、今回は複数の形状を持つ広いステージを構築するため、この目的のために設計されたノードである **タイル** を使用します。 **タイル** とは、床のタイルと同じように、小さな画像をグリッド状に繰り返してプラットフォームのような大きな構造を構築するものです。 * * * ## FileSystem へのタイル画像のインポート まず、タイル画像を用意しましょう。 提供された画像を **右クリックして保存** してください。 ![tile](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/2X/0/092d4631c4d48d0e94ce0e4afcc73a72e2472129.png) 第 1 章で説明したように、Godot Engine はプロジェクトの **FileSystem** 内に配置されたアセットのみで動作します。 FileSystem を、遊園地の資材が使用される前に保管される **倉庫** と考えてください。 インポート方法は簡単です。 **ファイルをエディタにドラッグ＆ドロップ** するだけです。 1. ダウンロードした画像が入った PC のフォルダを開いたままにします。 2. エディタで、 **FileSystem パネル** （左下）に移動し、\*\*res://\*\*を選択します。 3. PC のフォルダから **tile.png** をエディタウィンドウにドラッグします。 * * * ## タイルを配置するレイヤーの選択 次に、タイルを配置する **レイヤー** を決めましょう。 地面用のタイルを配置するためのデフォルトのレイヤーである **BaseLayer** を使用します。 BaseLayer の中を見ると、 **Base** 、 **BaseDecoration** 、 **BaseCover** の 3 つのノードがあります。 これらは実際には名前が変更された **TileMapLayer ノード** です。 なぜ同じノードが 3 つあるのでしょうか？ - タイルを重ね合わせて奥行きを作成できるようにするためです。 - 例えば、地面のタイルの上に松明を置きたい場合があるでしょう。 - レイヤーが 1 つしかない場合、松明を置くと地面のタイルが上書きされてしまいます。 - レイヤーが複数ある場合、それらを重ねて地面と装飾の両方を見せることができます。 今回は、タイルを配置するために **Base** という名前のノードを選択します。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/2X/7/74179eeb75fd17ebe88a6cad063b764fa7f45596.png) 下部には、以下のようなメッセージが表示されたパネルがあります： **「TileSet が見つかりません。Inspector で TileSet を作成してください。」** * * * ## TileSet の作成 **TileSet** は、この TileMapLayer ノードで使用するタイルの基本情報を定義します。 - 各タイルの **サイズ** と **形状** - キャラクターがそれと **衝突** できるか、通過できるか 用意したタイル画像は 48×48 ピクセルの正方形です。プレイヤーが立つプラットフォームとして機能するため、衝突を有効にする必要があります。 1. **Inspector** で、 **TileSet** の隣にある\*\*\*\*をクリックし、 **New TileSet** を選択します。 2. これで TileSet のプロパティを編集できます。以下のように設定します。 3. **Physics Layers** セクションを展開し、 **+ Add Element** をクリックします。 4. **Collision Layer / Collision Mask** はデフォルトのままにします。 * * * ### 注：衝突レイヤーとマスク Godot では、衝突は 2 つの設定によって決定されます。 - **Collision Layer** ：ノードが属するグループ - **Collision Mask** ：このノードが衝突できるグループ これについては第 3 章で詳しく説明します。 * * * ## タイルの設定 TileSet を作成すると、下部のメッセージが以下のように変わります： **「TileSet のソースがありません」** 。 これは、タイル用の **画像** をまだ割り当てていないことを意味します。 また、それらのための **衝突形状** （壁/床）を設定する必要があります。 1. 下部パネルで、タブを **TileMap** から **TileSet** に切り替えます。 2. FileSystem パネルから **tile.png** を、TileSet エディタの左側の黒いボックスにドラッグします。 3. 新しいウィンドウが表示されます。タイルが 48×48 の正方形なので、 **Tile Size: x=48, y=48** に設定し、 **Yes** をクリックします。 4. 次のウィンドウで「Tile Format を Auto Tile に設定しますか？」と尋ねられます。 **No** を選択してください。 * * * ### 注：アトラスと Auto Tile とは何か **アトラス** とは、多くの小さな画像（床、壁、斜面など）を含む単一の大きな画像ファイルのことです。 個々の画像ファイルを多数扱う代わりに、エンジンが 1 つの大きな画像を読み込んでそれをタイルにスライスします。これにより効率が向上します。 **Auto Tile** は、ACTION GAME MAKER に固有の機能の 1 つです。 特定の形式で配置されたタイルアトラスを自動的に整然と配置しますが、今回は使用しません。 * * * ## タイルへの衝突形状の追加 1. TileSet エディタで、上部の **Select** タブに切り替えます。 2. 右側で、タイル画像をクリックして選択します。 3. 下にスクロールして、 **Physics \> Physics Layer 0** を開きます。 4. **Add Polygon Tool** ボタン（「+」アイコン付きの四角形）をクリックします。 5. 緑色の正方形の **右上隅** をクリックします。ダイヤモンド型の点が表示されます。 6. 同じように、 **右下、左下、左上** の隅を時計回りにクリックします。 7. 最後に、最初に配置した点（右上）を再度クリックします。 * * * ## トラブルシューティング - **点が誤って配置された場合** ： **Edit Point Tool** （矢印アイコン付きの四角形）を使用して点を移動します。 - **点が多すぎた場合** ： **Delete Point Tool** （X アイコン付きの四角形）を使用して余分な点を削除します。 * * * ✅ この段階で、タイルのインポート、TileSet の作成、画像の割り当て、プラットフォームとして機能するための衝突設定が正常に完了しました。 ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 8:33 UTC](https://guild.rpgmakerofficial.com/t/topic/883/7 "2025-09-28T08:33:54Z")
# タイルの配置 タイルの準備が整ったので、配置していきましょう。 カメラの可視範囲内に **床といくつかのプラットフォーム** を作成するのが目標です。 * * * ## 手順 1. 画面中央にある **エディタビュー** を確認します。 2. エディタビューで、 **マウス中央ボタン（ホイールクリック）を押し続けます** 。 3. 下部パネルで、タブを **TileMap** （タイルペイント）に戻します。 4. 下部パネルの右側にあるタイルをクリックして選択します。 5. マウスをエディタビューに移動させると、カーソルの下にタイルのプレビューが表示されます。 6. 以下の例のように、床とプラットフォームを描画します。 * * * ## テストプレイでの確認 ゲーム内でどのように見えるか確認しましょう。 - 右上のメニューから\*\*Run Project (F5)\*\*をクリックします。 - すべてが正しく設定されていれば、タイルで構成された床とプラットフォームが表示されたシーンが起動します。 * * * ## トラブルシューティングチェックリスト タイルが期待通りに表示されない場合は、以下を確認してください。 - タイルは **紫色の長方形内** （カメラ領域）に配置されていますか？ - **SceneTransition** で、 **Initial Scene** が正しく **stage1.tscn** に設定されていますか？ ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 8:38 UTC](https://guild.rpgmakerofficial.com/t/topic/883/8 "2025-09-28T08:38:29Z")
# 入力マップ（操作）の設定 シンプルなステージが完成したので、次は通常通りプレイヤーキャラクターを作成するところですが、その前に\*\*入力マップ（操作）\*\*を設定しましょう。 入力マップでは以下を定義できます： - 「このボタンまたはキーが押されたとき、このアクションを実行する」 このチュートリアルでは、基本的な移動のみを含むシンプルな **アクションシューティングゲーム** を作成します。 現時点では、以下の 4 つのアクションのみが必要です： - **攻撃** - **ジャンプ** - **右移動** - **左移動** （後でスライディング、武器選択、梯子の登りなどのアクションを追加するかもしれませんが、まずは最低限のものだけ作成します。） * * * ## 手順 1. 左上の **プロジェクトメニュー** から **プロジェクト設定** を開きます。 2. ウィンドウが表示されます。上部のタブを **一般** から **入力マップ** に切り替えます。 3. 「 **新しいアクションを追加** 」と表示されたフィールドに名前を入力します。 4. **Right** と入力し、右側の\*\*+ 追加\*\*ボタンを押します。 5. 同じ手順を繰り返して、以下のアクションを追加します： 6. 次に、アクション **Right** の右端にある\*\*「+」ボタン（イベントを追加）\*\*をクリックします。 7. 「 **Right にイベントを追加** 」というタイトルのウィンドウが表示されます。キーボードの\*\*→（右矢印）\*\*キーを押します。 8. **Right または Right (Physical) または Right(Unicode)** と表示されていれば成功です。 **OK** をクリックします。 9. 他のアクションについても同じ手順を繰り返します： 10. 最後に、 **閉じる** ボタンをクリックして終了します。 ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 8:42 UTC](https://guild.rpgmakerofficial.com/t/topic/883/9 "2025-09-28T08:42:07Z")
# 「ゲームオブジェクト」シーンの作成 それでは、 **ゲームオブジェクト** のシーンを作成しましょう。 * * * ## 手順 1. **Stage1** を作成したときと同様に、エディタ上部の\*\*「＋」（新規シーン追加）\*\*ボタンをクリックします。 2. **ルートノードの作成** の下で、 **Game Object** を選択します。 3. **新規ゲームオブジェクトの作成** ウィンドウが表示されます。 ACTION GAME MAKERでは、テンプレートからさまざまなオブジェクトを作成できます。 以下のように設定します。 4. 複数のノードを含む新しいシーンが生成されます。 5. シーンに名前を付けて保存します。ここでは単純に **player.tscn** として保存します。 ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 8:49 UTC](https://guild.rpgmakerofficial.com/t/topic/883/10 "2025-09-28T08:49:52Z")
# ゲームオブジェクトの構造を理解する 一見すると、ゲームオブジェクト内の多数のノードは圧倒的に感じられるかもしれません。 しかし、これらのノードは大きく分けて **3つのカテゴリ** に分類できます。 * * * ## 1. 名前に「Settings」が含まれるノード これらのノードは、 **ACTION GAME MAKER のビジュアルスクリプト** でアクセスして使用できるデータを格納します。 ここで **HP、攻撃力、移動速度、ジャンプ力** などの値を設定することで、ビジュアルスクリプト内でそれらを利用可能にします。 * * * ## 2. 名前に「Collision」が含まれるノード これらのノードは、衝突判定に使用される形状を定義します。例えば： - **CollisionShape2D** → 壁や床との衝突 - **AttackCollision** → 攻撃のヒットボックスの形状 - **HitCollision** → 被ダメージ時の判定形状 * * * ## 3. アニメーション関連のノード - **AnimationPlayer** → キャラクターのアニメーションを制御 - **Sprite2D** → そのアニメーションで使用される画像を提供 * * * ゲームオブジェクトを設定する際は、これら3つのグループのノードを使用することになります。 ![ゲームオブジェクト構成EN](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/2X/3/34c92942b55c3274361125eece9a17aabc758567.png) * * * ## ビジュアルスクリプトはゲームオブジェクトでのみ設定可能 ACTION GAME MAKER のビジュアルスクリプトは、これらのノードからデータを読み取ることで動作します。 そのため、ビジュアルスクリプトは **GameObject ノード** （この場合は **Player** ノード）に **のみ** 割り当てることができます。 * * * ## オブジェクト設定の計画 このセクションでは、 **移動とジャンプ** の設定のみを行います。 つまり、現時点では攻撃やダメージの設定は不要です。 現在必要なのは以下の要素のみです。 - **プレイヤーの画像** - **移動** と **ジャンプ** のアニメーション - **移動速度** - **ジャンプ力** - **移動キー** したがって、このパートではこれらの要素のみを設定します。 ![ゲームオブジェクト構成EN2](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/2X/b/b62db661eb38854f1d9b3be6eeb9e6d2d851e9d6.png) ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 8:53 UTC](https://guild.rpgmakerofficial.com/t/topic/883/11 "2025-09-28T08:53:13Z")
# Sprite2D にプレイヤーのスプライトを設定する プレイヤーの画像を、画像を表示するために使用される **Sprite2D** ノードに適用しましょう。 このチュートリアルでは、提供された画像を使用します。 * * * ## 手順 1. 下の画像を **右クリック** して、コンピュータに保存します。 2. ダウンロードした画像を **ファイルシステム** にドラッグ＆ドロップしてインポートします。 3. 画像を表示する **Sprite2D** ノードを選択します。 4. 右側の **インスペクターパネル** で、 **Texture** プロパティ（現在は``に設定されています）を探します。 インポートした **player.png** ファイルをそこにドラッグ＆ドロップします。 5. 画像が表示されますが、 **9 文字すべて** が一度に表示されていることに気づくでしょう。 * * * ## スプライトシートの分割 1. インスペクターで **Animation** セクションを展開します。 2. **Hframes** （水平フレーム）を **5** に、 **Vframes** （垂直フレーム）を **2** に設定します。 3. インスペクターで **Frame** プロパティの上下矢印をクリックして試してみましょう。 * * * ## 注意：なぜ最初のフレームは 0 から始まるのか？ 最初のフレームが **1** ではなく **0** としてラベル付けされているのが奇妙に思えるかもしれません。 プログラミングでは、リストは通常 **0** から始まります。 Godot も同じ慣習に従っているため、フレーム番号も **0** から始まります。 ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 10:30 UTC](https://guild.rpgmakerofficial.com/t/topic/883/12 "2025-09-28T10:30:49Z")
# AnimationPlayer ノードを使用したアニメーションの作成 Godot Engine / ACTION GAME MAKER では、 **AnimationPlayer ノード** を使用してアニメーションを作成します。 このシステムは、ビデオ編集のような **タイムラインベースのスタイル** で動作します。 タイムライン上では、 **トラック** （画像、音声など用）を作成し、 **キーフレーム** （イベント）を配置します。時間が経過するにつれ、AnimationPlayer は各トラック上のキーフレームを実行します。 これは **オーケストラの楽譜** のようなものだと考えてください： - 1 秒の時点で、ピアノが C の音を演奏します。 - その瞬間、バイオリンが D の音を演奏します。 この例えでは： - **トラック = 楽器** - **キーフレーム = 演奏方法の指示** * * * ## 必要なアニメーション このチュートリアルでは、3 つの基本的なアニメーションを作成します： - **Idle（待機）** → 入力がないとき - **Jump（ジャンプ）** → ジャンプボタンが押されたとき - **Move（移動）** → 左右の入力があったとき これらすべてのアニメーションを **AnimationPlayer** を使用して作成します。 * * * ## 手順 1. シーンパネルで **AnimationPlayer** ノードを選択します。 2. 下部に新しい **アニメーションパネル** が表示されます（以前のタイルエディタと同様）。 3. **アニメーションボタン** をクリックし、 **新規** を選択します。 4. アニメーション名を入力するウィンドウが表示されます。まずは **Idle** から始めます。名前を入力して **OK** を押します。 5. Idle アニメーションが作成されました。 6. **Sprite2D** ノードを選択します。 7. インスペクタの **アニメーション \> フレーム** で、 **0** に設定されていることを確認します。 8. ウィンドウが表示されます。 **「RESET トラックの作成」をオフ** にしてから、 **作成** を押します。 * * * ### 補足：RESET トラックとは？ RESET トラックは、シーンの初期状態を指定します。 例えば、Idle ではこれをデフォルト状態として設定することもできます。 ただし、ACTION GAME MAKER では通常これを使用しないため、 **オフ** のままにしてください。 * * * 1. タイムラインに **Sprite2D: frame** というトラックが表示されます。 2. ステップ 1～8 を繰り返して、 **Jump** アニメーションを作成します。 - ジャンプフレームは **上段の 3 番目の画像** → **フレーム 2** です。 - 正しく設定されていれば、トラックに 0 秒の時点でフレーム 2 が表示されます。 1. 最後に、 **Move** アニメーションを作成します。 - Idle や Jump とは異なり、このアニメーションは **4 つのフレーム** を使用します： - 滑らかな動きにするため、 **0.2 秒ごと** にフレームを切り替え、アニメーションをループさせます。 * * * ## Move アニメーションの作成 1. 前述の通り、 **Move** という名前の新しいアニメーションを作成します。 - まず、0 秒の時点で **フレーム 5** を設定します。 1. タイムラインのプレイヘッドを **0.2 秒** に移動します（時間表示のボックスに「0.2」と入力します）。 2. Sprite2D のフレームを **6** に変更し、 **🔑+ ボタン** を押してキーフレームを挿入します。 - これで、0.2 秒の時点でフレーム 6 が追加されたことが確認できます。 1. 同じ手順を繰り返します： - **0.4 秒** で **フレーム 7** を設定します。 - **0.6 秒** で **フレーム 8** を設定します。 - これで 4 つのフレームすべてがタイムラインに配置されました。 1. **アニメーションの長さ** を調整します。 - アニメーションパネルの右上に、 **1** （デフォルトの秒数）が表示されているボックスがあります。 - これを **0.8** に変更します。4 つのフレームを 0.2 秒ずつ使用するためです。 - これにより、アニメーションがスムーズにループします。 1. ループを有効にします。 - 時間ボックスの隣にある **ループボタン** （円形の矢印）をクリックします。 - これにより、アニメーションが自動的に繰り返し再生されます。 * * * ### 補足：ループとピンポンループの違い - 1 回クリックすると通常のループ（アニメーションが最初から再開）が設定されます。 - もう 1 回クリックすると、 **ピンポンループ** が有効になります（アニメーションが前方に再生された後、後方に再生され、再び前方に再生されます）。 * * * 1. すべて設定できたら、 **再生ボタン** を押してアニメーションをテストします。 - 滑らかに再生されれば、完了です！ * * * ## トラブルシューティング - アニメーションがおかしい場合： - 以下を再確認してください： * * * ✅ これで、プレイヤーキャラクター用の **Idle（待機）** 、 **Jump（ジャンプ）** 、\*\*Move（移動）\*\*アニメーションの作成が完了しました。 ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 10:35 UTC](https://guild.rpgmakerofficial.com/t/topic/883/13 "2025-09-28T10:35:27Z")
# アニメーションセットの作成 ACTION GAME MAKER には、移動方向に応じて自動的にアニメーションを切り替える「 **Animation Set** （アニメーションセット）」というシステムがあります。 アニメーションセットに最大 8 方向分のアニメーションを割り当てることで、そのセットを一度選択するだけで、右、左、上などに移動した際にアニメーションが自動的に切り替わります。 ![画像79](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/2X/9/9ff882b31f68a8669b02d415df50a44d67366d5d.png) 今回のゲームでは、移動方向は **右** と **左** の 2 方向のみで十分です。 現在、Idle（待機）、Jump（ジャンプ）、Move（移動）の 3 つのアニメーションしかありませんが、これらはすべて **右** を向いています。 ただし、 **アニメーションを自動的に反転させる** オプションがあり、これはデフォルトで有効になっています。 つまり、左を向いたアニメーションを別途作成する必要はなく、システムが自動的に反転（ミラー）処理を行ってくれます。 また、このように左右の移動のみが必要で、右向きのアニメーションを反転させられるような場合は、 **一括読み込み機能** を使ってアニメーションセットを素早く設定できます。 * * * ## 手順 1. **Scene パネル** で、 **Player ノード** （GameObject ノード）を選択します。 2. **Inspector** で、 **Select Animation Player** と書かれたボタンをクリックします。 3. ノード選択ウィンドウが表示されるので、 **AnimationPlayer** ノードを選択します。 4. 次に、 **Bulk Load Animations** ボタンをクリックします。 5. 正常に動作したか確認するために、 **Animation Set** セクションを展開します。 6. 成功すると、Animation Set の中に **Jump、Idle、Move** のアニメーションがリストされているはずです。 * * * ## トラブルシューティング - アニメーションがセットに表示されない場合： ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 10:36 UTC](https://guild.rpgmakerofficial.com/t/topic/883/14 "2025-09-28T10:36:42Z")
# プレイヤー設定の調整 アニメーションを作成したので、次にプレイヤーの設定を行います。 以下の 3 つの作業が必要です。 1. **移動に使用するキー** を設定する 2. **移動速度とジャンプ力** を調整する 3. キャラクターの体に合わせるよう **衝突形状** のサイズを変更する * * * ## 移動キーの設定 以前に設定した入力アクションを使用して、移動キーを割り当てましょう。 1. **シーンパネル** で、 **MoveAndJumpSettings** ノードを選択します。 2. **インスペクター** で以下を設定します。 * * * ## 移動速度とジャンプ力の調整 次に、キャラクターに適した値に速度とジャンプ力を調整しましょう。 1. **MoveAndJumpSettings** ノードが選択された状態で、インスペクターを確認します。 2. **Horizontal Speed** の値を **100** から **300** に変更します。 3. 下部にある **Jump Force** というプロパティを見つけます。 * * * ## 衝突形状の調整 **CollisionShape2D** ノードは、キャラクターが地面や他の物体と衝突する際の形状を定義します。 現在、この形状が小さすぎます（キャラクターの頭よりも小さいため、体が地面に沈み込んでしまいます）。 スプライト全体に合うようにサイズを変更しましょう。 1. **シーンパネル** で、 **CollisionShape2D** ノードを選択します。 2. 四隅にある **オレンジ色の点** をクリックしてドラッグし、長方形のサイズを変更します。 * * * ✅ 完了すると、プレイヤーは入力に正しく反応し、適切な速度で移動・ジャンプできるようになり、地面に沈むことなく衝突するようになります。 ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 10:41 UTC](https://guild.rpgmakerofficial.com/t/topic/883/15 "2025-09-28T10:41:51Z")
# ビジュアルスクリプトでキャラクターを移動させる すべての準備が整いました。これで **ビジュアルスクリプト** を使用して、プレイヤーキャラクターを移動させましょう。 まず、 **ビジュアルスクリプト** をプレイヤーに **アタッチ（追加）します** 。 * * * ## ビジュアルスクリプトのアタッチ 1. **シーンパネル** で、 **Player ノード** （GameObject）を選択します。 2. \*\*📜+（スクリプトのアタッチ）\*\*ボタンをクリックします。 3. 新しいウィンドウが表示されます。 **VisualScript** （ビジュアルスクリプト）か **GDScript** （標準のプログラミングスクリプト）のどちらをアタッチするかを尋ねます。 4. エディタビューが自動的に **Script タブ** に切り替わります。 * * * ## 前のビューに戻る 前の画面に戻りたい場合は、上部のタブを **2D** に切り替えるだけです。 シーンの遷移セクションで説明した通り、上部のタブはエディタに表示する内容の切り替えに使用されます。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/2X/d/d8a2a3bacc2f680786d6ccce211e0d6edbf02c37.png) ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午前 11:50 UTC](https://guild.rpgmakerofficial.com/t/topic/883/16 "2025-09-28T11:50:38Z")
# ステートの作成 ## 必要なステートの決定 第1章で説明した通り、ACTION GAME MAKER のビジュアルスクリプトは以下の手順で作成されます： 1. キャラクターの **ステート** に動作を追加し、 2. 条件付きでそれらのステートを相互に接続（リンク）します。 今回は、キャラクターがステージ上を歩き回り、ジャンプするだけのゲームであるため、以下の3つのステートだけで十分です： - **アイドル** - **移動** - **ジャンプ** これら3つのステートを接続し、適切な条件で切り替えることで、プレイヤーの移動を実現できます。 まずは **アイドル** 、 **移動** 、 **ジャンプ** の各ステートを準備し、アニメーションと動作を割り当てていきましょう。既存の **State001** を **アイドル** ステートとして再利用できます。 * * * ## アイドルステートの作成 1. **スクリプトウィンドウ** で **State001** を選択します。 2. インスペクターで **タイトル** を「State001」から **アイドル** に変更します。 3. **割り当てるアニメーション \> アニメーション選択** の下にある空欄をクリックし、 **アイドル** を選択します。 * * * ## 移動ステートの作成 移動ステートは新しいステートとして作成する必要があります。 1. **アイドル** ステートの右側の空白スペースを右クリックします。 2. メニューから **ステートの追加** を選択します。 3. 新しい「State001」が表示されるので、 **タイトル** を **移動** に名前変更します。 4. **アニメーションカテゴリ** で **移動** を選択します。 * * * ## ジャンプステートの作成 ジャンプステートには、アニメーション **と** ジャンプ動作の両方が必要です。 1. **アイドル** と **移動** のステートの下に新しいステートを作成します。 2. 以前と同様に、 **タイトル** を **ジャンプ** に名前変更し、 **アニメーション** を **ジャンプ** に設定します。 3. **アクション設定** セクションを展開します。 * * * ## 補足：なぜ移動ステートには「移動動作を実行」のようなアクションがないのか？ プレイヤー入力に基づく移動は、 **MoveAndJumpSettings** で設定したキーバインディングによって既に処理されています。 このシステムは **すべてのステート** に適用されるため、移動ステートには移動のための追加アクション設定は不要です。 * * * ✅ これで、アイドル、移動、ジャンプという3つの主要なステートが設定され、キャラクターの動作を制御する準備が整いました。 ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午後 12:02 UTC](https://guild.rpgmakerofficial.com/t/topic/883/17 "2025-09-28T12:02:54Z")
# 状態をリンクで接続する 3 つの状態を作成したので、プレイヤーがスムーズに状態間を遷移できるよう、 **リンク** でそれらを接続しましょう。 * * * ## 遷移条件について考える このゲームの基本的なロジックは以下のようになります。 - **左/右入力が押された場合 → 移動** - **ジャンプ入力が押された場合 → ジャンプ** - **入力がなかった場合 → 待機** つまり： - **待機 → 移動** ：左/右が押された場合、 **移動 → 待機** ：入力がなくなった場合。 - **待機 → ジャンプ** ：ジャンプが押された場合、 **移動 → ジャンプ** ：移動中にジャンプが押された場合。 - **ジャンプ → 待機** ：地面に接触したとき（タイルと下方で衝突したとき）。 👉 **ジャンプ → 移動** のリンクも必要でしょうか？ 必ずしも必要ありません。移動キーを押しながら着地した場合、待機 → 移動への遷移が即座に起こるため、直接ジャンプ → 移動のリンクは不要です。 * * * ## 待機と移動のリンク 1. **待機** 状態を右クリックし、 **リンクの追加** を選択します。 2. 線を待機から **移動** 状態にドラッグします。 3. 新しいリンクを選択します。インスペクターで\*\*「入力時にトリガー」\*\*をチェックします。 4. 新しい\*\*入力操作リスト (Array[InputCondition])\*\*を展開します。 5. **+ 入力の追加** をクリックします。 6. 新しい``スロットが表示されます。それをクリックし、 **新しい入力条件** を選択します。 7. ``が **入力条件** に変わります。クリックして展開します。 8. 以下の通りフィールドを設定します： 9. これで、キャラクターは左または右が押されているときに **待機 → 移動** へ遷移します。 10. 次に、 **移動 → 待機** のリンクを作成しましょう。 **移動** を右クリックし、 **リンクの追加** を選択します。 11. 新しいリンクを選択します。 12. インスペクターで\*\*「入力がない場合にトリガー」\*\*をチェックします。 * * * ## プレイヤーをステージに配置してテスト この時点で、プレイヤーは地面を左右に歩けるはずです。 **stage1.tscn** にプレイヤーシーンを入れてテストしましょう。 1. エディタのビューを **スクリプト** から **2D** に切り替えます。 2. プレイヤーシーンを保存します： **player タブ** を右クリックし、 **シーンの保存** を選択します。 3. **stage1.tscn** タブに切り替えます。 ![image](https://us1.discourse-cdn.com/flex002/uploads/rpgmaker_community/original/2X/2/2c4eb27f8ed6cde063f7a23ea961d40eb7fb7172.png) 4. シーンパネルで\*\*Base (TileMapLayer)\*\*を選択します。 5. ファイルシステムから **player.tscn** をステージにドラッグし、地面に配置します。 6. プレイヤーが **BaseLayer の子** として表示されていることを確認します。 7. 右上の\*\*プロジェクトを実行 (F5)\*\*ボタンをクリックします。 8. すべてが正しければ、キャラクターは以下のようになります： * * * ### トラブルシューティング - **プレイヤーが動かない** → MoveAndJumpSettings に正しい入力キーが割り当てられているか確認してください。 - **プレイヤーは動くがアニメーションが変わらない** → 待機 → 移動のリンクと、移動状態のアニメーション設定を確認してください。 - **プレイヤーが待機状態に戻らない** → 移動 → 待機のリンク条件が正しいか確認してください。 ⚠ エラー：`ID is not set in CameraTargetSettings.` この警告は、CameraTargetSettings が存在するが設定されていないことを意味します。 カメラ追跡は **第 4 章** で設定するため、このエラーは現在無視して問題ありません。 * * * ## 待機、移動、ジャンプのリンク 次に、ジャンプを他の状態に接続しましょう。 1. **player** タブに戻り、エディタを **スクリプトビュー** に設定します。 2. **待機** を右クリックし、リンクを追加して **ジャンプ** に接続します。 3. リンクを選択し、\*\*「入力時にトリガー」\*\*を有効にします。 4. 入力リストを展開 → **+ 入力の追加 → 新しい入力条件** 。 5. 以下のように設定します： 6. 次に、 **移動 → ジャンプ** をリンクします。 7. 待機 → ジャンプのリンクを右クリックし、 **コピー** を選択します。 8. **移動** 状態を右クリックし、 **リンクの貼り付け** を選択します。 9. 新しい線を移動からジャンプにドラッグします。 10. 移動 → ジャンプのリンクを選択し、正しく設定されているか（ジャンプキーが押されている）確認します。 * * * ## ジャンプから待機へのリンク 1. **ジャンプ** 状態を右クリックし、リンクを追加して **待機** に接続します。 2. これは入力ベースではないため、インスペクターを開き、 **+ 条件の追加** をクリックします。 3. ウィンドウが表示されます。 **ContactWithTile** を選択します。 4. 条件で、 **Incoming Contact Direction → Bottom** を設定します。 5. リンクがこの設定になっている場合、完了です。 * * * ## テストプレイ \*\*プロジェクトを実行 (F5)\*\*をクリックします。 - 待機中または移動中に **Z** を押すと、プレイヤーがジャンプします。 - 着地すると、プレイヤーは待機状態に戻ります。 * * * ### トラブルシューティング - **ジャンプできない** → 待機 → ジャンプと移動 → ジャンプのリンクを確認し、ジャンプ状態のジャンプアクションが有効になっているか確認してください。 - **着地できない** → ジャンプ → 待機のリンクを確認し、「ContactWithTile (Bottom)」条件が設定されているか確認してください。 * * * ✅ これで、Visual Script を使用してプレイヤーが **待機、移動、ジャンプをスムーズに行える** ようになりました。 ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 28 日午後 12:03 UTC](https://guild.rpgmakerofficial.com/t/topic/883/18 "2025-09-28T12:03:36Z")
# 第2章の復習 第2章では、 **ゲームシーン** と **ゲームオブジェクト** の概念について学び、ステージとプレイヤーキャラクターの両方を作成しました。 - **ゲームシーン** では、 **レイヤー** の概念と、 **タイルのインポートと配置** の方法について解説しました。 - **ゲームオブジェクト** では、 **画像のインポート、アニメーションの作成、設定の調整、ビジュアルスクリプトの添付** の方法を学びました。 このワークフローは、ほぼすべてのゲーム開発で共通しています。 したがって、今後のプロジェクトで行き詰まったときは、これらの手順を振り返って参考にすると良いでしょう。 これで、ACTION GAME MAKERの **基本的な操作と中核となる概念** を学びました。 **第3章** では、 **弾の発射と敵の作成** を追加して、より本格的なゲームのような雰囲気を作るために進めていきます。 > [@Tutorial: “Getting Started with ACTION GAME MAKER from Zero” – Chapter 3](https://guild.rpgmakerofficial.com/t/topic/884?u=moonling): > > Chapter 3: Shoot Bullets and Defeat Enemies Goal of Chapter 3 In Chapter 2, we achieved the goal of: Creating a simple stage where the player character can walk and jump. In this chapter, we’ll tak… ---
**Author:** ![Moonling](https://sea2.discourse-cdn.com/flex002/user_avatar/guild.rpgmakerofficial.com/moonling/32/369_2.png) [@Moonling](https://guild.rpgmakerofficial.com/u/Moonling)\ **Post date:** [2025 年 9 月 29 日午後 3:24 UTC](https://guild.rpgmakerofficial.com/t/topic/883/19 "2025-09-29T15:24:52Z")
表示: 2025 年 9 月 29 日午後 3:24 UTC