今回は、モグラ叩きゲームで、ハンマーでモグラを叩き、モグラがダメージを受ける実装を行います。
さらに、モグラをプレハブ化するところまでやってきます。
本当は、プレハブ化したオブジェクトをインスタンシエイトして、出現させたいにモグラを自由に発生させるところまでやっていきたいですが、長くなるので次の記事vol.9で解説していきます。
今回は、ゴリゴリのコードを書いていきますので、難しくなりますよ。
それでは、頑張っていきましょう。
Table of Contents
事前準備:ダメージを受けるモグラの画像を3つ作りましょう
あらかじめUnityエディタに入れておいたモグラの画像がありますよね?
それを自分で手を加えて、あたかもダメージを受けたモグラに作る必要があります。
これは、ご自分でなんとか作ってみてください。
ペイントやCanvaなど、なんでも構いませんので、上の画像のように星が1個、2個、3個のダメージモグラの作成をお願いします。
作成したら、Unityエディタに入れておきます。
手順①ダメージアニメーションを作る
ヒエラルキーのモグラオブジェクトを選択した上で、アニメーションウィンドウのfloat@moguraを選択します。
そして、Create New Clipで新しいアニメーションを作ります。
ダメージ用のアニメーションを作ります。(名前は任意です。)
事前準備で作成していただいた3つのモグラの画像をアニメーションウィンドウにドラック&ドロップします。
ドラック&ドロップしやすいように、画面下にあったアニメーションウィンドウをゲームウィンドウと同じタブに持ってきてください。
アニメーションウィンドウを下のタブに戻して、ダメージモグラの画像をキーフレームを調整してください。(参考は、上動画)
手順②アニメーションクリップ同士を繋げる
引き続き、モグラオブジェクトを選択した上で、アニメーターウィンドウを開いておきます。
アニメーターウィンドウには、もともとfloat@moguraがあるので、そこに新しく作ったアニメーションクリップをドラック&ドロップしましょう。
アニメーターウィンドウが見当たらない場合は、Gameを右クリック→Add Tab→Animatorで出てきます。
ダメージアニメーションクリップを右クリックして、Make Transitionを選びます。
そして、2つのアニメーションをお互いに繋ぎましょう。
なお、float@moguraを右クリックすれば、ダメージアニメーションクリップへの遷移を作れます。
次に、パラメータを作ります。
どんな条件が起きれば、アニメーションが切り替わるのかをその指標をアニメーターで作っておく必要があります。
今回は、Triggerを選び、名前は「Hurt」と任意の名前をつけましょう。
そして、アニメーションの遷移の微調整を行います。
Damage@Mogura→float@moguraに遷移するときは、上記のように。
float@mogura→Damage@Moguraに遷移するときは、下記のように設定してください。
なお、遷移条件はConditionsで設定できます。
手順③MoguraManager.csを作る
それでは、モグラのアニメーション遷移をスクリプトの方から設定していきましょう。
以下のコードを打ち込むか、コピペしてください。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class MoguraManager : MonoBehaviour
{
//モグラのコライダーを宣言 当たり判定に使う
Collider2D moguraCollider;
//アニメーターを宣言 アニメーション関係の関数実行に使う
Animator animator;
//オーディオソースを宣言
AudioSource audioSource;
public AudioClip pikopikoSE;
// Start is called before the first frame update
void Start()
{
audioSource = GetComponent<AudioSource>();
animator = GetComponent<Animator>();
moguraCollider = GetComponent<Collider2D>();
HideColliderMogura();
}
// Update is called once per frame
void Update()
{
transform.position -= new Vector3(0,0.1f,0);
}
//アニメーションイベントで使用(手順⑤で解説)
public void HideColliderMogura()
{
moguraCollider.enabled = false;
Debug.Log("モグラコライダーが消えた");
}
//アニメーションイベントで使用(手順⑤で解説)
public void ShowColliderMogura()
{
moguraCollider.enabled = true;
Debug.Log("モグラコライダーがついた");
}
//
private void OnTriggerEnter2D(Collider2D collision)
{
//次やること、攻撃を受けたら、得点が追加される
//Hurtと名付けたパラメータがここで活きる
animator.SetTrigger("Hurt");
audioSource.PlayOneShot(pikopikoSE);
HideColliderMogura();
StartCoroutine(Damage());
}
//ダメージを受ける時の関数
IEnumerator Damage()
{
yield return new WaitForSeconds(0.5f);
animator.enabled = false;
yield return new WaitForSeconds(1.0f);
animator.enabled = true;
animator.Play("float@mogura");
}
}
上記のスクリプトを作成したら、下記のようにモグラオブジェクトにアタッチしてください。
モグラがダメージを受けた時の効果音も設定しているので、インスペクターから設定してください。
効果音は、効果音ラボなどから好きな音源を取得して、Unityエディタに取り入れておいてください。
コードで記載した内容を実行するには、モグラオブジェクトに必要なコンポーネントを追加しておく必要があります。
上記のように、AnimatorやAudio Source、Capsule Collider 2Dなどを追加しておきましょう。
ちなみに、Capsule Collider 2Dは当たり判定に必要なコンポーネントで、大きさと位置は上記のように調整しておいてください。
手順④HammerManager.csに追記する
次に、ハンマーオブジェクトにアタッチされているHammerManager.csにコードを追加します。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class HammerManager : MonoBehaviour
{
//Animator animator;
public GameObject hammerObject;
Collider2D hammerCollider;
Animator animator;
public GameManager gameManager;
// Start is called before the first frame update
void Start()
{
animator = GetComponent<Animator>();
hammerCollider = GetComponent<Collider2D>();
HideColliderHammer();
}
// Update is called once per frame
void Update()
{
if (gameManager.resultPanal.activeSelf == false)
{
ShowHammer();
if (Input.GetMouseButtonDown(0))
{
Debug.Log("入力されてる");
animator.SetTrigger("Move0");
}
}
}
void ShowHammer()
{
var mousePosition = Input.mousePosition;
mousePosition.z = 10;
var pos = Camera.main.ScreenToWorldPoint(mousePosition);
hammerObject.transform.position = pos;
}
//アニメーションイベントで使用(手順⑤で解説)
public void HideColliderHammer()
{
hammerCollider.enabled = false;
Debug.Log("ハンマーコライダーが消えた");
}
//アニメーションイベントで使用(手順⑤で解説)
public void ShowColliderHammer()
{
hammerCollider.enabled = true;
Debug.Log("ハンマーコライダーがついた");
}
}
上記のコードを参考に、追記箇所だけ確認するか、全部コピペしてください。
なお、当たり判定を実行する時には、当てる方と当てられる方のどちらか一方にRigidBody2Dをつける必要があります。
今回は、ハンマーオブジェクトにRigidBody2Dコンポーネントを追加しておきます。
下記にように、入れておいてください。
また、コライダーも追加しておくと良いでしょう。
手順⑤アニメーションイベントで関数を実行する
実は、手順④まで作業を進めることができれば、クリックしてハンマーのアニメーションを実行され、モグラが叩かれるアニメーション遷移が起こるはずです。
しかし、必要な時だけコライダーを表示して当たり判定を発生させるようにしなければ、意図しないところで当たり判定が頻発してしまいます。
そこで、アニメーションイベント機能を使って、コライダーを自由に表示と非表示にしましょう。
まずは、ハンマーから設定します。
アニメーションウィンドウの小さなプラスマークを押します。
すると、白い縦棒が出ますので、上記のようなコライダーを表示したいタイミングにフレームを調整してください。
そして、キーフレームを選択すると、インスペクターに関数を設定できるようになるので、スクリプトで作った関数を設定してください。
今度は、コライダーを非表示にするタイミングまでキーフレームをもう一度作って移動させます。
そして、同じようにインスペクターで該当する関数を設定しましょう。
モグラオブジェクトも同じように、コライダーを表示する関数を設定してください。
こちらも同様にお願いします。
手順⑥モグラオブジェクトをプレハブ化する
現在は、モグラが一つ穴からしか出ていないです。
実は、このモグラオブジェクトをコピーして、他のMoguraSpotの子要素に設定すれば、モグラの上下するアニメーションは完成します。
しかし、3つのモグラが一斉に上下する奇妙なモグラ叩きになってしまうので、バラバラのタイミングでモグラが出てくるようにしたいですよね。
だからこそ、コードで設定する必要があるのです。
その最初のステップとして、上記のようにプレハブ化をしてください。
まとめ:プレハブ化までできたら次の記事にも挑戦しましょう
プレハブ化したモグラをランダム生成して、得点を追加していきたいのですが、記事が長くなりすぎるので、一旦終了とします。
次の記事までいくと、ゲームがほとんど完成になりますので、ぜひ頑張ってください。
ちなみに、Has Exit TimeやExit Timeとかいまいちよくわからないという方は、前回の記事をご覧ください。