Unityに関連する記事です

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


<補間処理なし(現在)>
動画ファイルへのリンク


<補間処理あり(DOTweenの機能)>
動画ファイルへのリンク


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

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


手順13 −DOTweenによる補間処理の実装−

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


新しく学習する内容


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


21.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を利用します。


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

1.設計


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


<補間処理なし(現在)>
動画ファイルへのリンク


<補間処理あり(DOTweenの機能)>
動画ファイルへのリンク



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


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


JumpUpObject.cs

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



3.<DOTweenの補間機能と実装例  DOMoveYメソッドー>


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

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


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

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



<1.DOMoveY(float endValue, float duration)>

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

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


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

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


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


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

 
<実行動画>
https://gyazo.com/55b51cca2bb933059e17674eb4d35fd7



5.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 ゲームオブジェクト 編集モード画像



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

 次は 手順14 −木の障害物の実装− です。

コメントをかく


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

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

Menu



技術/知識(実装例)

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

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

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

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

レースゲーム(抜粋)

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

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

3D脱出ゲーム(抜粋)

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

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

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

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

VideoPlayer イベント連動の実装例

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

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

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

private



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

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