【Unity基礎12】特定のタイミングでアニメーションを再生する方法

前回のUnity基礎11ではゲーム画面にアニメーションを組み込む方法を説明しました。今回はその応用編として、エネミーへの攻撃演出を例に、特定タイミングでゲーム画面にアニメーションを再生する方法について説明したいと思います。

準備

イメージ

今回はエネミーへの攻撃演出の作成を想定します。前回のUnity基礎11でも説明しましたが、イメージとしては下図のように「攻撃」ボタンを押した際、エネミーの画像上に攻撃のアニメーションを表示させるようにします。そのうち、アニメーション演出表示の方法についてはUnity基礎11で説明済みですので、今回はボタンを押した際に既に作成したアニメーションを呼び出すようにする方法について説明します。

各オブジェクトの配置

こちらもUnity基礎11内容は重複しますが、各オブジェクトの配置についても簡単に述べておきます。私は以下のようにボタンおよびイメージを配置しました。

上図におけるオブジェクトの名前と役割は以下の通りです。

エネミー画像の設定

次にエネミーの画像を設定します。

先ずは表示させるエネミーの画像を用意します。今回もUnity基礎8と同様、下記サイト様の無料素材を使用させていただきます。

素材がダウンロードできたら、下図のようにプロジェクトウィンドウのAssetsフォルダ直下にResourcesフォルダを作り、さらにその直下にImageフォルダを作って表示させたいエネミー画像をドラッグ＆ドロップします。

エネミー画像が用意できたら下図のようにEnemyImageオブジェクトのSourceImageに用意した画像をドラッグ＆ドロップし、エネミー画像を設定します。

特定のタイミングでアニメーションを再生する方法

必要な準備が整ったので、特定のタイミングでアニメーションを再生する方法について説明していきます。

STEP1：メインとなるアニメーションを作成する

先ずはメインとなるアニメーションを作成します。ここでいうメインとなるアニメーションとは

今回の例では、「攻撃」ボタンを押した際に再生させたい攻撃アニメーションのことです。今回の場合、既にUnity基礎11で作成済みですのでアニメーションの作成方法は省略します。もしアニメーションの作成法を知りたい方は、Unity基礎11をご覧いただければと思います。

STEP2：空のアニメーションを作成する

次に空のアニメーションを作成します。空のアニメーションとは何も行わない時に再生される画像設定のないアニメーションのことです。今回の例で説明すると「攻撃」ボタンを押した際、STEP1で作成したアニメーションを再生するわけですが、ボタンが押されていない状態で見かけ上何も起こっていないようにするため、空のアニメーションを作成する必要があるわけです。

空のアニメーション作成と設定

それでは実際に空のアニメーションを作成しましょう。個別アニメーションとしてAnimationClipを作成する方法は前回のUnity基礎11 STEP3でも説明しているのですが、そのうち①～②は別の方法でもできますので、今回はそちらをご紹介します。

①既に作成済みのAnimationClipをダブルクリックする

先ずは下図のように、既に作成済みのAttackAnimationをダブルクリックします。

②新しいAnimationClipを作成する

次に下図のように、AttackAnimationの部分をクリックし、「CreateNewClip…」をクリックし、新しいAnimationClipを作成します。

③AnimationClipの保存

続いて作成したAnimationClipを保存します。今回は空のアニメーションという意味で下図のようにEmptyAnimationという名前で保存しました。

④アニメーション用Propertyの作成

次に下図を参考に、「AddProperty→Image→Spriteの+ボタン」の順に選択し、アニメーション画像設定用のPropertyを作成します。

⑤アニメーション用コマ送り画像の設定

次にアニメーション用コマ送り画像を設定します。今回は空の画像が既に設定されているので、変更は不要です。もし別の画像が設定されているのであれば、「Unity基礎11 STEP3 画面表示画像の設定」で使用した空の画像をコマ送り画像に設定してください。

⑥ループ設定

今回は空のアニメーションであるため、ループ設定を解除しても特に大きな影響はないと思いますが、今回は空のアニメーションに関してはループ再生する設定にしておくこととします。具体的には下図のようにプロジェクトウィンドウでEmptyAnimationを選択し、インスペクターウィンドウでLoopTimeのチェックを入れた状態にします。

⑦設定したアニメーションの確認

ここまできたら下図のようにAnimationウィンドウ上でPlayボタンを押し、設定した空のアニメーションが想定どおり動いていること(余計なアニメーションが表示されないこと)を確認します。

STEP3：AnimationControllerの設定を行う

メインとなるアニメーションと空のアニメーションの作成ができたら次はAnimationControllerの設定を行い、それぞれのアニメーションが再生される条件を設定します。

①AnimationControllerを開く

先ずはAnimationControllerを開きます。具体的には下図のようにプロジェクトウィンドウからAnimationControllerをダブルクリックします。

②空のアニメーションをデフォルト状態でのアニメーションに設定する

次にAnimationController内で空のアニメーションをデフォルト状態で再生されるアニメーションに設定します。具体的には下図のようにEmptyAnimationを選択し、右クリックを押してSet as Layer Default Stateを選択します。

③各アニメーションの遷移関係を設定する

次に各アニメーション(EmptyAnimationとAttackAnimation)の遷移関係を設定します。前述のように今回は、各アニメーションはEmptyAnimation⇄AttackAnimationという関係に設定します。具体的には、下図のようにAnimationController内で対応するアニメーションのブロックを選択した状態で右クリックを押し、MakeTransitionを選択します。

