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

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

手順９　－DOTweenによる補間処理の実装－

１３．DOTweenをインポートして設定する
１４．スクリプトを使って、キャラを水面に浮かび上がらせる

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

　・コルーチン処理とStartCoroutineメソッド
　・DOTweenの補間機能と実装例①　ーDOMoveYメソッドー
　・Summary（サマリー）機能

１３．DOTweenをインポートして設定する

　DOTweenはUnityのアセットストアにて無償で公開されている、Tween系(アニメ用)アセットです。
アセットストアにサインインして、検索でDOTweenと入力すれば見つかります。Pro版（有償）もありますが、無償版で問題ありません。

直接のリンクアドレスはこちらです。
https://assetstore.unity.com/packages/tools/animat...

　ダウンロードしてUnityにインポートしてください。インポート設定はそのままで問題ありません。
インポートされるとProject内にDemigiantというフォルダが追加されます。こちらがDOTweenアセットのフォルダになります。

Demigiant/DOTween

　インポート後、DOTween Utility Panelという、DOTweenの設定用のポップアップウインドウが自動的に開きますので、Setup DOTweenボタンを押して実行しましょう。
もしも自動で開かない場合には、Unityの左上のメニューより Tools => Demigiant => DOTween Utility Panel を選択すればウインドウを開くことが出来ます。

　準備用のポップアップがさらに開いて、準備が完了するとApplyボタンが押せるようになります。

　これでDOTweenの準備が完了し、Unityで利用できるようになりました。先ほどのDOTween Utility Panel ウインドウは閉じてしまって問題ありません。

　なおDOTweenには様々な機能がありますが、今回の製作ではその一部を利用していきます。
詳しい説明は公式リファレンス、あるいは多くの使用方法の紹介記事がありますので、ご自分で調べてみてください。

公式サイトのリンク（ドキュメント）
http://dotween.demigiant.com/documentation.php

　以上でこの手順は完了です。早速次の手順でDOTweenを利用します。

１４．スクリプトを使って、キャラを水面に浮かび上がらせる

１．設計

　キャラの着水処理は完成しました。そのまま沈んでいてはかわいそうですので、しばらくしたら、水面に顔を出すように制御を行いましょう。

　キャラの制御は PlayerController スクリプトを通じて行うことができますので、ここでは、そのスクリプトを利用して
キャラの移動を制御して、水底にいるキャラを水面まで移動させるようにします。

　また、合わせて、落下が始まる際に、キャラを飛び込みの姿勢に変更します。
X 軸を回転させて頭が下（水面）方向になるように、こちらもスクリプトから制御を行います。

　全部で以下のような処理の流れになります。こちらを PlayerController スクリプトに実装していきます。

　落下する際にキャラの姿勢を変更する(頭から水面方向に落下するようにする)
　　　↓
　キャラが着水してそのまま水底に沈む
　　　↓
　少し待つ（コルーチン処理で実装）
　　　↓
　キャラの姿勢を変更する(頭を水面方向に向ける)
　　　↓
　水中から徐々に水面にキャラを登場させる(DOTweenで実装)

　どの処理がその部分に当たるか、考えながら実装を行ってください。
コメントもただ付けるだけではなくて、処理の内容をイメージしながら書くようにしましょう。
そうすることで、ゲーム内での処理の内容を記述出来るようになってきます。

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

　宣言フィールドには、姿勢の変更用の変数を１つ追加します。Start メソッド内でこの値を利用して、キャラの姿勢を変更します。

　新しく OutOfWater メソッドを作成します。こちらはコルーチンメソッドとなっており、遅延処理が行えるようにしています。
遅延処理は、水中に沈んで少し経ってからキャラを移動させたいための待機時間を実装するために利用しています。
こちらのメソッド内に、DOTweenを利用したアニメーション処理を利用して、水中から徐々に水面に顔を出す移動の処理を実装します。
キャラを移動させる際ですが、重力による影響を受けているため、顔を水面に出しても、再度、水の中にもぐってしまいます。
重力の影響を止める、あるいは物理演算を停止する処理を実装することで、この影響から逃れることが出来ます。Unityの教科書も復習してみましょう。

　OnTriggerEnter メソッド内に処理を追加して、着水の判定が行われたら、水しぶきのエフェクトとSEの再生のあとに OutOfWater メソッドを呼び出します。

　OutOfWater メソッドの上の段にはサマリーという概要説明部分を記述しています。
これは Visual Studio エディターの持つ機能の１つです。作成方法は、OutOfWater メソッドをすべて書き終わってから、メソッドの１行上で半角スラッシュを３つ書いてください。
自動的にサマリーが作成されます。他のメソッドや、クラス名でも同様に記述できますので、自作したメソッドについては、必ずサマリーを記述しておきましょう。

