３Ｄダイビングゲーム　手順１９

　この手順より、ゲームの演出について制御処理を実装していきます。

　まずは最初に、花輪をくぐった際の演出を２つの工程に分けて順番に実装を行います。

＜完成動画＞
https://gyazo.com/b1771b5fb7ecf41a191064566aa84e66

　以下の内容で順番に実装を進めていきます。

手順１９　－花輪をくぐった際の演出を実装ー

３０．花輪を通過した際に花輪をキャラの中心に集める演出を追加する
３１．花輪がキャラの中心に集まったら獲得用のエフェクトを生成する

　新しい学習内容は、以下の通りです。

　・Collider.enabled 変数 
　・transform.SetParent メソッド
　・DOTweenの補間機能と実装例④　ーSequence処理、DOScaleメソッド、DOLocalMoveメソッドー

３０．花輪を通過した際に花輪をキャラの中心に集める演出を追加する

１．設計

　キャラが花輪をくぐった際の演出を考えていきます。
色々なものが考えられると思いますので、ここでの実装はその一例として考えてください。
また自分でよい演出をおもいついたら、これらの演出ではなく、自分で考えた演出を実装するためのロジックを考えて実装してみてください。
　
　ここでは２つの方法で演出を行います。

　まずはキャラが花輪をくぐったら、花輪がキャラの中心に向かって集まってくる演出です。
そちらの実装が完成したら、中央に集まったあとに、花輪をくぐったことを知らせる光の演出を追加します。

　この手順では、花輪がキャラの中心に集まる方法を考えていきます。

　花輪の中央部分にはコライダーが設置してあり、キャラはその中であればどの部分を通過してもくぐったことになります。
そのため花輪の方だけで集まる位置を決定することはできません。その都度、キャラがどの地点を通過するか分からないためです。

　こういう場合にも親子関係を利用します。
親子の関係はヒエラルキー上でゲーム開始前に設定する以外に、スクリプトから動的に変更して、親子関係を構築したり、解除することが出来ます。

　花輪を通過したら、花輪をキャラの子オブジェクトになるように親子関係を作ります。ヒエラルキーではこのような状態になります。

ヒエラルキーの状態（ゲーム実行中に、この状態になるように制御する）

　こうすることにより、花輪の座標情報は、ワールド座標ではなく、ローカル座標、つまり、キャラからみてどの位置にいる、という情報に置き換わります。
このローカル座標の情報を元にすることで、花輪をキャラの中心へ移動させる、という処理が実装出来ます。

Penguin ゲームオブジェクトの位置

FlowerCircle ゲームオブジェクトのワールド座標の位置（通常）

FlowerCircle ゲームオブジェクトのローカル座標の位置（親オブジェクトである、Penguin ゲームオブジェクトから見てどの位置にいるかを表している）

　実際にどのような処理が制御されているか、ヒエラルキーとインスペクターを見ながら確認します。

＜実装動画　ローカル座標に置き換えてから集める処理を行う＞
https://gyazo.com/0ade58db4d88c4ecabc8cac006507e38

　ここではこの親子関係を構築して、花輪をキャラの中心に移動させる、というロジックを実装します。
花輪をキャラの中心に移動させるには、DOTweenの処理の１つである、DOLocalMoveメソッドを利用します。
この時に移動させる座標を (0, 0, 0)に設定すれば、親オブジェクトであるキャラの中心に花輪が移動します。

２．FlowerCircle スクリプトを修正する

　宣言フィールドには、花輪をくぐった際の重複判定防止用にコライダーをオフにする操作を実装したいので、花輪にアタッチされている BoxCollider 型の変数を宣言します。
SerializeField属性で宣言しておくことで、インスペクターからアサインして代入することが出来ます。

　新しくメソッドを２つ追加します。１つは OnTriggerEnter メソッドで、花輪のコライダーに別のゲームオブジェクトが侵入したかどうかを判定します。
侵入する対象は Penguin ゲームオブジェクトしかないため、if 文による Tag などの制御は必要ありません。
侵入した判定が発生すると、それは Penguin ゲームオブジェクトが侵入したものとして扱って問題ないからです。

