３Ｄスライダーゲーム　手順１３

　この手順では先ほどの手順で実装したモグラの移動処理を、一瞬で移動してしまうのではなく、徐々に移動する処理を実装します。
DOTween(ドットゥイーン) という、処理と処理を補間する機能を持つアセットを利用して実装を行います。

＜補間処理なし(現在)＞

動画ファイルへのリンク

＜補間処理あり(DOTweenの機能)＞

動画ファイルへのリンク

　違いがわかりますでしょうか。

　DOTweenの機能を利用すると、上記のように、斜面の中に隠れる位置と斜面の上に位置に対して補間処理が行われて
２点間を移動するまでの間を瞬間移動するのではなく、移動する途中の情報を用意(補間)してくれるため、アニメのような処理を実装することが出来ます。

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

２１．DOTweenをインポートして設定する
２２．スクリプトを修正して、モグラの移動をアニメ制御させる

新しく学習する内容

　・DOTweenの補間機能と実装例①　ーDOMoveYメソッドー
　・プレファブを作る

２１．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を利用します。

２２．スクリプトを修正して、モグラの移動をアニメ制御させる

１．設計

　JumpUpObject スクリプト内にある HeadUp メソッドの処理を変更します。
こちらのメソッド内に、DOTweenを利用したアニメーション処理を利用して、斜面から徐々に地面の上に顔を出す移動の処理を実装します。
もう一度、最初に見ていただいて、どのような処理を実装するのかを確認しておきます。

＜補間処理なし(現在)＞

動画ファイルへのリンク

＜補間処理あり(DOTweenの機能)＞

動画ファイルへのリンク

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

　変更箇所は using に DOTweenの機能を利用するための宣言を追加します。
また HeadUp メソッドの移動処理を DOTweenの持つ DOMoveY メソッドに変更します。

JumpUpObject.cs

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

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;        //  <=  DOTweenの機能を利用する場合には追加します。

public class JumpUpObject : MonoBehaviour
{
    private float startHeight;           // キャラのスタート位置の高さ
    private float hideHeight = 1.0f;     // キャラを隠すための高さの度合

    void Start()
    {
        // 隠す
        Hide();
    }

    /// <summary>
    /// ゲームオブジェクトを隠す
    /// </summary>
    private void Hide() {

        // ゲーム開始前の設置位置を記録しておく
        startHeight = transform.position.y;

        // オブジェクトの高さ(Y軸)を変更して斜面の中に隠れるようにする
        transform.position = new Vector3(transform.position.x, transform.position.y - hideHeight, transform.position.z); 
    }

    private void OnTriggerEnter(Collider col) {
        // キャラが一定の距離に入ったら顔を出す
        if (col.gameObject.tag == "Player") {

         　 Debug.Log(col.gameObject.tag);

            // TODO 
            HeadUp();
        }
    }

    /// <summary>
    /// 顔を出す
    /// </summary>
    private void HeadUp() {


////* 処理を変更する *//// 

        // DOTweenの機能を使ってオブジェクトを上へ移動させる
        transform.DOMoveY(startHeight, 0.25f);


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


    }
}

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

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

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

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

  // DOTweenの機能を使ってオブジェクトを上へ移動させる
  transform.DOMoveY(startHeight, 0.25f);

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

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

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

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

　その結果、モグラが地面より顔を出す、という処理を制御しています。

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

　ゲームを実行して、モグラの移動の処理を確認します。DOTweenの機能によって補間処理(アニメ再生)になっていれば制御成功です。

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

５．Mole ゲームオブジェクトをプレファブにする

　挙動に問題がなければ、今後、Mole ゲームオブジェクトを増やしたり、スクリプトから生成させることも念頭に入れて
Mole ゲームオブジェクトをプレファブにしておきます。

　Project 内で右クリックをしてメニューを開き、Create => Folder を選択し、名前を Prefabs に変更します。
この Prefabs フォルダに Mole ゲームオブジェクトをドラッグアンドドロップしてプレファブにします。
プレファブにすると、ヒエラルキーにある Mole ゲームオブジェクトがクローンになるため、アイコンと名前が青い色で表示されるようになります。

ヒエラルキー画像

Prefabs/Mole

　その後、プレファブの Mole ゲームオブジェクトを選択して、インスペクターの一番上にある Opne Prefab ボタンを押してプレファブ編集モードにします。

　Transform の Position の値をすべて (0, 0, 0)にしておいてください。
このとき、Transform コンポーネントの Reset をかけると、設定してある Scale の値も 1 に戻ってしまうため、Position の値だけを 0 にしてください。

Mole ゲームオブジェクト　プレファブにした際のインスペクター画像

Mole ゲームオブジェクト　編集モード画像

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

　次は　手順１４　－木の障害物の実装－　です。

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

印刷する

コメント（0）

３Ｄスライダーゲーム　手順１３ - i-school 先頭へ

コメントをかく

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

i-school