PlayerController.cs

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;              //  <=　☆　DOTweenを利用する際に追加する

public class PlayerController : MonoBehaviour
{
    [Header("移動速度")]
    public float moveSpeed;

    [Header("落下速度")]
    public float fallSpeed;

    [Header("着水判定用。trueなら着水済")]
    public bool inWater;

    private Rigidbody rb;

    private float x;
    private float z;


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


    private Vector3 straightRotation = new Vector3(180, 0, 0);     // 頭を下(水面方向)に向ける際の回転角度の値


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


    [SerializeField, Header("水しぶきのエフェクト")]
    private GameObject waterEffectPrefab = null;

    [SerializeField, Header("水しぶきのSE")]
    private AudioClip splashSE = null;


    void Start() {
        rb = GetComponent<Rigidbody>();


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


        // 初期の姿勢を設定(頭を水面方向に向ける)
        transform.eulerAngles = straightRotation;　　　// <=　この命令についてはいくつかの教材で学習済です。振り返ってみましょう。


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

    }

    void FixedUpdate() {

        // キー入力の受付
        x = Input.GetAxis("Horizontal");
        z = Input.GetAxis("Vertical");

        // 斜め移動の距離が増えないように正規化処理を行い、単位ベクトルとする(方向の情報は持ちつつ、距離による速度差をなくして一定値にする)
        Vector3 direction = new Vector3(x, 0, z).normalized;

        // velocity(速度)に新しい値を代入して移動
        rb.velocity = new Vector3(direction.x * moveSpeed, -fallSpeed, direction.z * moveSpeed);
    }


　　// IsTriggerがオンのコライダーを持つゲームオブジェクトを通過した場合に呼び出されるメソッド
    private void OnTriggerEnter(Collider col) {

        // 通過したゲームオブジェクトのTagが Water であり、かつ、isWater が false(未着水)であるなら
        if (col.gameObject.tag == "Water" && inWater == false) {

            // 着水状態に変更する
            inWater = true;

            // 水しぶきのエフェクトを生成
            GameObject effect = Instantiate(waterEffectPrefab, transform.position, Quaternion.identity);
            effect.transform.position = new Vector3(effect.transform.position.x, effect.transform.position.y, effect.transform.position.z - 0.5f);

            // エフェクトを２秒後に破壊
            Destroy(effect, 2.0f);

　　　　　　// 水しぶきのSEを再生
　　　　　　AudioSource.PlayClipAtPoint(splashSE, transform.position);


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

　　　　　　// コルーチンメソッドである OutOfWater メソッドを呼び出す
            StartCoroutine(OutOfWater());                            　// <=  StartCoroutine(呼び出すコルーチン・メソッドの名前(引数))　の書式で記述する
 

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

            
        }
    }


////* ここから追加 *////　　メソッドの上にあるサマリーについては、メソッドを書き終わってから半角スラッシュ３つ入力すると自動的に追加されます。メソッドを書き終わってから追加しましょう。


    /// <summary>
    /// 水面に顔を出す
    /// </summary>
    /// <returns></returns>
    private IEnumerator OutOfWater()
    {
        // １秒待つ
        yield return new WaitForSeconds(1.0f);   //  <= yield による処理。yield return new WaitForSecondsメソッドは、引数で指定した秒数だけ次の処理へ移らずに処理を一時停止する処理 

        // Rigidbody コンポーネントの IsKinematic にスイッチを入れてキャラの操作を停止する
        rb.isKinematic = true;

        // キャラの姿勢（回転）を変更する
        transform.eulerAngles = new Vector3(-30, 180, 0);

        // DOTweenを利用して、１秒かけて水中から水面へとキャラを移動させる
        transform.DOMoveY(4.7f, 1.0f);
    }

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

}

３．＜コルーチン処理とStartCoroutineメソッド＞

　コルーチン(Coroutine)とは一定の時間や条件をもとに、処理を中断・再開・終了させることができる処理のことです。

　コルーチンはメソッドとして宣言しますが、戻り値に IEnumerator を必ず利用します。
また処理の内部に yield を含む、中断・遅延処理の命令を必ず用意する必要があります。

　今回は yield return new WaitForSecondsメソッドを利用して、指定した時間だけ待機する処理を実装しています。

今回実装しているコルーチン・メソッド

　　private IEnumerator OutOfWater()
    {

        // １秒待つ
        yield return new WaitForSeconds(1.0f);   //  <= yield による処理。yield return new WaitForSecondsメソッドは、引数で指定した秒数だけ次の処理へ移らずに処理を一時停止する処理 

        // Rigidbody コンポーネントの IsKinematic にスイッチを入れてキャラの操作を停止する
        rb.isKinematic = true;

        // キャラの姿勢（回転）を変更する
        transform.eulerAngles = new Vector3(-30, 180, 0);

        // DOTweenを利用して、１秒かけて水中から水面へとキャラを移動させる
        transform.DOMoveY(4.7f, 1.0f);
    }