　この判定内でキャラと花輪を親子関係にします。その後、DOTweenの処理を利用して、花輪の大きさを小さくしつつ、キャラの中心へと移動させます。
このように１つの処理に複数の DOTweenの処理を同時に実行したい場合に備えて、DOTween には Sequence(シーケンス)という機能があります。

　Sequence の宣言を行い、所定の記述を行うことによって、DOTween 処理を１つずつ順番に制御したり、同時に複数の処理を実行することが実現できます。

FlowerCircle.cs

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

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

public class FlowerCircle : MonoBehaviour
{
    [Header("花輪通過時の得点")]
    public int point;


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


    [SerializeField]
    private BoxCollider boxCollider;


////* ここまで *////


    void Start() {

        // アタッチしたゲームオブジェクト(花輪)を回転させる
        transform.DORotate(new Vector3(0, 360, 0), 5.0f, RotateMode.FastBeyond360).SetEase(Ease.Linear).SetLoops(-1, LoopType.Restart);
    }


////* ここからメソッドを２つ追加 *////


    // 花輪からみて、他のゲームオブジェクトが花輪に侵入した場合
    private void OnTriggerEnter(Collider other) {

        // 花輪の BoxCollider のスイッチをオフにして重複判定を防止
        boxCollider.enabled = false;

        // 花輪をキャラの子オブジェクトにする
        transform.SetParent(other.transform);

        // 花輪をくぐった際の演出
        PlayGetEffect();        
    }


    /// <summary>
    /// 花輪をくぐった際の演出
    /// </summary>
    private void PlayGetEffect() {

        // DOTween の Sequence を宣言して利用できるようにする
        Sequence sequence = DOTween.Sequence();

        // Append を実行すると、引数でDOTweenの処理を実行できる。花輪の Scale を 1秒かけて 0 にして見えなくする
        sequence.Append(transform.DOScale(Vector3.zero, 1.0f));

　　　　// Join を実行することで、Append と一緒にDOTweenの処理を行える。花輪の Scale が1秒かけて 0 になるのと一緒に、プレイヤーの位置に花輪を移動させる
        sequence.Join(transform.DOLocalMove(Vector3.zero, 1.0f));

        // 花輪を1秒後に破棄
        Destroy(gameObject, 1.0f);
    }


////* ここまで *////

}

　スクリプトの修正が終了したら、ヒエラルキーにある FlowerCircle ゲームオブジェクトのインスペクターを確認します。
新しく追加した boxCollider 変数が追加されているか確認してください。

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

３．＜Collider.enabled 変数＞

　コライダーのオン・オフを切り替える変数です。
インスペクターのコンポーネント名の左側にあるスイッチを切り替えることで、コンポーネントのオン・オフを切り替えることが出来ます。
この処理をスクリプトから実行するための変数です。

　コライダーに限らず、コンポーネントであればすべてこの命令でオン・オフを切り替えることが出来ます。
true がオン、false がオフの状態に切り替わります。

  // 花輪の BoxCollider のスイッチをオフにして重複判定を防止
  boxCollider.enabled = false;

＜検証動画　ゲーム中でスイッチがオフになる制御＞
https://gyazo.com/8bad532e477a669448e8358373bac99a

参考サイト

Unity公式スクリプトリファレンス
BoxCollider
https://docs.unity3d.com/ja/current/ScriptReferenc...

