おはじきゲーム　手順８

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

手順８　－DoTweenの処理を実装－

１５．DoTweenをインポートして設定する
１６．的球スクリプトを修正し、ゲーム開始時にアニメ表示させる

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

・DoTweenの補間機能と実装例①　Sequence機能

１５．DoTweenをインポートして設定する

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

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

　ダウンロードしてUnityにインポートしてください。インポート設定はそのままで問題ありません。
インポートされるとProject内に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の機能を補間処理を利用して、ゲームオブジェクトのアニメ演出を実装します。

　DoTweenには大きくわけて、単体でメソッドを書いて実行する方法と、複数の処理をまとめて書いて順番通りや同時に処理するSequence(シーケンス)という方法があります。

　ここでは両方の処理を実装していきます。
　
　まずは最初に、単体のメソッドでの処理を書いて実行して確認を行います。
そのあと、Sequence(シーケンス)を利用して、複数の補間処理を順番に処理するようにします。

　処理を追加する箇所は２か所です。Startメソッド内に敵の出現時のアニメ演出を追加し、
OnCollisionEnter2Dメソッド内に手球と接触した際のアニメ演出を追加します。

　順番としては最初に、OnCollisionEnter2Dメソッド内の処理から追加します。こちらは単体のメソッドを実行する処理で、手球と接触した際に的球を２回転させる処理になります。
その処理が問題なく動いたら、次に、Startメソッド内の処理を追加します。こちらはSequenceを利用し、複数のアニメ処理を行います。

　なおDoTweenを利用する場合には忘れずに using DG.Tweening; を補記してください。

的球スクリプトを修正し、手球に接触した際に的球を回転させる

　それでは、DoTweenの持つメソッドを追加し、回転処理を実装していきます。

EnemyBall.cs

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

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

public class EnemyBall : MonoBehaviour
{
    private CapsuleCollider2D capsuleCol;

    void Start()
    {
        capsuleCol = GetComponent<CapsuleCollider2D>();
    }

    private void OnCollisionEnter2D(Collision2D col) 
　　{
        // CharaBallのTagを持つゲームオブジェクトに接触したら
        if (col.gameObject.tag == "CharaBall")
        {
            // CharaBallクラスを取得できるか判定
            if (col.gameObject.TryGetComponent(out CharaBall charaBall))
            {
                // 取得できているか確認
                Debug.Log(charaBall);


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

                transform.DOLocalRotate(new Vector3(0, 720, 0), 0.5f, RotateMode.FastBeyond360).SetEase(Ease.Linear);

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


　　　　　　　　// TODO 敵の破壊する処理を書く

                }
            }
        }
    }
}

＜OnCollisionEnter2DメソッドでのDoTweenによる回転処理＞

  transform.DOLocalRotate(new Vector3(0, 720, 0), 0.5f, RotateMode.FastBeyond360).SetEase(Ease.Linear);

　ここでは回転処理を行うために、transform(敵自身)に対して、DOLocalRotateメソッドを実行しています。このメソッドには引数が3つあります。

第1引数が回転させる軸と角度を指定します。今回はY軸のみ720度(2周)させるようにしています。
第2引数は回転が終了するまでの時間を指定します。今回は 0.5f としていますので、0.5秒の間に 720 度(２)回転するように命令を出しています。
第3引数はオーバーロードの引数で、回転させる際の条件を指定した場合のみ設定した内容で処理されます。
今回は RotateMode.FastBeyond360 を指定していますので、360 度を越えた回転角度であっても1周では止まらずに、指定した角度になるまで回転を続けます。
この設定を行っているため、くるくると周回して回転をしています。

　DOLocalRotateメソッドに続いてピリオドがありますので、続くメソッドは、このDOLocalRotateメソッドに付随した処理になります。

　SetEaseメソッドでは引数で指定したアニメの再生の設定が可能です。今回は一定の速さで回転するように Ease.Linear を指定しています。

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

　ゲームを実行して動作を確認します。手球を弾いて的球に接触させてみてください。
的球が回転すれば成功です。次の演出処理を追加しましょう。

検証動画　
https://gyazo.com/2803ea9f7568990a7af209d74589c662

的球スクリプトを修正し、的球を徐々に拡大しながら出現する演出を追加する

　ここではSequenceを利用して、複数の処理をまとめて順番通りに実行する処理を実装していきます。

EnemyBall.cs

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

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

public class EnemyBall : MonoBehaviour
{
    private CapsuleCollider2D capsuleCol;

