DoozyUIを触ってみた

# 初めに
~~先日から始まった[HunbleBundle](https://www.humblebundle.com/)の破格セールに含まれていた「DoozyUI」というアセットを試してみました。
HunbleBundleのセールは[こちら](https://www.humblebundle.com/software/unity-2019-bundle?hmb_source=humble_home&hmb_medium=product_tile&hmb_campaign=mosaic_section_2_layout_index_1_layout_type_threes_tile_index_2_c_unity2019_bundle)~~

~~※無いとは思いますが、購入した結果、何らかの不利益を被ったとしても**僕は責任取れません**ので、自己責任でご購入ください。~~

※2019/10/23現在、既にセールは終了しています。

# 今後の諸注意
先日のCEDECやUniteにて、UIBuilderについて告知がありました。
（UIElementsについてはそれよりも前からアナウンスがありますが。）

Unity2019.3バージョンで、既にPreview版として触ることができます。
（ここでは本筋から外れるので、詳細には書きません）

結論から言うと、今後DoozyUI（というかuGUI）はこれらの技術に置き換わり、使えなくなる可能性があります。
なので、これを覚えれば安泰！というものではなく、「そのうちレガシーになってしまうかもしれない技術」と思って勉強してください。
（そらそうだろ、と思えない。**使えなくなるなら勉強しなくていいや。**と思う方はブラウザバック推奨）

# 本題
## 環境
DoozyUI version 3.0.c3

## 導入
[AssetStore](https://assetstore.unity.com/packages/tools/gui/doozyui-complete-ui-management-system-138361)からDL&インストール
内部的に[Dotween](https://assetstore.unity.com/packages/tools/animation/dotween-hotween-v2-27676)も利用しているようなので、もし所持していない場合は同じくDL&インストール

インストールが完了すると、Assets/Doozyフォルダにまとめて配置されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/8d8db504-1d5d-1b45-e219-edec7f436b11.png)

## サンプル
Assets/Doozy/Examples/_Sceneフォルダに、12種のサンプルシーンがあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/9b24b84d-10b8-0dc6-7a8b-68e8b6f2d6af.png)

こういうものも作れるんだ！と参考にする分には良いですが、最初から様々な機能がふんだんに取り込まれているため、
いきなりサンプルシーンを紐解いていくのはオススメしません。
（特にUnity初学者）

## とりあえず作ってみる
サンプルを見て挫折するのはお金が勿体ないだけなので、とりあえず作ってみましょう。

インストールに成功すると、Hierarchy/Create/Doozyというメニューが追加されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/455af7e3-59f6-e303-2ea5-dd92114bb338.png)

uGUIはここにある「UI」を選択し、画面を構築していったと思いますが、
DoozyUIを利用時は、「Doozy」メニューを使っていくこととなります。

以下の方法でUIButtonを生成してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/ace38454-e559-3098-ffe1-8c19f3eac4d8.png)

すると、画面上にボタンが出てきますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/1575d12f-efcd-0854-9b9f-29ed7f8c0258.png)

基本的には通常のボタンと同じものですが、「UI Button」というScriptがアタッチされています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/238e3167-4245-ba98-75ce-bc7e4db19c51.png)

すぐ下に「Settings」「Manual」「Youtube」と3種のボタンがあるのは、とてもユーザビリティがあって分かりやすいですね。

普通の紹介記事なら一番上から説明すると思いますが、本項は「とりあえず作ってみる」なので、
上記の3種の神器や「ButtonCategory」、「Open Database」などといったものは、一旦放っておきましょう。
~~こういうものは必要になってから調べればいいのです。~~

上から順にみていくと、OnPointerEnter～OnClickまで、（Unityを触った人なら）見知ったイベントがありますね。
デフォルトではOnClickのみ有効化されているようです。

▶を押して、開いてみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/eb483c38-07b9-3704-4251-c024a11b43dd.png)

はい、分かりません。

「ClickMode」とやらを設定出来たり、「Preset」で初期状態をロードする機能があるようですが、これらも放っておきましょう。
僕たちが最初にやりたいことは、ボタンを良い感じに動かすことです。（違ったらすいません…）

