パズルゲーム　発展４

干支が消える際の演出エフェクトの追加する

　干支が消える瞬間にエフェクトを表示して、消えたことを演出する処理を追加します。
すぐに干支が消えてしまうよりも豪華な見た目になりますので、ユーザーを楽しませるためにも実装をしていきましょう。
　

完成動画
https://gyazo.com/513e969d8263ef41855d756bdcdb7fa9

　実装の手順です。

　１．無料のエフェクトアセットをインポートする
　２．EraseEffectプレファブ・ゲームオブジェクトを作成する
　３．EraseEffectゲームオブジェクトをプレファブ化する

　４．GameManagerスクリプトを修正する
　５．GameManagerゲームオブジェクトにEraseEffectプレファブ・ゲームオブジェクトをアサインする
　６．ゲームを実行して動作を確認する

１．無料のエフェクトアセットをインポートする

アセットストアへ移動する

　Unityのメニューから Window => Asset Store を選択します。AssetStoreビューがSceneビューの隣に作られます。
Search online ボタンを押してアセットストアのサイトへ移動してください。(2020.1バージョンからこのような形式に変更になりました)

AssetStoreビュー

アセットストアで無料のエフェクト用アセットを検索する

　アセットストアのサイト上部にある検索窓に free effect と入力して検索を行います。

検索

　Cartoon FX Free という無料のエフェクト用アセットが見つかりますので、こちらをクリックします。

Cartoon FX Free

　クリックするとアセットの詳細が画面に表示されますので、 Open in Unity という、青いボタンを押します。

　
　自動的にUnityのエディター画面に遷移します。これでアセットストアのサイトは閉じてしまって大丈夫です。

アセットをUnityにインポートする

　エディターのPackageManagerビューが開いて、対象のアセットが表示されますので、右下にある Download ボタンを押します。
Download が終了すると左隣にある Import というボタンが押せるようになりますので、そちらを押します。

PackageManagerビュー

　
　インポートするアセットの一覧がポップアップウインドウとして表示されますので、そのまま右下にある Import ボタンを押します。

Import確認のポップアップ

　待機するようにプログレス表示が出て、しばらくするとアセットのインポートが終了します。

　Project内を確認しましょう。JMO Assets という新しいフォルダが追加されていれば無事にインポートされています。
フォルダを順番に開いていくとたくさんのフォルダとファイルが追加されています。（画像の青い部分が今回インポートされたアセットです）

JMO Assets

　以上でアセットのインポート作業は終了です。

２．EraseEffectプレファブ・ゲームオブジェクトを作成する

エフェクトとして使用するゲームオブジェクトを決定し、プレファブを解除する

　インポートしたアセットにはたくさんのエフェクトがプレファブとして作成されています。（プレファブを生成すればすぐに利用が開始できる状態になっています。）

　今回は Assets / JMO Assets / Cartoon FX / CFX Prefabs / Misc / CFX_MagicPoof というプレファブ・ゲームオブジェクトを使用します。

　
使用するプレファブ・ゲームオブジェクトのパス

＜プレファブをアンパックする＞

CFX_MagicPoofゲームオブジェクト（プレファブ）

　まずはこのCFX_MagicPoofをヒエラルキー上のCanvas内にドラッグアンドドロップして配置します。(間違えずにCanvasのすぐ下に入れて下さい。)

　そして、このCFX_MagicPoofゲームオブジェクトの上で右クリックをしてメニューを表示し、 Prefab => Unpack Completely を選択してください。
このメニューを実行するとプレファブ状態が解除されて、CFX_MagicPoofゲームオブジェクトがプレファブではなく、通常のゲームオブジェクトに戻ります。
名前やアイコンの色が青ではなくなり、白くなります。

アンパック　動画
https://gyazo.com/759b0f5359da4bb2249b23df34ad45d8

　このようにしてプレファブをアンパックして利用することで、元であるCFX_MagicPoofゲームオブジェクトには影響がなくなります。(残り続けます)

　万が一、元の状態のゲームオブジェクトを利用したくなった場合や、パーティクルの編集に失敗してしまった場合には
CFX_MagicPoofゲームオブジェクトが残っていますので、再度これを利用して作り直すことが可能です。

EraseEffectゲームオブジェクトを編集する

　アンパックしたゲームオブジェクトの名前を EraseEffect に変更します。

　EraseEffect ゲームオブジェクトを選択してインスペクターを確認します。まずはTransformコンポーネントの Scale を変更します。
Scale ( 1 , 1, 1) の値を　( 140, 140, 140) へ変更してください。実際に生成される大きさになりますので、後で適宜に調整を行います。

Transformコンポーネント　インスペクター画像

　続いて、ParticleSystemコンポーネントを変更します。

ParticleSystem　インスペクター画像①

　StartColorという項目がありますので、その右端の下矢印の部分を選択してメニューを表示し、Random Between Two Gradients を選択します。
カラーが２つ表示されるようになりますので、上段の色の部分をクリックしてください。Gradient Editor という色を選択できるウインドウが開きます。