    void Start()
    {
        capsuleCol = GetComponent<CapsuleCollider2D>();


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

　　　　// 最初のスケールを保持
        Vector2 startScale = transform.localScale;

        // 最小化(見えなくなる)
        transform.localScale = Vector2.zero;

        // Sequence初期化
        Sequence sequence = DOTween.Sequence();

        // ①敵を回転させながら1.5倍の大きさにし、その後、元の大きさに戻しながら出現させる
        sequence.Append(transform.DOLocalRotate(new Vector3(0, 720, 0), 1.0f, RotateMode.FastBeyond360).SetEase(Ease.Linear));
        sequence.Join(transform.DOScale(startScale * 1.5f, 1.0f).SetEase(Ease.InCirc));
        sequence.AppendInterval(0.15f);
        sequence.Join(transform.DOScale(startScale, 0.15f).SetEase(Ease.InCirc));

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


    }

    private void OnCollisionEnter2D(Collision2D col) 
　　{
        // CharaBallのTagを持つゲームオブジェクトに接触したら
        if (col.gameObject.tag == "CharaBall")
        {
            // CharaBallクラスを取得できるか判定
            if (col.gameObject.TryGetComponent(out CharaBall charaBall))
            {
                // 取得できているか確認
                Debug.Log(charaBall);


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

                // Sequence初期化
                Sequence sequence = DOTween.Sequence();

                // ②手球と接触すると敵を回転(処理の内容は同じ)
                sequence.Append(transform.DOLocalRotate(new Vector3(0, 720, 0), 0.5f, RotateMode.FastBeyond360).SetEase(Ease.Linear));


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


　　　　　　　　// TODO 敵の破壊する処理を書く

                }
            }
        }
    }
}

＜Sequence(シーケンス)の実装例＞

　DoTweenによる補間処理をSequenceを利用して実装しています。
Sequenceを利用することで、DoTweenの処理を自分の組み立てた順番通り、あるいは同時に実行することができます。
　
先ほども書きましたが、スクリプト内でDoTweenの処理を実装するためには、最初に using による宣言が必要になります。

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

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

　Append()　

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

　AppendInterval()　

　　　アペンド・インターバルと読みます。次にあるメソッドが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/

StartメソッドでのSequence処理

        // 最初のスケールを保持
        Vector3 startScale = transform.localScale;

        // 最小化(見えなくなる)
        transform.localScale = Vector3.zero;

        // Sequence初期化
        Sequence sequence = DOTween.Sequence();

        // ①敵を回転させながら1.5倍の大きさにし、その後、元の大きさに戻しながら出現させる
        A-1)sequence.Append(transform.DOLocalRotate(new Vector2(0, 720, 0), 1.0f, RotateMode.FastBeyond360).SetEase(Ease.Linear));
        A-2)sequence.Join(transform.DOScale(startScale * 1.5f, 1.0f).SetEase(Ease.InCirc));
        B-1)sequence.AppendInterval(0.15f);
        B-2)sequence.Join(transform.DOScale(startScale, 0.15f).SetEase(Ease.InCirc));

　最初に敵の元々のScaleを保持しておきます。これはこの後でScaleを変更する処理を行い、最後には元のScaleに戻す、という流れを実現するためです。

　続いて、Scaleの値を Vector2.zeroをつかって、(0, 0)にし、敵を画面から見えない状態にします。

　準備が整ったので、Sequenceを宣言して初期化し、利用できる状態にします。

　Sequenceでは４つの処理が順番にかかれており、このうち、Joinメソッド以外は、その前の処理が終了するのを待ってから順番に処理がされます。
A～Cのアルファベットを処理の先頭に補記していますが、Aの処理２つは同時に実行され、それが終了してからBの処理が２つ同時に処理される、という形で順序立てて処理されます。

　AとBの２つの処理がまとまっているのは、Appendメソッド/AppendIntervalメソッドの次の行にあるメソッドがJoinメソッドであるためです。
JoinメソッドはAppendメソッドと同時に実行される処理です。そのため、AとBは、それぞれ2行分の処理が実行されることになります。

　AppendメソッドとJoinメソッド内で処理されているDoTweenの内容を順番に説明します。

A-1)sequence.Append(transform.DOLocalRotate(new Vector2(0, 720, 0), 1.0f, RotateMode.FastBeyond360).SetEase(Ease.Linear));

　transform(敵自身)に対して、DOLocalRotateメソッドを実行しています。このメソッドには引数が3つあります。

