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

プログラミング
この記事は約8分で読めます。
スポンサーリンク

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

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

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

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

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

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

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

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

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

ひろき
ひろき

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

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

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

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

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

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

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

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

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

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

手順③ハンマーの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を0にする→遷移するまでの時間を0にする
  • 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;//追記

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

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

まとめ:Triggerでアニメーション遷移をコントロールするところが大事!

ここまで、モグラ叩きのハンマーの動きをアニメーションを使ったり、スクリプトを書いたりして、実装しました。

重要なポイントとして、Animatorウィンドウで、Triggerを作成し、そのTriggerをスクリプトから発動させることで、クリック時にアニメーションを遷移させることができましたね。

Triggerを使うことで、クリック時だけではなく、スペースキーを押したときや、ボタンを押したときなど、様々な場面での応用が効きますのでぜひ参考にしてみてください。

コメント

  1. 【ASP登録と広告掲載のお願い】(株式会社レントラックス 惣蔵)

    子育てハック大全 運営者様

    お世話になります。コメント欄にて失礼いたします。
    レントラックスの惣蔵と申します。

    ★—-レントラックスとは?—————
    弊社は主に成果報酬型(アフィリエイト)の
    代理店広告を行っております。
    東証マザーズ上場企業でございます。
    弊社は一般的な公募はせず、クローズドASPでございます。

    弊社URL:https://www.rentracks.co.jp/
    ——————————————–★

    この度、貴サイトを拝見しまして、ぜひ弊社ASPにお力添えいただきたくご連絡させていただきました。

    貴サイト:子育てハック大全
    URL:https://defourunity.com/

    今後、アフィリエイトをご活用の際に弊社案件もご利用いただけないでしょうか。
    幅広いジャンルを取り扱っており、案件数は3,000案件程度ございますので、
    弊社ASPのご登録を検討いただけますと幸いです。

    「アカウント開設希望」の旨をご返信いただければ、
    スムーズにアカウント開設の案内をさせていただきます!

    また、下記にて一部案件を紹介させていただきます。
    もしよろしければ、合わせてご掲載をお願いできないでしょうか。

    ***************************************************************************************
    ■案件【オープン案件】

    子供向けオンラインプログラミング教室【ITeens Lab(アイティーンズラボ)】入会促進プロモーション
    ITeens Lab様
    https://iteenslab.com/
    新規体験会参加後、本入会完了
    7,040 円(税込)
    ***************************************************************************************
    ***************************************************************************************
    ■案件【オープン案件】

    日英バイリンガル講師による日本語フォロー可能なグループオンライン英会話「GLOBAL CROWN for Group」登録促進プロモーション
    株式会社ハグカム様
    https://group.global-crown.com/
    体験レッスン1回目受講完了
    3,080 円(税込)
    ***************************************************************************************
    ***************************************************************************************
    ■案件【オープン案件】

    タブレット学習+東大生らの個別フォローで一人一人にぴったりの学びを【RISU】契約促進プロモーション
    RISU Japan株式会社様
    https://www.risu-japan.com/lp/risu01.html
    契約完了
    5,500円(税込)
    ***************************************************************************************
    ※各案件の特徴はご登録後にご確認いただけます。

    上記案件が難しくても、他にも様々なジャンルの案件がございますので、ご希望のジャンルなど伺えたら幸いです!

    お忙しい中恐縮ですが、
    ご返信心よりお待ちしております。
    よろしくお願いいたします。

    —————————————————————
    株式会社レントラックス
    メディア事業本部 惣蔵 祐貴/ SOUKURA YUUKI
    東京都江戸川区西葛西5-2-3 NEXTAGE西葛西5F
    TEL:03-3878-4159 FAX:03-5696-0155
    MAIL:affagent09@rentracks.co.jp
    URL: https://www.rentracks.co.jp/
    —————————————————————

タイトルとURLをコピーしました