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

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

手順１０　－花輪の作成－

１５．アセットを使って花輪を作成する
１６．スクリプトを使って、花輪を回転させる

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

　・DOTweenの補間機能と実装例②　ーDORotateメソッド、SetEaseメソッド、SetLoopsメソッド、SetLinkメソッドー

１５．アセットを使って花輪を作成する

１．設計

　複数の花のゲームオブジェクトを組み合わせて、花輪を作成します。一連の手順はありますが、形状など、自由に設計にしましょう。

完成図

２．FlowerCircle ゲームオブジェクトを作成する

　ヒエラルキーの何もない場所で右クリックをしてメニューを開き、Create Empty を選択します。
新規の空のゲームオブジェクトが作成されますので、名前を FlowerCircle に変更します。

ヒエラルキー画像

)

　このゲームオブジェクトを花輪のゲームオブジェクト群のフォルダ役として利用します。
次の作業が楽になるように、Transform コンポーネントの Positionの Y を 0 から 20 に変更してください。

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

３．FlowerCircle ゲームオブジェクトの子オブジェクトとして Flower ゲームオブジェクトを作成する

　インポートしたアセットを利用して花のゲームオブジェクトを配置します。
以下の場所にゲームオブジェクトがあります。４種類ありますが色が異なるだけですので、以下のいずれのオブジェクトを利用していただいても構いません。

パス
Assets/AlignedGames/Polygonal Foliage Asset Package/Art/Models/Flowers/Flower1/flower_1.prefab

Assets/AlignedGames/Polygonal Foliage Asset Package/Art/Models/Flowers/Flower1/flower_2.prefab

Assets/AlignedGames/Polygonal Foliage Asset Package/Art/Models/Flowers/Flower1/flower_3.prefab

Assets/AlignedGames/Polygonal Foliage Asset Package/Art/Models/Flowers/Flower1/flower_4.prefab

フォルダ画像

　ここで合計８個になるように設置していますが、自由に設置してください。すべて同じ色、あるいは異なる色のオブジェクトの組み合わせてでも構いません。
同じもので作成する場合には複製機能を利用しましょう。

参考（ゲームオブジェクトの構成は４つとも同じです）

　flower ゲームオブジェクトを８個追加したら、それぞれの名前を flower_0 ～ flower_7 に変更してください。

　またプレファブの状態をアンパックして、通常のゲームオブジェクトに戻しておいてください。
アンパックの手順は以前の学習を振り返っていただくと書いてありますので割愛します。

ヒエラルキー画像

４．各 Flower ゲームオブジェクトの位置を変更する

　Flower ゲームオブジェクトの位置をそれぞれ調整して、輪になるように配置をしてください。
高さのみ同じにしていただければ、後は自由に作成していただいて構いません。

Sceneビュー画像①

Sceneビュー画像②

参考までに、各 Flower ゲームオブジェクトの Transform のインスペクター画像を添付しておきます。

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

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

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

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

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

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

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

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

　以上で花輪のゲームオブジェクトが完成しました。

１６．スクリプトを使って、花輪を回転させる

１．設計

　今までと同じように、ゲームオブジェクトの操作を行いたいので、新しくスクリプトを作成して制御処理を記述します。
それを FlowerCircle ゲームオブジェクトにアタッチして、制御を実行します。

　今回は FlowerCircle ゲームオブジェクトを回転させたいので、DOTweenの機能を利用して、ずっと同じ方向に回転を行う制御を行います。

２．FlowerCircle スクリプトを作成する

　Scripts フォルダの中で右クリックをしてメニューを開き、Create => C# Script を選択してください。
新しいスクリプトが作成されますので、名前を FlowerCircle に変更して、ダブルクリックをして Visual Studio Editor を開いてください。

　DOTween を利用しますので、忘れずに using に宣言を追加してください。
　
　回転処理は Start メソッドに記述します。

FlowerCircle.cs

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

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