　Colorの部分を選択することで色の設定が可能です。グラデーションをかけることもできます。

StartColorの設定動画
https://gyazo.com/8a08b11498c8a5d7c4285928e38ea1f7

　その後、下の段の色も同じように設定します。上段のみでも大丈夫です。

　次にRenderer という部分を修正します。ParticleSystemの一番下にある項目です。こちらをクリック開いて下さい。画像のようになります。
（クリックする際には、Rendererの左横のチェックは外さないようにしてください。誤って外してしまった場合には、再度クリックすればチェックが入ります。）

ParticleSystem　インスペクター画像②

　項目の中に Order in Layer というプロパティがあります。この値が 0 になっていますので、 1 に変更します。

＜Canvas内にパーティクルを生成する場合の優先順位について＞

　この Order in Layer の値は、ゲーム画面に表示されるゲームオブジェクトの優先順位の値です。

　今回のパズルゲームはすべてCanvas内でゲームが進行していますので、必然的にゲームオブジェクトの優先順位の基準は、
Canvasゲームオブジェクトの持つCanvasコンポーネントの Order in Layer の値が基準値となります。

　現在、Canvasの Order in Layer の値が 0 になっているため、同じ数字の場合ですとCanvasが優先されます。
そのためこのままではEraseEffectゲームオブジェクトはCanvasより優先順位が低く、ゲーム画面に見えない状態になっています。

　そこで今回は、EraseEffectゲームオブジェクトのParticleSystemのRenderer内にある Order in Layer の値を 1 にすることで、
表示の優先順位をCanvasゲームオブジェクトよりも高くすることによって、ゲーム画面にEraseEffectゲームオブジェクトが見えるようにしています。

Canvas　参考画像

　
　ここまで完成したら、SceneビューにあるPlayボタンを押してみてください。エフェクトが再生されます。StartColorで設定した色も反映されているはずです。

Playした際の動画
https://gyazo.com/31182da4b18788cc072cbea04e0363eb

３．EraseEffectゲームオブジェクトをプレファブ化する

　ヒエラルキーにある EraseEffect ゲームオブジェクトを Project内のPrefabsフォルダへドラッグアンドドロップしてプレファブにします。
ヒエラルキー上のEraseEffectの色が青く変わればプレファブになっています。その後、ヒエラルキー上のEraseEffectは削除しておきます。
　
EraseEffectゲームオブジェクトをプレファブとして作成　
https://gyazo.com/d214c33622a71a006561bafbe82072b5

　以上でエフェクト用のEraseEffectゲームオブジェクトの設定は完了です。
ParticleSystemには今回設定していないたくさんの設定項目がありますので、機会をみて自分でいろいろと試してみてください。

４．GameManagerスクリプトを修正する

　GameManagerスクリプトを修正して、エフェクトを生成するためのプレファブのアサイン情報を変数を用意して登録できるようにします。
また干支を削除する処理を行う、OnEndDragメソッド内にエフェクトを生成する処理を追加します。

　どの部分に処理を追加すればよいのか、つまり、ゲーム的にどのタイミングでエフェクトが生成されれば
問題のない状態なるのかを考えて、まずは自分で処理の追加に挑戦してください。

GameManager.cs

　<=　クリックすると開きます。

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using DG.Tweening;

public class GameManager : MonoBehaviour
{
    // 今までの宣言フィールドはそのままなので省略


/////* ここから追加 *////


    [SerializeField, Header("干支の削除演出エフェクトのプレファブ")]
    private GameObject eraseEffectPrefab;


/////* ここまで追加 *////


    IEnumerator Start() {
　　　　// 変更なしのため省略
　　}

    private IEnumerator SetUpEtoTypes(int typeCount) {
        // 変更なしのため省略
    }

    private IEnumerator CreateEtos(int count) {
        // 変更なしのため省略
    }

　　void Update() {
	// 変更なしのため省略
    }

    private void OnStartDrag() {
　　　　// 変更なしのため省略
    }

    private void OnDragging() {
        // 変更なしのため省略
    }

　　/// <summary>
    /// 干支のドラッグをやめた（指を画面から離した）際の処理　　　　　　　　　　　　　// ☆　メソッド内に処理を追加する　☆
    /// </summary>
　　private void OnEndDrag() {
        // つながっている干支が３つ以上あったら削除する処理にうつる
	if (eraseEtoList.Count >= 3) {
		
            // 選択されている干支を消す
	    for (int i = 0; i < eraseEtoList.Count; i++) {
		// 干支リストから取り除く
		etoList.Remove(eraseEtoList[i]);


/////* ここから追加 *////


　　　　　　　　// 干支の削除演出エフェクト生成
		GameObject effect = Instantiate(eraseEffectPrefab, eraseEtoList[i].gameObject.transform);
		
　　　　　　　　// エフェクトの位置をEtoSetTran内に変更(干支の子オブジェクトのままだと、干支が破棄されると同時にエフェクトも破棄されてしまうため)
　　　　　　　　effect.transform.SetParent(etoSetTran);
	

/////* ここまで追加 *////
	
		
                // 干支を削除
		Destroy(eraseEtoList[i].gameObject);
	    }
        
	    // スコアと消した干支の数の加算
	    AddScores(currentEtoType, eraseEtoList.Count);

	    // 消した干支の数だけ新しい干支をランダムに生成
	    StartCoroutine(CreateEtos(eraseEtoList.Count));
	
 	    // 削除リストをクリアする
            eraseEtoList.Clear();	
	} else {
	    // つながっている干支が２つ以下なら、削除はしない

            // 削除リストから、削除候補であった干支を取り除く		
            for (int i = 0; i < eraseEtoList.Count; i++) {
				
                // 各干支の選択中の状態を解除する
		eraseEtoList[i].isSelected = false;

　              // 干支の色の透明度を元の透明度に戻す
		ChangeEtoAlpha(eraseEtoList[i], 1.0f);
	    }
        }
	
        // 次回の干支を消す処理のために、各変数の値をnullにする	
        firstSelectEto = null;
	lastSelectEto = null;
	currentEtoType = null;
    }