というわけで、ひとまずこの部分に注目しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/bee4255f-0321-499f-1ca6-26704d75e185.png)

なんとなくわかりますね。

OnClickイベントが発行された時に行うAnimationを、ここで設定できるようです。（デフォルトではPunchというものが設定されています。）
~~Punch？殴るのか？~~
その下の「Preview Animation」という項目で、プレビューできるようなので、押してみましょう。

……何も動かない。

不良品を掴まされたと思って、怒り狂う前に、その下を見てみましょう。
「Move,Rotate,Scale」という3つの項目がありますね。

…お察しの良い方はお分かりかと思いますが、ココでPunchアニメーションの詳細な動きを設定できます。
やってみましょう。
とりあえず一番直感的に動きそうなScaleを選択してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/7f2c6559-faeb-efa7-cb22-8499b49b9aa7.png)

Scale部分を押すと、上図のように薄赤で描かれたScaleを設定する部品が表示されます。
ひとまずScale By Xの部分に「1」を入力し、Preview Animationの▶を押してみます。

![yoke1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/fbaa75ea-8933-8c3e-4cc4-eb40fb83f997.gif)

動きました！

後はPreviewで逐一確認しながら値を調整したり、ScaleだけでなくMoveやRotateを有効化してみたりすれば、
クリック時（OnClick）のアニメーションを作れたも同然ですね。

一度動けば、少しづつ色んな事をしてみたい！と思うのがクリエイターです。
Punchアニメーション以外にも出来ることはないか…？

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/6f4dbd5c-8c83-b078-f905-6a2c943f33ef.png)

上図のセレクトボックスから、設定方法を選択できるようです。

しかし、クリエイター心があるといえども、一から「良い感じ」のアニメーションを作るのは至難の業です。
（デザイナーの方は出来るかもですけど）

### Preset
そこで先ほどすっ飛ばした「Preset」機能を見てみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/041077e2-a2d6-c01d-ccc9-75f18f3924d0.png)

ここの「Preset Category」から適当なものを選び
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/c8716b12-4e68-7789-3088-cc486d283fa9.png)
「Preset Name」からも任意のものを選択します。（最初は適当に選びましょう）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/27d658f1-feb8-535b-a376-4fda6f535660.png)

今回は「Organic」カテゴリーの「JellyFast」を選択しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/41a951c0-bf6c-98e3-4684-d0bde474972c.png)

さて、Preview Animationを押してみましょう！




……動かない！！！

はい。
この状態では、Presetを「選択」しただけで「Load」が出来ておりません。
というわけで、ちょうど「PresetName」の上部にある「Load Preset」ボタンを押してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/aabb0a87-3332-59a2-f987-b451f6047f28.png)

すると、以下のように、Scale部分が赤くなり、先ほど手動で追加したときと同じようになりました！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/aa2d7427-d861-a6a7-6010-1fd8a2e02c82.png)

その状態で再びPreviewしてみると、ボタンがアニメーションしていることが確認できると思います。
（どんなアニメーションをするかは実際にお試しください）

## OnTrigger
Animationの右にあるOnTriggerでは、押下したときのイベントを設定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75787/60721340-c2da-477d-d419-24d2a474dffa.png)

この辺は実現方法がいっぱいありますので、利用するかどうかは人それぞれかなと（個人的には）思います。


## 触ってみた結果
「とりあえず触ってみる」ことで、「いろんなことを試したい」と思えるようになれば、
後は必要に応じて調べたり、試行錯誤するだけとなり、勝ちが確定します。
やったぜ。

長くなりそうなんで、各機能の詳細は別で分けてしようと思います。

# 終わりに
とりあえずHundleBundle買ったはいいものの、よくわからない人へ向けて、
触ってみてもいいかな？と思う人が増えればいいな、と思い書きました。

今回書いたのは本当に一部分でしかないので、ご興味あれば一緒に勉強しましょう。

また、HunbleBundleは、セール期間とは別にアセット毎に売り切れもあるらしい（？）ので、
欲しいと思った方はお早めにご購入ください。
（謎の宣伝。）（僕は無関係なので一銭も入りません。）

# 追記
ArborとDoozyUIの連携方法を下記ブログにて掲載してくださっています！
https://gameshi.info/archives/863