public class FlowerCircle : MonoBehaviour
{
    void Start() {

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

３．＜DOTweenの補間機能と実装例②　ーDORotateメソッド、SetEaseメソッド、SetLoopsメソッド、SetLinkメソッドー＞

　新しいDOTweenの処理を実装していますので、各メソッドの説明をします。

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

　この処理は、複数のメソッドをつなげて１行で記述している処理になります。
ピリオドの位置までが１つの処理になっており、合計で３つの DOTween のメソッドが実行されています。

　このようにピリオドを利用して、前のメソッドの処理に続けて次のメソッドの処理を書くと、前のメソッドの処理を受けて次のメソッドの処理が実行されます。
この記述方法をメソッド・チェーンといいます。

　プログラムは処理の末尾にセミコロンがない限り、改行していても１つの命令として処理を行います。
そのため今回の教材であは、メソッドチェーンの位置がわかるように、１行ではなく、改行して１つの処理を記述しています。

＜１行で書く場合と同じ命令＞

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

　正しいプログラムの読み解き方を覚えていくようにしましょう。

　今回の場合、transform に対して DORotate メソッドが最初に実行されて、その処理結果を利用して、次の SetEase メソッドが実行されます。
さらにピリオドで次のメソッドが続いていますので、その２つの処理結果を受けて、最後に SetLoops メソッドが実行されるようになっています。

　プログラムは上から下に実行されていきますが、１行に書かれた処理の場合は、手前(左側)より、ピリオド単位で区切って実行されることになります。
しっかりと処理の順番を追えるように、読み解いてみましょう。

１．DORotate(Vector3 endValue, float duration, RotateMode rotateMode)

transform.DORotate(new Vector3(0, 360, 0), 5.0f, RotateMode.FastBeyond360)

　まずは最初は DORRotate メソッドです。
この処理は指定した時間をかけて回転角度まで最短距離で回転を行います。

　第1引数には目標とする回転角度を Vector3 型で指定します。
今回は new Vector3(0, 360, 0) でRotation を指定していますので、 Y 軸のみ回転情報を与えられています。

　第2引数には第1引数の回転位置に到達するまでにかかる時間です。float 型で指定します。
今回は 5.0f を指定していますので、5秒を書けて Y 軸を 360度回転させています。

　第3引数には RotateMode を指定することができ、指定しない場合は RotateMode.Fast が自動的に設定されます。
今回は、RotateMode.FastBeyond360 を指定しています。こちらは、360度を超えた回転角度が指定された場合に、
そのまま 360 度を越えた回転を行うようにするオプション処理です。

　これは、第1引数に 360 度を指定した場合、360 = 0 として認識をしてしまい、回転を行わなくなってしまうことを回避するために設定しています。
(RotateMode を初期設定の Fast に変更して、実際に試してみましょう。)

２．SetEase(EaseType easeType)

　SetEaseメソッドは他のDoTweenのメソッドに付随する処理です。このようにDoTweenではDoTweenのメソッド同士を１つの処理の塊として続けて処理を行うことができます。
処理を続ける場合には、前のメソッドの後にピリオド(ドット)を書くことで、次のメソッドを書くことが可能です。(最初に説明した、メソッド・チェーンの記述方法です)

　SetEaseメソッドではEaseというアニメーションさせる際のパターンを変更することができます。Easeはenum型で設定されており、Ease.タイプの書式で記述します。
非常に多くの種類があります。今回は最も一般的は Ease.Linear を使用しています。

　今回は、DORotate メソッドが実行されてゲームオブジェクトが回転処理を実行している部分に、この SetEase メソッドが実行されますので
回転に対して、どのようなタイプのアニメーションのパターンを設定して回転を行わせるかを指定しています。

３．SetLoops(int loops, LoopType loopType)

　SetLoopsメソッドは、他のDO～メソッドの後に実行できるメソッドです。この命令単体で実行することはできません。

　一緒に命令をしているメソッドに対してループ処理を付与することが出来ます。
今回の処理では、transform.DORotateメソッドに対して、ループ処理を行っています。(SetEaseメソッドもSetLoopsメソッドと同じで単体では動かないメソッドです)

　第1引数はループ処理を行う回数です。int型で設定します。今回のように -1 を指定すると、それは無限ループになります。(ループが終了しません)
このような場合は明示的に処理を停止させないと無限にループを繰り返します。

　第2引数ではループさせるタイプをLoopTypeというenum型から選択します。LoopType.Restart の場合は、A => B , A => Bという形式で、最初に戻ってループを繰り返します。
他にもLoopTypeがありますので調べてみてください。この処理によって、ずっと同じ方向に回転し、それを無限にループします。

　今回の場合、SetEase メソッドで回転パターンを指定されている処理を、ずっとループ処理を行わせるようにしています。

　
　以上が今回実装している、DOTweenでの処理になります。回転時のアニメーションを設定しつつ、回数無制限のループ処理が行われているので
ゲームオブジェクトを、ずっと同じ方向に対してループ回転の処理を行わせる処理になっています。

４．SetLink(GameObject linkObject)

　SetLink メソッドは、DOTweenの DO～で始まる主メソッドに付随できるメソッドです。この命令単体で実行することはできません。
SetLink メソッドを付与することで一緒に命令している DOTween の終了するタイミングをゲームオブジェクトの生存期間(破棄のタイミング)に紐づけて、
ゲームオブジェクトの破棄と同時に DOTween の処理を終了することができます。

　DOTween の処理は非同期処理と呼ばれる種類のものであり、一度処理が実行されると、その処理が正常に終了するまではキャンセルできません。
DOTween を実行したスクリプトがアタッチされているゲームオブジェクトが破棄されると、DOTween の処理が途中であった場合、処理だけが残り続けてしまう可能性があります。
　
　そうなった場合、DOTween 側から Console ビューに対して、警告の形で通知されます。
そういったケースが想定される場合、SetLink メソッドを利用して、ゲームオブジェクトが破棄されると同時に、DOTween の処理も終了するようにしておく必要があります。

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

　SetLoops メソッドと一緒に利用するケースが多いです。
特にループの回数が無制限の場合には、必ず SetLink メソッドを利用してゲームオブジェクトの破棄のタイミングと紐づけて利用します。

　非同期処理である DOTween の処理は、ゲームオブジェクトが破棄されたあとも自動的には停止しません。
通常は時間の設定値があるため、その時間が終了後に自動的に停止するのですが、無限ループの場合、止まるタイミングがありません。
これによりプログラムの内部では無制限に DOTween が動作しつづけてしまうことになり、不具合の原因となります。

　DOTween の終了のタイミングを紐づけるゲームオブジェクトは、SetLink メソッドの引数に指定して設定を行います。
GameObject 型であれば指定できますので、スクリプトをアタッチしているゲームオブジェクト以外でも設定できます。

  SetLink(gameObject);　　　　// スクリプトをアタッチしているゲームオブジェクトに紐づける

  SetLink(enemy.gameObject);　// enemy 変数のゲームオブジェクトに紐づける

　繰り返しになりますが、SetLoops メソッドを実行した場合、そのループの回数が無制限になっている場合には SetLink メソッドを利用することで
無限ループになっている DOTween の処理を適切なタイミングで終了することが出来ます。

　なお、DOTween の Set～で始まるメソッドを記述する順番は任意です。どの Set～から書かないと動作しない、というルールはありません。
そのため、下記のような順番で記述して同様に動作します。

<現在の書式>

  transform.DORotate(new Vector3(0, 360, 0), 5f, RotateMode.FastBeyond360)
　　　.SetEase(Ease.Linear)
　　　.SetLoops(-1, LoopType.Restart)
　　　.SetLink(gameObject);

<Set～メソッドの順番を変えた場合①>

  transform.DORotate(new Vector3(0, 360, 0), 5f, RotateMode.FastBeyond360)
　　　.SetLoops(-1, LoopType.Restart)
　　　.SetLink(gameObject)
　　　.SetEase(Ease.Linear);

　　　

<Set～メソッドの順番を変えた場合②>

  transform.DORotate(new Vector3(0, 360, 0), 5f, RotateMode.FastBeyond360)
　　　.SetLink(gameObject)
　　　.SetEase(Ease.Linear)
　　　.SetLoops(-1, LoopType.Restart);

　ただし、多くの場合、主メソッドの後には SetEase メソッドを記述するケースが多いです。
また SetLoops メソッドと SetLink メソッドは一緒に記述することが多いですが、その場合もどちらから記述しても問題ありません。

４．FlowerCircle ゲームオブジェクトに FlowerCircle スクリプトをアタッチする

　スクリプトを作成しましたので、アタッチをして実行出来るようにします。

　FlowerCircle スクリプトをドラッグして、ヒエラルキーにある FlowerCircle ゲームオブジェクトにドロップしてください。
子オブジェクトにはアタッチの必要はありません。親子関係により、親が回転する場合、子も同じ方向に一緒に回転を行うためです。

　ここからはアタッチの手順動画は省略します。

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

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

　そのままの位置ですと確認しにくいため、Y軸を変更して画面に映るように変更しましょう。

　FlowerCircle ゲームオブジェクトの Transform コンポーネントの Positionの Y の値を 20 から 10 に変更してください。
それからゲームを実行します。ゲームの開始と同時に FlowerCircle ゲームオブジェクトが回転を始め、ずっと周り続けていれば制御成功です。

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

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

　=>　次は　手順１１　－キャラと花輪の接触判定を実装－　です。

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

印刷する

コメント（0）

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

コメントをかく

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

i-school