第1引数が回転させる軸と角度を指定します。今回はY軸のみ720度(2周)させるようにしています。
第2引数は回転が終了するまでの時間を指定します。今回は 1.0f としていますので、 1秒の間に 720 度回転するように命令を出しています。
第3引数はオーバーロードの引数で、回転させる際の条件を指定した場合のみ設定した内容で処理されます。
今回は RotateMode.FastBeyond360 を指定していますので、360 度を越えた回転角度であっても1周では止まらずに、指定した角度になるまで回転を続けます。
この設定を行っているため、くるくると周回して回転をしています。

　DOLocalRotateメソッドに続いてピリオドがありますので、続くメソッドは、このDOLocalRotateメソッドに付随した処理になります。

　SetEaseメソッドでは引数で指定したアニメの再生の設定が可能です。今回は一定の速さで回転するように Ease.Linear を指定しています。

A-2)sequence.Join(transform.DOScale(startScale * 1.5f, 1.0f).SetEase(Ease.InCirc));

　Joinメソッドですので、A-1のAppendメソッドと同時に実行されます。そのため、回転させると同時に、DoScaleメソッドの処理も一緒に行われます。

　transform(敵自身)に対して、DoScaleメソッドを実行していますので、敵のScaleを変更する処理を行っています。
第1引数で指定したScaleに、第2引数の時間をかけてScaleを変更します。startScale * 1.5f を指定しているので、1秒かけて元の大きさの1.5倍になるようにしています。

　これを回転と同時に行うことで、回転しながら大きさがが変化する、というアニメ演出を同時に行っています。

B-1)sequence.AppendInterval(0.15f);

　引数で指定した時間だけ処理を待機します。これはAの処理が終了してから行われます。

B-2)sequence.Join(transform.DOScale(startScale, 0.15f).SetEase(Ease.InCirc));

　Joinメソッドですので、B-1の待機と処理と同時にこの処理が行われます。A-2と同じDoScaleメソッドです。
ここでもtransform(敵自身)に対して、DoScaleメソッドを実行していますので、敵のScaleを変更する処理を行っています。
一時的に1.5倍の大きさになっている敵を元の大きさに戻しています。

　これを一連の流れとして処理すると、見えない敵が回転しながら大きくなって、そして少し縮む、というアニメ演出を実行してます。

OnCollisionEnter2DメソッドでのSequence処理

                // Sequence初期化
                Sequence sequence = DOTween.Sequence();

                // ②手球と接触すると敵を回転
                sequence.Append(transform.DOLocalRotate(new Vector3(0, 720, 0), 0.5f, RotateMode.FastBeyond360).SetEase(Ease.Linear));

　Sequenceの初期化は同じです。

　Appendでの処理も、先ほどと同じ回転処理です。
これは次の手順で行う処理に合わせてSequenceでの処理に変更していますが、処理の内容は先ほどと変わりません。

①と②の敵のアニメ演出を確認する

　EnemyBallスクリプトの①と②の箇所について、ゲームを実行して挙動を確認します。

　①は、ゲームの実行と同時に見えなくなり、その後、大きくなりながら表示されます。

検証動画①　敵を回転させながら1.5倍の大きさにし、その後、元の大きさに戻しながら出現させる
https://gyazo.com/428e0f7facd5a9084c35b40ea52a5698

　②は、手球と接触した際にはくるくると回転します。こちらは先ほど追加した処理と同じものですので、処理が動いていれば問題ありません。

検証動画②　手球と接触すると敵を回転
https://gyazo.com/8678fe87a3e70331d6f97c2b1da62224

　①の処理は４つの処理が複合して処理されていますので、まずは最初の1行のみを残して下の3行をコメントアウトし、どのような挙動になるかを確認してみてください。
その後、徐々に1行ずつコメントアウトを解除していって、最終的な動きにつながっているかを確認してください。

コメントアウトを活用して、DoTweenの機能の検証を行う

  // ①敵を回転させながら1.5倍の大きさにし、その後、元の大きさに戻しながら出現させる
  sequence.Append(transform.DOLocalRotate(new Vector2(0, 720), 1.0f, RotateMode.FastBeyond360).SetEase(Ease.Linear));　　<=　ここだけ実行したらどうなるか
  //sequence.Join(transform.DOScale(startScale * 1.5f, 1.0f).SetEase(Ease.InCirc));
  //sequence.AppendInterval(0.15f);
  //sequence.Join(transform.DOScale(startScale, 0.15f).SetEase(Ease.InCirc));

　どのような作りになっているかを知ることで、今後、自分でアニメ演出を作成する際の参考になります。

　この手順は以上になります。

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

印刷する

コメント（0）

おはじきゲーム　手順８ - i-school 先頭へ

コメントをかく

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

i-school