Unityに関連する記事です

 前回の手順で「行き先」のゲームオブジェクトをタップした際に、Debug.Log メソッドが実行されることを確認できました。
この手順では実際にその処理の内容を実装していきます。

 まずは最初に、Debug.Log メソッドで確認した処理の1つである、ボタンのアニメ演出の部分について実装を行います。
ボタンをタップしたことが分かるように、ボタンをポヨンと動かすようにします。


<実装動画>
動画ファイルへのリンク


手順5 −ボタンのタップ演出の追加−
 8.DOTweenをインポートして設定する
 9.TapPointDetail スクリプトを修正し、DOTween を利用してタップ時にボタンのアニメ演出を追加する



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

 ・メソッド・チェーン
 ・DOTweenの補間機能と実装例  DOPunchScale メソッド、SetEase メソッドー



8.DOTweenをインポートして設定する

1.DOTween とは


 DOTween(ドットゥイーン) は、Unity のアセットストアにて無償で公開されている、Tween系(アニメ用)アセットです。

 このアセットは処理と処理の間の、補間処理を行ってくれる機能を持っています。
例えば、A地点から B地点にゲームオブジェクトを移動させる処理を実装した場合、通常であれば一瞬で移動を行ってしまいますが
DOTween を利用すると A地点からB地点までの移動するまでの中間の処理を作成して移動を行ってくれます。

 この補間処理の機能によって中間の処理があることで、ゲームオブジェクトがアニメーションしているように見せることが出来ます。


2.Unity に DOTween をインポートする


 アセットストアにサインインして、検索で DOTween と入力すれば見つかります。Pro版(有償)もありますが、無償版で問題ありません。




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


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


Demigiant/DOTween



3.初期設定を行う


 インポート後、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


9.TapPointDetail スクリプトを修正し、DOTween を利用してタップ時にボタンのアニメ演出を追加する

1.設計


 ボタンをタップした際のアニメ演出を実装するには、インポートした DOTween の機能を利用します。

 DOTween の機能を利用する場合であっても、操作の対象となるコンポーネントの情報がスクリプトになければ操作は行えません。
DOTween の制御命令は基本的に、ゲームオブジェクトの Trasnform コンポーネントに対して実行されます。
今回であれば、btnTapPoint ゲームオブジェクトに対して命令を行いますので、このゲームオブジェクトの Trasnform コンポーネントの情報が必要になります。

 スクリプトをアタッチしている場合、アタッチしているゲームオブジェクトの Trasnform コンポーネントの情報は
自動的に transform 変数に代入されますので、こちらの変数を利用して制御を行うようにします。

 ボタンのアニメ演出の制御の処理を記述する場所は、すでに TODO 機能で記述してありますので、その部分に処理を追記しましょう。


2.TapPointDetail スクリプトを修正する


 TOTO として記述してある部分の Debug.Log メソッドをコメントアウトして、アニメ演出の処理を実装します。
このように事前に実装したい処理をコメントとして TODO 機能を利用して残しておくと処理も書きやすく、TODO の部分はそのまま残しておければ、それがコメントとしての役割を持ちます。

 アニメ演出には、DOTween 機能の1つである DOPunchScale メソッドを利用しています。
DOTween の機能をスクリプト内に記述するためには、using DG.Tweening の宣言が必要になります。
なお、他にも色々なメソッドが用意されていますので、この処理にこだわる必要はありません。


TapPointDetail.cs


 スクリプトを修正したらセーブします。Visual Studio のセーブ機能は Ctrl + Shift + S キーです。


3.<メソッド・チェーン>


 DOTween の機能について説明する前に、メソッド・チェーンについて説明します。

  // DOTween の機能の1つである DOPunchScale メソッドを利用してアニメ演出を追加
  transform.DOPunchScale(Vector3.one * 1.25f, 0.15f).SetEase(Ease.OutBounce);

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

 このようにピリオドを利用して、前のメソッドの処理に続けて次のメソッドの処理を書くと、前のメソッドの処理を受けて次のメソッドの処理が実行されます。
この記述方法をメソッド・チェーンといいます。これは C# が持つ機能です。DOTween だけのものではありません。

 今回の場合、transform に対して DOPunchScale メソッドが最初に実行されて、その処理結果を受けて SetEase メソッド実行されるようになっています。

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


4.<DOTweenの補間機能と実装例  DOPunchScale メソッド、SetEase メソッドー>


 新しく実装を行った DOTween の機能について、各メソッドを順番に説明します。

  // DOTween の機能の1つである DOPunchScale メソッドを利用してアニメ演出を追加
  transform.DOPunchScale(Vector3.one * 1.25f, 0.15f).SetEase(Ease.OutBounce);


1.DOPunchScale (Vector3 endScale, float duration)

 DOPunchScale メソッドは、他の移動系の DOTween のメソッドと同じで、制御したいゲームオブジェクトの Transform コンポーネントに対して命令を出すメソッドです。
Transform コンポーネント、あるいは RectTransform コンポーネントの Scale の値に対して補間処理を行って、アニメしているように演出してくれる機能です。

 Scale の値を、現在値から第1引数で指定した値まで、第2引数に指定した時間をかけて伸縮させます。
第1引数は Vector3 型を指定します。これが Scale の伸縮する最大値になります。つまり、この幅の中で指定したサイズを変更する処理になります。

 第2引数は 0.15f ですので、0.15秒の間、指定したゲームオブジェクトの Scale を 現在値(1.0) → 1.25倍 の間で伸縮させてから、
最初の Scale (1.0f)に戻します。


2.SetEase (EaseType easeType)

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

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

参考サイト
ゲームUIネット 様
DOTweenのイージング一覧を世界一詳しく&分かりやすく説明する



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

 Scale 変更する際に OutBounce を指定すると、徐々に跳ね(バウンド)が小さくなるようなイージングを行うことが出来ます。
そのため、ボタンを押すと Scale の変更に合わせてポヨンと跳ねる(揺れる)ようなアニメーションの挙動を実現し、
それが徐々に小さくよるように指定しています。


 
 以上が今回実装している、DOTweenの処理になります。しっかりと読み解いていって使い方を覚えてください。


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


 すべての実装が終了したらセーブを行い、どのような処理を実装し、どのように動けば正常なのかを把握してから、ゲームを実行します。
ゲーム画面にある btnTapPoint ゲームオブジェクトをマウスの左クリックします。
ボタンがアニメ演出するようになり、Console ビューに Debug.Log メソッドに指定した文字列が順番に2つ表示されれば制御成功です。


<実行動画>
動画ファイルへのリンク



 以上でこの手順は終了です。
 
 次は 手順6 −行き先確認ポップアップの作成と生成制御の実装− です。

コメントをかく


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

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

Menu



プログラムの基礎学習

コード練習

技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

3D脱出ゲーム(抜粋)

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

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

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

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

3Dトップビューアクション(白猫風)

VideoPlayer イベント連動の実装例

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

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

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

private



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

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