    private void AddEraseEtolList(Eto dragEto) {
        // 変更なしのため省略
    }

    private void RemoveEraseEtoList(Eto dragEto) {
        // 変更なしのため省略
    }

    private void ChangeEtoAlpha(Eto dragEto, float alphaValue) {
        // 変更なしため省略
    }

    private void AddScores(EtoType? etoType, int count) {
        // 変更なしため省略
    }

    private IEnumerator GameUp() {   
        // 変更なしため省略
    }

    private IEnumerator MoveResultPopUp() {
        // 変更なしため省略
    }
}

＜EraseEffectプレファブ・ゲームオブジェクトの生成の補足＞

　エフェクト用のゲームオブジェクトは、干支の位置に生成されています。この際、position ではなく、Transform 全体を利用して生成しています。
これはつまり、干支の子オブジェクトとして、エフェクト用のゲームオブジェクトを生成していることになります。

　そのため、エフェクトの生成位置は問題ありませんが、このままですと、
干支(親)が消えたと同時にエフェクト用のゲームオブジェクト(子)も一緒に消えてしまい、
エフェクトが途中で途切れてしまって不自然なエフェクトになってしまいます。

　そこでエフェクトを生成した次の行で、エフェクトの親オブジェクトをEtoSetTranへと変更しています。
こうすることで、エフェクト自体は、干支が破壊されたとしても、パーティクルの再生が正常に終了するまでゲーム内に残ることができます。

　ゲームオブジェクト間の親子関係は便利な反面、不都合になる動作も引き起こします。
今回の場合も同様で、干支とエフェクトが親子関係のままになっていると、エフェクトを生成する際には問題ありませんが、
干支が破壊されると子オブジェクトであるエフェクトも一緒に破壊されてしまうため、これを回避する処理が必要になっており、
そのため、エフェクトを生成後には親子関係を EtoSetTran に変更しています。

　もしも想定している通りに処理が動かない場合には、こういった親子関係によるものが原因のケースもありますので覚えておいてください。

　なお、本来であれば生成したエフェクト用のゲームオブジェクトはDestroyしなければなりません。

　ですが今回利用しているEraseEffectゲームオブジェクトの元であるプレファブ・ゲームオブジェクトには
パーティクルの再生が終了したらDestroyするというスクリプトが最初からアタッチされています。
そのため今回のケースでは、エフェクトをDestroyする処理は追加していません。

５．GameManagerゲームオブジェクトにEraseEffectプレファブ・ゲームオブジェクトをアサインする

　GameManagerスクリプトの修正が終了したら、GameManagerゲームオブジェクトのインスペクターを確認します。

GameManagerゲームオブジェクト　インスペクター画像

　アサイン情報としてEraseEffectプレファブ・ゲームオブジェクトをアサインできるようになっていますので
Project内のPrefabsフォルダにある EraseEffectプレファブ・ゲームオブジェクトをドラッグアンドドロップしてアサインします。

EraseEffectプレファブのアサイン動画
https://gyazo.com/b66b8d6979a86359656eea5ca04ee035

６．ゲームを実行して動作を確認する

　以上で完成です。ゲームを実行して動作を確認します。干支をつなげて消した際に各干支の位置にEraseEffectプレファブ・ゲームオブジェクトが生成されれば成功です。

検証動画
https://gyazo.com/757e9613170b1e1283973dd5280a5f2f

　もしもエフェクトの生成されなかったり、生成はされているものの画面に見えなかったりする場合には、もう一度、手順を読み直してみて設定を確認してみてください。

　以上でこの手順は終了です。

　次は 発展５ です。

このページを編集するこのページを元に新規ページを作成

印刷する

コメント（0）

パズルゲーム　発展４ - i-school 先頭へ

コメントをかく

名前	ユーザIDを使用しないで書き込む	ユーザーIDを使う	ログインする
画像コード	画像に記載されている文字を下のフォームに入力してください。
備考	「http://」を含む投稿は禁止されています。
本文
利用規約をご確認のうえご記入下さい

i-school