Unityに関連する記事です

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

手順8 −DoTweenの処理を実装−
15.DoTweenをインポートして設定する
16.的球スクリプトを修正し、ゲーム開始時にアニメ表示させる



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

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



15.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


16.的球スクリプトを修正し、アニメ演出を追加させる

設計


 DoTweenの機能を補間処理を利用して、ゲームオブジェクトのアニメ演出を実装します。

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

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


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

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


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

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


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


EnemyBall.cs

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



<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 度(2)回転するように命令を出しています。
第3引数はオーバーロードの引数で、回転させる際の条件を指定した場合のみ設定した内容で処理されます。
今回は RotateMode.FastBeyond360 を指定していますので、360 度を越えた回転角度であっても1周では止まらずに、指定した角度になるまで回転を続けます。
この設定を行っているため、くるくると周回して回転をしています。

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

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


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


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


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



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


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


EnemyBall.cs

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



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

 AとBの2つの処理がまとまっているのは、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


 ,僚萢は4つの処理が複合して処理されていますので、まずは最初の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));


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


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

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます