【アクションゲームメーカー】動く背景や水面を作ろう！タイルアニメーションの設定方法と落とし穴

こんにちは、AM0500です。

アクションゲームメーカー（AGM）でマップを作っているとき、静止画ではなく「川の水面や滝、燃える炎のタイルをアニメーションさせたいのに、どうやって設定するか分からない！」と困ったことはありませんか？

実は私も、AGMの公式マニュアルやチュートリアルを探したのに見つからず、かなり長い時間エディタを睨みつけてしまった経験があります。Googleで調べてみてもアクションゲームツクールの方の情報が出てきたりして、なかなか見つけることもできません。

アクションゲームメーカーは非常に便利なツールですが、ベースとなっているのは「Godot Engine」です。そのため、タイルセットのアニメーションなど一部の機能は、AGM独自のメニューではなく「Godot側の機能」を直接触る必要があります。（そのためアクションゲームメーカーで調べても説明が見つかりにくいようです。）

今回は、私も悩まされた「タイルアニメーションの正しい設定手順」を、画像を交えて分かりやすく解説します！

Step 1: アニメーション用の画像素材を用意する

まずは動かしたいタイルの画像を用意します。

Godot（AGM）のタイルアニメーションでは、パラパラ漫画のように「コマとなる画像が等間隔で横（または縦）に並んだ1枚の画像シート」（スプライトシート）を使用します。

例えば、水面が3パターンで動くなら、3つのコマが横に繋がった画像を用意して、プロジェクトの素材フォルダにインポートしておきましょう。

新規プロジェクトを作って、一番簡単に試せるように、ゲームシーン（GameScene）のBaseLayerに入っている「Base」を使って説明します。

するとインスペクターでTileMapLayerの項目が表示されるので、タイルセットを「新規作成」します。新規作成を行うと、その詳細項目が見れるようになります。

今回はタイルの形を「Square」タイルサイズを64pxとしました。（ブログ用に見やすいように大きいタイルにしました。）後は物理レイヤーの設定を追加しています。
（補足：タイルの形はヘックス型など色々変更できるみたいです。）

Step 2: TileSetに画像を読み込む

標準の画面レイアウトの場合、画面下に「TileSet」という項目が表示されているはずです。
表示されなかったら、再度ゲームシーンのBaseを選択してみてください。
ここにある「Tile Sources」にタイルの画像をドラッグアンドドロップします。
タイルのサイズに合わせて設定を行って下さい。

ここで一つ注意点があります！画像をドラッグ＆ドロップした際、「自動でタイルを作成しますか？」という確認ダイアログが出ることがありますがここでは「いいえ」を選択してください。

Step 3: タイルを選択し、アニメーション設定を展開する

画像を読み込んだら、アニメーションの始点となる一番左のコマ（タイル）を選択状態にします。「選択」を選択してタイルの情報を変更します。

アニメーションの2コマ目以降になる部分がハイライトされている状態だと思いますので、右クリックをして「削除」を選びます。
するとハイライト表示が消えた状態になります。

次に、1コマ目の画像を選択するとアニメーションの項目が表示されます。
フレームの中にある「要素を追加」を押すとフレームの項目を増やすことができます。
おそらく自動で2コマ目、3コマ目の画像が選択されると思います。

Step 4: アニメーションのコマ数と速度を設定する

アニメーションの項目を展開したら、以下の数値を入力して動きを作ります。

Step3で要素を追加した段階でアニメーションが始まっているはずです。
持続時間を変更してアニメーションの動きを調整してみましょう。

AGMを触っていて「あれ？この機能どこ？」と行き詰まった時、「もしかしてGodotの標準機能の方で設定するのでは？」と視点を切り替えるのが、開発をスムーズに進める最大のコツです。

また、タイルアニメーションを多用すると、ゲームの処理が少し重くなることがあります。

私の場合、動くタイル（水面や溶岩など）は、静的な床や壁とは別の「装飾用レイヤー」に分けて配置するようにしています。レイヤーを分けておくと、後からアニメーションの速度を一括調整したい時や、当たり判定（コリジョン）の管理をする際に非常に楽になるのでオススメですよ！

まとめ

タイルアニメーション設定の重要なポイントは以下の3点です。

1.  アニメーション設定はAGM独自メニューではなく、TileSetのプロパティ（Godot標準機能）を使用する。

2.  素材読み込み時の自動作成は「いいえ」にする。

3.  タイルのアニメーションの項目でタイルのアニメーションを作成することができる。

「マニュアルに載っていない！」と焦った時は、ぜひGodot側のプロパティパネルを探してみてくださいね。