とても簡単にUIシステムを作れるunityアセット Doozy UIの解説！

#初めに
この記事は[Unityアセット冬のアドベントカレンダー 2019 Winter](http://assetstore.info/asset-advent-calendar-2019-winter/)の8日目の記事です。

unityでは、UI機能やTestMeshProなどが標準でありますが、**高品質なUI**には欠かせないアニメーションや効果音を標準で用意されていません。
そのため、Doozy UIなどを使って実装する人もいますが、これがけっこう大変...

そこで、今回私が紹介したいのが、この[Doozy UI](https://assetstore.unity.com/packages/tools/gui/doozyui-complete-ui-management-system-138361?utm_source=jppt&utm_medium20191208)というアセットです。このアセットは、ゲーム作成において必須なUI機能を、**とても簡単に**実装してくれます。
公式に、「Complete UI Management System」と言われていますが、まさに**完璧なUIシステム**と言えるでしょう。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/ac19dfa9-d032-4359-a24b-15293cb39517.png)


#Doozy UIとは
Doozy UIは、unityでの**UI機能をとても実装しやすくするアセット**です。
主な利点は三つあります。
・**大量の効果音**がアセットに含まれていて、他から、効果音を探してくる必要がなくなる。
・インスペクタのパラメータを変えるだけで**UIアニメーションを実装**できる。
・UIの状態遷移を**ノードベース**でアニメーターのように管理できる。

[公式の動画](https://www.youtube.com/watch?v=wY2g3ZMBLog&list=PLszfX2HJpT-LCqFirIrt7oNySZT-II5Xt)を見ていただければ、どんな事が出来るのかが分かると思います。

#1. アセットのインポート
まず、アセットをインポートします。
Doozy UIは、[Dot Tween](https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676)に**依存**しているため、Dot Tweenをインポートしておく必要があります。
また、インポートすると下の写真のような画面になるので、赤丸の所を押してください。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/19895a87-230e-6465-a130-3faa60791ee4.png)


#2.初期設定
Doozy UIを使うときは、**初期設定**が必要になります。
１．Tools/Doozy/Control Panelをクリックして、ウインドウをひらいてください。
２．Generalを選択し、下の画像の矢印をクリックして、Text Mesh Proを使えるようにしてください。
　（Playmakerにも対応しているみたいです。）
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/0bef9068-f26a-f736-f0e0-27b45b99c840.png)


#3.タグを作成
Doozy UIでは、UIをタグで管理しているので、**タグを作る必要**があります。
Canvases、Bottons、Viewsそれぞれを開き、下の写真のようにタグを作ってください。
New Categoryy → +ボタンを押すと作成できます。
＊**Saveボタン**を押す必要があるので、注意してください。
＊自分を効果音を使いたい場合、Soundyに登録する必要があります。
＊名前は何でも構いませんが、タグなので分かりやすい名前にするべきだと思います。
＊Debugで、デバッグの設定もできます。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/9bdf4224-bb66-84e5-b6bf-8582cbf4bc3c.png)

#4.パネルを作成
次にパネルの作成に入ります。
１．Hierarchyで右クリックして、Doozy/UI/UICanvasを開いてください。
UICanvasコンポーネントの説明は、**下の表を見ていただければ分かる**と思います。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/1a9522b3-19a9-8d5f-34cf-10f2a0278cc6.png)

２．MasterCanvasで右クリックして、Doozy/UI/UIViewを開いてください。
これに、子オブジェクトとしてBotton、Textなどを入れていきます。
＊Text Mesh Proのフォントは、この[Selected U3D Japanese Font](https://assetstore.unity.com/packages/2d/fonts/selected-u3d-japanese-font-337)（無料）がおすすめです。

3.UIView上に、UIButtonやText Mesh Proなどをおいてください。
＊**タグ設定**とRenameを忘れないで下さい。
＊必要に応じてタグを追加して下さい。
＊**コピペ**、**複数選択して一括変更**などを使うと楽に作れます。
下の写真が、私が適当にBottonやTextを置いたものです。
![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/cd90ad87-63fb-443c-bbd7-1f83a5aa2e45.png)


#5.アニメーション、効果音、エフェクトの追加
UIView、UIButtonのコンポーネントのパラメータを変えることでアニメーション、サウンドを追加します。
まず、アニメーションは以下の写真のパラメータを調整することで作れます。また、コンポーネント上の**再生ボタン**を押すと**効果音のデバッグ**が出来ます。
![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/4b3d9920-d288-a910-e19b-1fb24966adf9.png)

次に、効果音、エフェクトを追加します。
これは簡単で、上写真のStartもしくはFinishの所を開き、**SoundやPirticle**の所に設定するだけです。

#6.ノードで状態遷移を管理する
Doozy/Nody/Graph Controlerを選び、ノード管理用オブジェクトを作ってください。
次に写真のように、graphというところを選ぶと、新しいgraphが作れるので作ってください。
![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/a66615e4-baa8-61cf-40f7-739893326565.png)

このグラフは**Animatorとかなり似ていて**、右クリックで**ノードを作って繋げる**ことで、システムを作ります。
下の写真が示すようにして下さい。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/404889/d2729ce5-0deb-cead-1273-5160523c1bb7.png)

#最後に
ここまで見ていただいてありがとうございました。
完成したものは[これ](https://twitter.com/VR51054377/status/1203701202011078657)です。


こんなに**簡単にUIアニメーションを作れる**のは、とてもすごいと思います。
またDoozy UIは、**余りにも機能が多過ぎて**ここでは説明しきれないものも多くあります。それに関しては、[公式のYouTube](https://www.youtube.com/user/doozyplay/playlists)を見て頂くと理解出来ると思います。

約70ドルと少し高いかもしれませんが、**それだけの価値**はあると思います。ありがとうございました。