　コルーチン・メソッドを呼び出す場合には、StartCoroutineメソッドを使用して、引数にコルーチン・メソッドを指定して処理を呼び出します。
この命令を利用しないと、コルーチン・メソッドを実行することはできません(コンパイル・エラーがでないので注意しましょう)

コルーチン・メソッドを呼び出す場合

　　StartCoroutine(OutOfWater());　　<=  StartCoroutine(呼び出すコルーチン・メソッドの名前(引数))　の書式で記述する

参考サイト

Samurai Blog様
【Unity】はじめてのコルーチン!これさえ読めば基礎はカンペキ
https://www.sejuku.net/blog/83712

XR-HU3様
【Unity】コルーチンで処理を中断・再開・停止させる方法を学ぶ
https://xr-hub.com/archives/20368

４．＜DOTweenの補間機能と実装例①　ーDOMoveYメソッドー＞

　DOTweenによる補間処理を実装しています。スクリプト内でDoTweenの処理を実装するためには、最初に using による宣言が必要になります。

using UnityEngine;
using System.Collections;
using System.Collections.Generic;
using DG.Tweening;                      // ☆　<=　追加します

　このスクリプト内ではDOTweenの持つメソッドを１つ利用しています。

　transform.DOMoveY(4.7f, 1.0f);

＜１．DOMoveY(float endValue, float duration)＞

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

　このメソッドは処理を行いたいゲームオブジェクトの、transfromに対して実行します。
ここではキャラであるペンギンを移動させる命令を行いたいので、そのまま transform に対して処理を行うようにしています。
（なぜ transform 変数を指定することで、ペンギンのゲームオブジェクトを指定していることになるか、理由がわかりますか？
　もしも分からない場合にはスクリプトの基礎を復習しましょう。）

　transform.DOMoveY()の第１引数はfloat型で、移動させる位置を指定します。今回はゲーム画面内の中央部分に移動したいので 0 を指定しています。
第２引数はfloat型で、移動する際にかかる時間を指定します。今回は 1.0f なので、１秒かけて Penguin ゲームオブジェクトの Positionの Y の位置を
4.7 の位置(ゲーム画面の、水面より少し上)まで移動をさせる、という命令になります。

　その結果、ペンギンが水面より顔を出す、という処理を制御しています。

５．＜Summary（サマリー）機能＞

　関数（メソッド）やクラスを作成し終わりましたら、必ずその関数やクラスの説明を書くように心がけましょう。書く場所は関数名、あるいはクラス名の１行上の部分です。
半角スラッシュを3個連続で記述すると説明用のコメントであるサマリー(概要)が自動的に記述されます。

　別の記事で詳しく解説していますので、そちらを確認しておいてください。

　=>　知っておきたい豆知識

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

　スクリプトの修正が終了したら、ゲームを実行して順番に動作を確認していきます。
今回の一連の処理は、以下の通りの設計になっているはずです。ちゃんと順番に処理制御されているかを確認してください。

　落下する際にキャラの姿勢を変更する(頭から水面方向に落下するようにする)
　　　↓
　キャラが着水してそのまま水底に沈む
　　　↓
　少し待つ（コルーチン処理で実装）
　　　↓
　キャラの姿勢を変更する(頭を水面方向に向ける)
　　　↓
　水中から徐々に水面にキャラを登場させる(DOTweenで実装)

＜実行動画　頭から落下をする。Game ビューだけではなく、Penguin ゲームオブジェクトの Rotation情報も確認する＞
https://gyazo.com/c18a3e67b4c37f4a9846982c2fc70277

＜実行動画　着水後、１秒待ってから、１秒かけて水面にキャラが移動して顔を出す＞
https://gyazo.com/702a855f0184b4112e03269eac1c16fa

　正常に動作していたら、次は、待機の時間や、水面までの時間を変更して、どのような違いが出るかを確認してみます。

＜検証動画　着水後、１秒待たない場合は？＞
https://gyazo.com/abf6b32f1041d84e7cd73b1b73d4464c

＜検証動画　着水後、水面まで上がってくる時間を延ばした場合は？＞
https://gyazo.com/4558a6bab04083dea1cf200938fb2916

　違いがわかりましたでしょうか。
こういったことを行うことによって、処理の中身が見えるようになってきます。
是非今後もご自分でも変更していただいて、どの処理がその部分とつながっているかをしっかりと確認しておいてください。

　もしも自分の中で適宜な値が見つかった場合には、教材の値を変更していただいても構いません。

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

　=>　次は　手順１０　－花輪の作成－　です。

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

印刷する

コメント（0）

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

コメントをかく

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

i-school