そして遷移先のアニメーションブロックを選択します。最終的には下図のように各アニメーションブロックからそれぞれ遷移先を表す矢印が出ている状態に設定します。

④アニメーション遷移条件を設定する

ここまでで２つのアニメーション間に遷移関係を持たせることができました。続いて各アニメーションが別のアニメーションに遷移するための条件を設定します。今回の例でいうと、EmptyAnimationからAttackAnimationに遷移する条件とその逆のパターンの条件です。これは今回の例で言えば下記のような条件となります。

アニメーションの遷移条件に使うParameterを定義する

アニメーションの遷移条件がイメージできたところで、実際に遷移条件を設定していきます。先ずは遷移条件に用いるパラメーター(Parameter)を定義します。パラメーターにはbool型などいくつかの型がありますが、今回はTriggerを使用します。具体的にはまず下図のようにAnimatorタブを選択し、Parametersタブを選択、さらに＋ボタンをクリックします。

そしてその状態でTriggerを選択し、NewTriggerの左にある＝記号をクリックします。(下図参照)

そしてNewTriggerとなっている部分に自分で理解しやすいパラメーター名を入力します。ここではEmptyAnimation→AttackAnimationとなるトリガーという意味でAttackTriggerとすることとします。(下図参照)

同様にAttackAnimation→EmptyAnimationのトリガー条件用パラメーターとしてEmptyTriggerも定義します。(下図参照)

アニメーションの遷移条件を設定する

２つのパラメーターを定義できたら最後にこれらを用いて遷移条件を設定します。具体的には下図のように、アニメーターウィンドウ上でEmptyAnimationブロックからAttackAnimationブロックに出ている矢印をクリックし、インスペクターウィンドウのConditionsの+ボタンを押して、表示されるリストからAttackTriggerを選択します。

同様にAttackAnimation→EmptyAnimationの条件もEmptyTriggerに設定します。（下図参照）

STEP4：アニメーション遷移処理を実装するためのスクリプト作成する

次にアニメーション遷移処理を実装するためのスクリプト作成します。今回は下図のようにAnimationControllerという名前でスクリプトを作成しました。

STEP5：操作対象とするアニメーション用オブジェクトをスクリプトに認識させる

続いて操作対象とするアニメーション用オブジェクトを先ほど作成したスクリプトに認識させます。ここで言う操作対象とは今回の例ではアニメーションを表示するAnimationImageオブジェクトです。実際のスクリプトは下記となります。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class AnimationController : MonoBehaviour
{
    [SerializeField] Animator AnimationImage = null;//アニメーションを表示させるImageオブジェクトとの連携のために導入
}

上記スクリプトに関しての説明は下記の通りです。

STEP6：スクリプトをオブジェクトへアタッチする

上記STEP5で記述したスクリプトではまだ処理としては未完成ですが、説明のため、先ずは作成したスクリプトをオブジェクトにアタッチします。AnimationControllerスクリプトのアタッチ先オブジェクトとして空のオブジェクトを作成し、その名前をAnimationManagerとしました。そしてこのAnimationControllerにAnimationControllerスクリプトをアタッチします。（下図参照）

STEP7：スクリプトに操作したいオブジェクトを認識させる

STEP6でAnimationControllerにスクリプトをアタッチすると下図のように、インスペクターウィンドウ上でAnimationImageという箱ができます。そこにアニメーションを表示させるAnimationImageオブジェクトをドラッグ＆ドロップします。

STEP8：スクリプトを編集し、アニメーション遷移処理を実装する

STEP7の作業により操作対象となるオブジェクトをスクリプトが認識できたので、続いて実際に操作したい内容をスクリプトに記述します。今回は下記のようなスクリプトとなります。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class AnimationController : MonoBehaviour
{
    [SerializeField] Animator AnimationImage = null;//アニメーションを表示させるImageオブジェクトとの連携のために導入
    //攻撃ボタンが押された時の処理
    public void ClickAttackButton()
    {
        //AttackTriggerをONにする処理
        AnimationImage.SetTrigger("AttackTrigger");
        //EmptyTriggerをONにする処理
        AnimationImage.SetTrigger("EmptyTrigger");
    }
}

上記スクリプトに関しての説明は下記の通りです。ただし、6行目は前述と変わりありませんので、説明は省略しています。

STEP9：ボタンオブジェクトのクリック時動作を設定する

最後にボタンクリック時の動作をボタンオブジェクトに認識させます。設定を行うには具体的には下図のようにAttackButtonオブジェクトのOnClick()に先に実装したClickAttackButtonメソッドを設定します。

機能テスト

ここまでできたらPlayボタンを押してゲームを起動させ、処理が想定どおりに行われているか確認しましょう。実際に起動させてみた結果、下図のようにボタンを押す毎に攻撃アニメーションが再生されるようになりました。

今回は特定のタイミングでアニメーションを再生する方法について説明しましたがいかがだったでしょうか。今回はボタンを押したタイミングで攻撃アニメーションを表示させることを例に取り上げましたが、エネミー側からの攻撃処理の内部にトリガーセットを組み込むことでエネミー側から攻撃についてもアニメーションを組み込むことができるようになります。そうすることプレイヤー側とエネミー側双方の攻撃に対してアニメーションが実装できることとなります。攻撃処理のみならずアニメーション再生の応用範囲は広いと思いますので、今回の内容が皆さんのゲーム制作に少しでもお役に立ていただければと思います。

以上。