【Unity】もぐら叩きゲームvol.6：トリガーでアニメーションを遷移させる！

前回は、マスク機能を使ってモグラを穴からキレイに飛び出る動きができました。

今回は、画面をクリックしてハンマーの動きを発動させる方法を紹介していきます。

この記事では、以下の動画のようなハンマーの動きを作ることを目標としています。

「画面をクリックしてハンマーの動きを発動させる」には、以下の3つの要素が必要です。

3つの要素

ハンマーのアニメーションを作る
カーソルを検知して、ハンマーを表示させる
トリガーを使って、アニメーションを遷移させる

では、さっそくハンマーにアニメーションを実装していきましょう！

手順①ハンマーを用意する

まずは、ヒエラルキーのCreateボタン→UI→Imageを選択します。

すると、ゲームビューの真ん中に白いImageコンポーネントを持つゲームオブジェクトが登場するので、インスペクターにあるSource Imageにハンマーの画像をアタッチしましょう。

名前は、わかりやすく、Hammerにしておきましたよ！

素材がない場合は、こちらの記事からダウンロードしておいてください！

関連記事【Unity初心者向け】モグラ叩きゲームの作り方vol.01〜手順編〜

2023.04.30

手順②ハンマーのAnimatorとAnimationClipを作る

ヒエラルキーのHammerを選択した状態で、Window→Animation→Animationを選択します。

すると、下の画像のように、Animationウィンドウが登場します。

Animationウィンドウは、自由に配置ができるので、プロジェクトウィンドウがあるところにドラック＆ドロップしましょう。

Animationウィンドウを開いた状態で、ヒエラルキーのHammerを選択します。すると、Createボタンが押せるようになるので、そのままクリックしてください。

このクリエイトボタンで、AnimatorとAnimationClipが生成されます。

名前は、Hammerとしておきましょう。なお、保存フォルダを作っていなかった場合は、Animation専用のフォルダを作っておいてくださいね。

Animationについては、こちらの記事でも詳しく紹介しています。

関連記事初心者のお悩み解決！Unityのアニメーション機能を紹介！

2023.04.30

手順③ハンマーのAnimationClipを増やす

プロジェクトを見ると、AnimatorとAnimatorClipができていますね。

AnimationClipの方は、名前がHammerになっているので、Freeze＠Hammerに名前変更しておきましょう。

次に、ハンマーを振りかざすAnimationClipを作ります。↕マーク→New Animation Clip→Move@Hammerと名付けて保存しましょう。

ちなみに、Animationタブが見つからない場合は、プロジェクトウィンドウのあるタブを右クリック→Add Tab→Animationで見つかります。

手順④Animation Clipに回転プロパティを追加する

Hammerには、Freeze＠HammerとMove＠Hammerの2つがある状態です。

振りかざすアニメーションを作るには、Move@Hammerだけ、編集します。

上の画像のように、Move@Hammerに切り替えて、Add Property→Rect Transform→Rotationを選択しましょう。

上の動画のように、Animationウィンドウの赤いレコードボタンを押してから、HammerのRotationのZ値を変更します。

手順⑤AnimatorでAnimationClip同士をつなげる

Animatorウィンドウを開いて、「Freeze＠Hammer⇔Move@Hammer」となるように、右クリック→Make Transitionで矢印をつなげましょう。

さらに、Animatorの「＋」ボタンを押してから、Trigger→Move0と名前をつけてください。

そして、Freeze＠HammerからMove@Hammerに伸びる矢印の設定を行います。ここが、とても重要なので、下の写真と同じくなるように設定してください。

やることは、以下の3つです。

Has Exit Timeのチェックを外す→すぐに遷移するようになります。
Transition Durationを０にする→遷移するまでの時間を０にする
ConditionにTrigger（Move0）をセットする→このTriggerが遷移の肝となります。

うまくいくと、以下の動画のように、Animatorウィンドウで手動で遷移を変えることができるはずです。

手動でうまくいったら、今度はコードから実装しましょう。

手順⑥HammerManager.csを作る

コードは、以下のように記載します。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class HammerManager : MonoBehaviour
{
    Animator animator;　//animatorを宣言

    // Start is called before the first frame update
    void Start()
    {
        animator =　GetComponent<Animator>();　//宣言したanimatorに、Animatorコンポーネントを取得する
    }

    // Update is called once per frame
    void Update()
    {
       
        if (Input.GetMouseButtonDown(0))　//マウスクリック情報を取得する
        {
            Debug.Log("入力されてる");　//マウスクリックが入っているかどうかの、確認ログ
            animator.SetTrigger("Move0");　//SetTriggerでMove0を発動させる
        }
       
    }

}

スクリプトを作ったら、ヒエラルキーのHammerオブジェクトにアタッチすることを忘れないでくださいね！

これで、ゲームを再生し、ゲームビュー上の画面をクリックすると、コンソールに「入力されてる」と表示されるはずです。

次に、カーソルに合わせてハンマーが登場するようにします。

先程記載したコードに以下のように、追記しましょう。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class HammerManager : MonoBehaviour
{
    public GameObject hammerObject;　//追記

    Animator animator;

    // Start is called before the first frame update
    void Start()
    {
        animator =　GetComponent<Animator>();
    }

    // Update is called once per frame
    void Update()
    {
        var mousePosition = Input.mousePosition;　//追記
        mousePosition.z = 10; //追記
        var pos = Camera.main.ScreenToWorldPoint(mousePosition);//追記
        hammerObject.transform.position = pos;//追記

        if (Input.GetMouseButtonDown(0))
        {
            Debug.Log("入力されてる");
            animator.SetTrigger("Move0");
        }
       
    }

}

ポイントは、出現させるハンマーをpublic GameObject hammerObject;と宣言していること。

publicで宣言したら、ヒエラルキーにあるHammerをインスペクターにある「hammerObject」に格納することを忘れないでください！

そして、以下のコードをif(Input.GetMouseButtonDown(0))の直前に配置していることです。

var mousePosition = Input.mousePosition;　//追記
mousePosition.z = 10; //追記
var pos = Camera.main.ScreenToWorldPoint(mousePosition);//追記
hammerObject.transform.position = pos;//追記

こちらのコードは、以下のブログを参考にさせていただいたものですが、若干アレンジしています。

ここまでで、ハンマーの実装が完成しました。