Quita @OKsaiyowa 様
【Unity(C#)】コンポーネントのON・OFF(enable)とゲームオブジェクトの表示・非表示の切り替え(SetActive)
https://qiita.com/OKsaiyowa/items/9579ac348ac860cd...

４．＜Transform.SetParent メソッド＞

　Transform コンポーネントは、オブジェクトの親子関係の情報を管理しています。
SetParent メソッドを実行することにより、実行した Transform を持つゲームオブジェクトを
引数に指定した Transform を持つゲームオブジェクトの子オブジェクトにすることが出来ます。

  // 花輪をキャラの子オブジェクトにする
  transform.SetParent(other.transform);

　上記の命令の場合、このスクリプト(FlowerCircle)がアタッチされているゲームオブジェクトの Transform クラスの SetParent メソッドを実行し、
FlowerCircle ゲームオブジェクトを、other.transform のゲームオブジェクトの子オブジェクトにしています。

　other.transform のゲームオブジェクトとは、Penguin ゲームオブジェクトのことですので、
この処理を実行するこということは、花輪のゲームオブジェクトをキャラの子オブジェクトにする、という処理になります。

＜検証動画　親子関係を設定する＞
https://gyazo.com/4471d0488a0be9057ce5b7261a871ecc

＜親子関係になった際のヒエラルキー画像＞

５．＜DOTweenの補間機能と実装例④　ーSequence処理、DOScaleメソッド、DOLocalMoveメソッドー＞

　今回利用しているメソッドについて説明します。

Sequence(シーケンス)処理

　DoTweenによる補間処理をSequenceを利用して実装しています。
Sequenceを利用することで、DoTweenの処理を自分の組み立てた順番通り、あるいは同時に実行することができます。
　
　Sequenceを利用するためには、宣言をして初期化する必要があります。

  // DOTween の Sequence を宣言して利用できるようにする
  Sequence sequence = DOTween.Sequence();

　Sequenceには様々なメソッドがありますが、今回利用しているメソッドを説明します。

　Append()　

　　　アペンドと読みます。引数に指定した処理を行います。次にあるメソッドがSequenceのAppendメソッドである場合、この処理が終了するまで次のAppendメソッドは動きません。

　Join()　

　　　ジョインと読みます。Appendメソッドと一緒に用いられます。Appendメソッドの次のメソッドがJoinメソッドである場合
　　このJoinメソッドの引数にしている処理はAppendメソッドと同時に処理されます。複数のJoinを続けて書いた場合、最初のAppendメソッドと同時に処理されます。

　多くの方がわかりやすい記事を書かれていますので参考にしてください。

@kagigi様
DOTweenをふわっとまとめてみた
https://qiita.com/kagigi/items/bdf4d42835add07b007...

アマガミナブログ様
DOTweenの使い方 Tweenアニメーション入門【Unity】
https://amagamina.jp/how-to-dotween/

２．DOScale(Vector3 endValue, float duration)

　DOScaleメソッドは、ゲームオブジェクトの Scale（大きさ）を、指定した大きさに変更する処理です。
大きさを変更する時に補間処理を行うことで、アニメーションしているように見せてくれます。

　このメソッドは処理を行いたいゲームオブジェクトの、transfromに対して実行します。
ここではこのスクリプトがアタッチされている、花輪のゲームオブジェクトの大きさを変更させたいので
このゲームオブジェクトのTransform コンポーネントが代入されている transform 変数に対して処理を行うようにしています。

  // Append を実行すると、引数でDOTweenの処理を実行できる。花輪の Scale を 1秒かけて 0 にして見えなくする
  sequence.Append(transform.DOScale(Vector3.zero, 1.0f));

　transform.DOScale()の第１引数はVector3型で、最終的に設定したい Scale、大きさを指定します。
Vector3.zero ですので、すべて (0, 0, 0) を指定しています。Scale が 0 になったゲームオブジェクトは非表示と同じ状態になります。

　第２引数はfloat型で、大きさを変更するまでにかかる時間を指定します。今回は 1.0f と実数（変数指定も可能）を指定しているので
1.0 秒かけてこのスクリプトがアタッチされているゲームオブジェクトの大きさを現在の大きさから (0, 0, 0) に変更する、という命令になります。

　この処理によって、花輪が徐々に小さくなっていく演出をしています。

３．DOLocalMove(Vector3 endValue, float duration)

　DOLocalMove メソッドは、ゲームオブジェクトの位置を指定して移動させる処理です。
移動時に補間処理を行うことでアニメーションしているように見せてくれます。

　このメソッドは処理を行いたいゲームオブジェクトの、transfromに対して実行します。ここではこのスクリプトがアタッチされているゲームオブジェクトを移動させる命令を行いたいので
このゲームオブジェクトのTransform コンポーネントが代入されている transform 変数に対して処理を行うようにしています。

  // Join を実行することで、Append と一緒にDOTweenの処理を行える。花輪の Scale が1秒かけて 0 になるのと一緒に、プレイヤーの位置に花輪を移動させる
  sequence.Join(transform.DOLocalMove(Vector3.zero, 1.0f));

　transform.DOLocalMove()の第１引数は Vector3 型で、移動させる位置を指定します。
この処理では、花輪をキャラの中心に移動させたので Vector3.zero、すなわち (0, 0, 0) を指定しています。

　第２引数はfloat型で、移動する際にかかる時間を指定します。今回は 1.0f と実数（変数指定も可能）を指定しているので
1.0 秒かけてこのスクリプトがアタッチされているゲームオブジェクトのローカル座標の位置を 0 の位置まで移動をさせる = キャラの中心に移動させるという命令になります。

　Join メソッドで実行していますので、上記の Append メソッドと同時に実行されますので、
ゲーム画面では、花輪が小さくなりながらキャラの中心に集まる、つまり、花輪を獲得している演出になります。

６．FlowerCircle ゲームオブジェクトの FlowerCircle スクリプトのアサイン情報に、BoxCollider がアタッチされているゲームオブジェクトをドラッグアンドドロップして登録する

　制御したい BoxCollider コンポーネントは、FlowerCircle ゲームオブジェクトの子オブジェクトである Collider ゲームオブジェクトにアタッチされていますので
Collider ゲームオブジェクトをドラッグアンドドロップしてアサインしてください。

FlowerCircle ゲームオブジェクト　アサイン後のインスペクター画像

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

　設定が完了しましたので、ゲームを実行して、キャラに花輪を通過させてみてください。
花輪がキャラの中心に集まれば制御成功です。

＜実行動画＞
https://gyazo.com/e8d2c43eed7d19caa8fac6944a49ec4d

　続けて、花輪がキャラに集まったタイミングで、獲得エフェクトを生成する演出を実装します。

３１．花輪がキャラの中心に集まったら獲得用のエフェクトを生成する

１．設計

　花輪がキャラの中心に集まる制御処理が実装できましたので、続いては、獲得時のエフェクトを再生する演出を実装します。
事前にプレファブでエフェクト用のゲームオブジェクトを用意しておいて、そちらを FlowerCircle スクリプトに変数を用意して登録しておきます。
キャラの中心に花輪が集まってから、このエフェクト用のゲームオブジェクトをインスタンスして、エフェクトを再生します。

　ParticleSystem コンポーネントの Play On Awake にチェックが入っていると、ゲームオブジェクトが生成されると同時にパーティクルが再生されます。
それを利用しています。

　またキャラの中心に花輪が集まってからという制御はコルーチンメソッドの中断処理を利用し、
花輪が集まる処理が終了してから獲得エフェクトを生成する制御を行っています。

２．獲得エフェクトをインポートする

　すでにインポートさせているアセットから、獲得用のエフェクトを選んでいただくか、下記の無料エフェクトサイトより
ダウンロードしてインポートしてください。

ktkkumamoto 様/UnityEffectSample
https://github.com/ktkkumamoto/UnityEffectSample

　サイト内のフォルダを選択すると対象のエフェクトの UnityPackage が表示されますので、好きなものを選択して Download ボタンでダウンロードできます。
今回は Heal1/Heal1.unitypackage ファイルを利用しています。

＜サイト１　フォルダ選択＞

＜サイト２　パッケージ選択＞

＜サイト３　右下のボタンでダウンロード＞

　ダウンロードした UnityPackageを Unity内の Projectにドラッグアンドドロップしてください。インポート用のウインドウが開いてインポートできます。
誤ってダブルクリックしたり、直接開いてしまうと、新しい Unity のプロジェクトが立ち上がりますので、その場合にはそのプロジェクトは閉じてください。

＜手順動画　ダウンロードした UnityPackage を Unity にドラッグアンドドロップしてインポートする＞
https://gyazo.com/9e48c88a104cbd05997218db33c5c3f0

３．FlowerCircle スクリプトを修正する

　宣言フィールドには、花輪をくぐって獲得した際のエフェクトを登録するための GameObject 型の変数を宣言します。
SerializeField属性で宣言して、プレファブをアサインできるようにしておきます。

　先ほど追加した PlayGetEffect メソッド内に処理を追加します。また、このメソッドをコルーチンメソッドに変更します。
メソッドの呼び出し命令もコルーチンメソッド用の命令に変更するのを忘れないようにしてください。

　コルーチンメソッドでは中断処理が実装できます。そのため、花輪がキャラの中心に集まるまで待ってから獲得エフェクトを再生する、という制御が可能になります。

FlowerCircle.cs

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

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

public class FlowerCircle : MonoBehaviour
{
    [Header("花輪通過時の得点")]
    public int point;

    [SerializeField]
    private BoxCollider boxCollider;


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


    [SerializeField]
    private GameObject effectPrefab;


////* ここまで *////


    void Start() {

        // アタッチしたゲームオブジェクト(花輪)を回転させる
        transform.DORotate(new Vector3(0, 360, 0), 5.0f, RotateMode.FastBeyond360).SetEase(Ease.Linear).SetLoops(-1, LoopType.Restart);
    }


    // 花輪からみて、他のゲームオブジェクトが花輪に侵入した場合
    private void OnTriggerEnter(Collider other) {

        // 花輪の BoxCollider のスイッチをオフにして重複判定を防止
        boxCollider.enabled = false;

        // 花輪をキャラの子オブジェクトにする
        transform.SetParent(other.transform);


////* ここから修正 *////


        // 花輪をくぐった際の演出
        StartCoroutine(PlayGetEffect());      //　<=　☆　コルーチンメソッドの呼び出し命令に変更する
　

////* ここまで *////

    }


    /// <summary>
    /// 花輪をくぐった際の演出
    /// </summary>
    private IEnumerator PlayGetEffect() {　　　//　<=　☆　戻り値を void から IEnumerator に変更して、コルーチンメソッドに変更する

        // DOTween の Sequence を宣言して利用できるようにする
        Sequence sequence = DOTween.Sequence();

        // Append を実行すると、引数でDOTweenの処理を実行できる。花輪の Scale を 1秒かけて 0 にして見えなくする
        sequence.Append(transform.DOScale(Vector3.zero, 1.0f));

　　　　// Join を実行することで、Append と一緒にDOTweenの処理を行える。花輪の Scale が1秒かけて 0 になるのと一緒に、プレイヤーの位置に花輪を移動させる
        sequence.Join(transform.DOLocalMove(Vector3.zero, 1.0f));


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


　　　　// 1秒処理を中断(待機する)
　　　　yield return new WaitForSeconds(1.0f);

        // エフェクトを生成して、Instantiate メソッドの戻り値を effect 変数に代入
        GameObject effect = Instantiate(effectPrefab, transform.position, Quaternion.identity);

　　　　// エフェクトの位置(高さ)を調整する　<=　☆　この高さの調整が必要な理由はなんだと思いますか？　一度、この処理をコメントアウトして、どのような違いが出るか確認してください。
        effect.transform.position = new Vector3(effect.transform.position.x, effect.transform.position.y -1.5f, effect.transform.position.z);

　　　　// 1秒後にエフェクトを破棄(すぐに破棄するとエフェクトがすべて再生されないため)
        Destroy(effect, 1.0f);


////* ここまで *////


        // 花輪を1秒後に破棄
        Destroy(gameObject, 1.0f);

    }
}

　スクリプトの修正が終了したら、ヒエラルキーにある FlowerCircle ゲームオブジェクトのインスペクターを確認します。
新しく追加した effectPrefab 変数が追加されているか確認してください。

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

４．FlowerCircle ゲームオブジェクトの FlowerCircle スクリプトのアサイン情報にエフェクト用のゲームオブジェクトのプレファブをアサインして登録する

　effectPrefab 変数に GameObject 型の情報をドラッグアンドドロップしてアサインします。
使用する予定のプレファブ・ゲームオブジェクトをドラッグアンドドロップしてアサインしてください。

参考(使用するプレファブのフォルダ。各々のプレファブを選択する)

FlowerCircle ゲームオブジェクト　アサイン後のインスペクター画像

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

　エフェクトが発生しているかわかりやすくするために、各ゲームオブジェクトの高さを調整します。

Penguin ゲームオブジェクトの高さを 30 に変更し、Main Camera ゲームオブジェクトの高さを 34 に変更します。

その後、FlowerCircle ゲームオブジェクトの高さを 20 に変更します。それからゲームを実行して確認します。

＜実行動画＞
https://gyazo.com/b1771b5fb7ecf41a191064566aa84e66

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

　=>　次は　手順２０　－姿勢変更ゲージの演出を追加－　です。

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

印刷する

コメント（0）

３Ｄダイビングゲーム　手順１９ - i-school 先頭へ

コメントをかく

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

i-school