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

Unity基礎

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

 

  1. 準備
        1. イメージ
        2. 各オブジェクトの配置
        3. エネミー画像の設定
  2. 特定のタイミングでアニメーションを再生する方法
      1. STEP1:メインとなるアニメーションを作成する
      2. STEP2:空のアニメーションを作成する
        1. 空のアニメーション作成と設定
          1. ①既に作成済みのAnimationClipをダブルクリックする
          2. ②新しいAnimationClipを作成する
          3. ③AnimationClipの保存
          4. ④アニメーション用Propertyの作成
          5. ⑤アニメーション用コマ送り画像の設定
          6. ⑥ループ設定
          7. ⑦設定したアニメーションの確認
      3. STEP3:AnimationControllerの設定を行う
        1. ①AnimationControllerを開く
        2. ②空のアニメーションをデフォルト状態でのアニメーションに設定する
        3. ③各アニメーションの遷移関係を設定する
        4. ④アニメーション遷移条件を設定する
          1. アニメーションの遷移条件に使うParameterを定義する
          2. アニメーションの遷移条件を設定する
      4. STEP4:アニメーション遷移処理を実装するためのスクリプト作成する
      5. STEP5:操作対象とするアニメーション用オブジェクトをスクリプトに認識させる
      6. STEP6:スクリプトをオブジェクトへアタッチする
      7. STEP7:スクリプトに操作したいオブジェクトを認識させる
      8. STEP8:スクリプトを編集し、アニメーション遷移処理を実装する
      9. STEP9:ボタンオブジェクトのクリック時動作を設定する
  3. 機能テスト

準備

イメージ

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

各オブジェクトの配置

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

既にUnity基礎11でオブジェクトを配置済みの方は適宜手順を省略してください。

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

各オブジェクトの名前と役割
EnemyImage:エネミーの画像を表示させるイメージオブジェクト
AttackButton:「攻撃」ボタン。エネミー画像の上から攻撃アニメーションを表示させる処理を行うトリガーとなる(ボタンを押すことでアニメーション 演出処理を実施する)ボタン

 

エネミー画像の設定

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

こちらも既にUnity基礎11を通して設定済みの場合は不要ですので、適宜手順を省略してください。

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

URL:https://pipoya.net/sozai/

使用させて頂いた素材:ポップモンスター46セット

URL:https://pipoya.net/sozai/assets/enemyillust/enemy-image/
素材提供元:ぴぽや倉庫様

 

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

今回は特にスクリプトを使用して画像を呼び出す処理は行わないため、あえてResourcesフォルダを作る必要はないですが、アニメーションの画像と区別しやすくするためにフォルダを作っています。

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

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

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

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

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

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

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

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

上記STEP1,2により、「空のアニメーションを再生→ボタンが押される→STEP1で作成したアニメーション再生→空のアニメーション再生状態に戻る」というようにアニメーションをコントロールすることで特定のタイミングでアニメーションが再生できることになります。
空のアニメーション作成と設定

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

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

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

②新しいAnimationClipを作成する

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

前回も述べましたが、ヒエラルキーウィンドウ上でAnimationImageが選択された状態でないとAnimationの編集が行えないため編集がうまくできないときは確認してみてください。
③AnimationClipの保存

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

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

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

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

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

コマ送り画像の設定方法は「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を選択します。

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

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

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

各アニメーションの遷移条件
EmptyAnimation→AttackAnimation:「攻撃」ボタンを押した時AttackAnimation→EmptyAnimation:攻撃アニメーションが完了した時

 

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

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

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

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

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

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

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

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

ここまでで各アニメーションとパラメーターの関係が設定されました。あとはこれらのパラメーターをゲーム画面での条件と結びつければそれぞれのアニメーションが好みのタイミングで呼び出せるようになるというわけです。今回の例で言えば、「AttackTriggerを「攻撃」ボタンが押された時にONになるように設定する」、「攻撃アニメーションが完了したらEmptyTriggerをONになるように設定する」といった具合です。(下図参照)

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

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

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

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

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

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

6行目:AnimationControllerクラスに、アニメーションを表示させる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行目は前述と変わりありませんので、説明は省略しています。

8~14行目:「攻撃」ボタンが押された時の処理内容を表すメソッド
11行目:AnimationImageが表すオブジェクトにAttackTriggerをONにする命令を出す
13行目:AnimationImageが表すオブジェクトにEmptyTriggerをONにする命令を出す

 

今回は特に触れませんでしたが、Animtorタブの遷移条件のインスペクターウィンドウにあるHasExitTimeはお好みによりチェックを外したり、Settingsの詳細情報を変更してください。これによりアニメーションの開始や終了に関する時間的挙動を変更することができます。

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

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

ボタンクリック時の動作実装方法については「Unity基礎3」の「6.ボタンクリック時の機能実装」で詳しく説明していますので、必要に応じてご参照ください。

機能テスト

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

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

以上。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

-ゲームアプリ「HelloAnotherWorld」ダウンロードのお願い-

私が作成したゲームアプリ「HellowAnotherWorld」をダウンロードしていただけると嬉しいです。
有料ではありますが、ペットボトル飲料一本分程度の値段ですので、是非お願いします。
皆様にもメリットがあり、「このサイトで勉強すればこの程度のアプリであれば自分一人で作成できるようになる」という一つの目安にもなるかと思います。

スポンサーリンク
HelloAnotherWorld
HelloAnotherWorld
¥120
posted withアプリーチ
Unity基礎
ソフィーのUnity講座

コメント