トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

DoozyUI使ってみる【Unity】

DoozyUI

アニメーション付けたり、ノードでUI管理できる

assetstore.unity.com

元が65ドルで70%オフで2335円だった

bibinbaleo.hatenablog.com

VRにも対応してるって

Starting with version 2.8, DoozyUI is officialy VR READY, being capable of handling with ease multiple Canvases set to
World Space render mode.

Doozy UI 2.8 Manual

VRっていうか、WorlsSpaceのUIでも使えるのでxR全般って感じかな〜

参考

公式ドキュメント

www.doozyui.com

 

www2.slideshare.net

karukaru808.hatenablog.com

インストール

インストールしたら下のようなUI。DOToweenを入れる必要がある

f:id:bibinbaleo:20201125164737p:plain

入れたら再びInstallを押してDoozyUIを入れる?まだ入ってなかったんだ

f:id:bibinbaleo:20201125165033p:plain

結構時間かかる

サンプル

たくさんサンプルシーンがある

f:id:bibinbaleo:20201127102650p:plain

ぬるぬるしてる

f:id:bibinbaleo:20201127114821p:plain

WorldSpaceなCanvasを使っているシーンもあった

f:id:bibinbaleo:20201127102550p:plain

f:id:bibinbaleo:20201127102653p:plain

スライド見ながら作る

 こちらのスライド通りに一通り作っていく

www2.slideshare.net

操作が意外と細かいので大雑把にメモ

 

改めて振り返ると、以下の作業はUIをDoozyUIで管理するときに必要な工程も含む。

ボタンなどにアニメーション付けるだけなら、UiButton作ってインスペクタでアニメーションなどを付けるだけでいい。

データベース

Tools>Doozy>ControlPanelからデータベースが開く

f:id:bibinbaleo:20201126140321p:plain

左のViewsからNewCategoryで新しいカテゴリーを作る。

f:id:bibinbaleo:20201126140245p:plain

カテゴリーの下にViewの数だけ項目を作る

f:id:bibinbaleo:20201126140613p:plain

UI作成&設定

Create>Doozy>UIから要素を追加。

f:id:bibinbaleo:20201125165710p:plain

UICanvasはCanvas.

UIViewもuGUIのCanvas.

UICanvas

UICanvasを作る。特に設定はなし

f:id:bibinbaleo:20201126141407p:plain

UIView

UICanvasの下にUIViewを作る

ViewCategoryとViewNameにさっきデータベースで作ったものを設定する。

f:id:bibinbaleo:20201126141403p:plain

Behavior at StartにHideを設定する。UnityPlaysしたときのViewの挙動

f:id:bibinbaleo:20201126142455p:plain

HideだとCanvasにViewがおさまったうえで、非表示される。

f:id:bibinbaleo:20201126170427p:plainこれが↓のように収まる

f:id:bibinbaleo:20201126170429p:plain

アニメーション設定

ShowViewとHideViewの参画を開いて、プリセットからアニメーションを選ぶ。

f:id:bibinbaleo:20201126143222p:plain

そしてLoadPresetボタンを押すと設定される。

アニメーションのプリセットいっぱいある。

LoadPresetを押した後にPreviewAnimationの再生マークを押すとGameViewでどんな感じか再生される。(プリセットを変えたら毎回LoadPreset押さないと反映されない!)

f:id:bibinbaleo:20201126143655p:plain

何がいいんだろう~

 

設定を終えたらもう一つUIviewをコピペして作る。ViewNameは変更

f:id:bibinbaleo:20201126144401p:plain

UIButton

UIButton作って、

f:id:bibinbaleo:20201127135518p:plain

データベースで登録したやつを設定

f:id:bibinbaleo:20201126144653p:plain

OnClickのところに、アニメーション設定。

f:id:bibinbaleo:20201126145349p:plain

Trigger events after animationにチェックを入れたら、アニメーションの後に遷移などする

f:id:bibinbaleo:20201126170300p:plain

このボタンをもう一つのViewにもコピペする

Sound

OnTriggerに切り替えれば音も設定できる。

Soundyボタンの下の横棒を押したら再生される。

もしくはSoundyを押したらデータベースが開いて音を再生できる。

f:id:bibinbaleo:20201126162524p:plain

かなり色々なクリック音などがあってよかった。

ノード管理

Tools>Doozy>Nodyでノード画面が出てくる

f:id:bibinbaleo:20201126162825p:plain

左側のGraphを押して名前を付けて保存

f:id:bibinbaleo:20201126162803p:plain

右クリックからUINode作成。

f:id:bibinbaleo:20201126163006p:plain

Blueと名前を付ける。(ノードひとつが一つの状態?)

そしてOutputConnectionにNextボタンを設定

f:id:bibinbaleo:20201126163209p:plain

OnEnterNodeとOnExitNodeの+を押して設定。入ったら自分自身をShow。出たら自分のviewをHideする

f:id:bibinbaleo:20201126170156p:plain


このノードをコピーしてもうひとつ名前を変えて作る。

InとOutつなげて、OnEnterとExitを自分に合うように設定

f:id:bibinbaleo:20201126165207p:plain

GraphControllerをシーンに置く

作る

f:id:bibinbaleo:20201126165307p:plain

さっき保存したGraphをセット

f:id:bibinbaleo:20201126165849p:plain

完成

f:id:bibinbaleo:20201126170906g:plain

ボタン押したら音もなるし、ボタンもViewもアニメーションして切り替わるようになった

ノードもハイライトされる

f:id:bibinbaleo:20201126170958p:plain

f:id:bibinbaleo:20201126170956p:plain

画面タップでUI出す

上の応用として画面をタップしたらUIが出てくるというのを作ってみた。

画面タップというイベントをとれるのかよくわからなかったので、画面全体の透明なボタンを配置。

UIViewは一つ作成

f:id:bibinbaleo:20201126173504p:plain

ノードは2つ作って、両方にボタン登録

f:id:bibinbaleo:20201126173332p:plain

Noneのほうはイベントは特に登録なし

f:id:bibinbaleo:20201126173715p:plain

UIありノードにUIViewのオンオフイベント登録

f:id:bibinbaleo:20201126173712p:plain

これでできた~

もっといいやり方がありそう。

UIDrawer

↑のやつはUIDrawerというのを使えば、少し操作は違うけどノードを使わずにできるということを知った

f:id:bibinbaleo:20201127141746p:plain

横からメニューを引き出すみたいな操作ができる

f:id:bibinbaleo:20201127142106p:plain

 

引き出す方向は変えられる

f:id:bibinbaleo:20201127141730p:plain

引き出る割合はContainerのPercentageの数字で変える

f:id:bibinbaleo:20201127141845p:plain

UIPopup

アラートとかのポップアップも作成できる。

f:id:bibinbaleo:20201127161416p:plain

でも同じようにノードから管理できるかと思ったらできなさそう・・・。

 

こちらの記事を見ると、プレハブとして作成してスクリプトから呼び出すらしい。

qiita.com

データベースにもプレハブとして登録

f:id:bibinbaleo:20201127161600p:plain

上の記事をまねたら呼び出せた。

(おまけ)UnityのUIBuilder

DoozyUIのUI管理機能はunityのUIToolKitに将来的に置き換わる技術かもしれない的なことを書いている記事があった

先日のCEDECやUniteにて、UIBuilderについて告知がありました。
(UIElementsについてはそれよりも前からアナウンスがありますが。)

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

結論から言うと、今後DoozyUI(というかuGUI)はこれらの技術に置き換わり、使えなくなる可能性があります。

DoozyUIを触ってみた - Qiita

 UIBuilderのこと何もわからない;;

今はpreviewでエディタ拡張のUI作るのにつかわれているというイメージ。そのうちuGUIに置き換わるって誰かが言ってた。

www.klab.com

docs.unity3d.com

どう置き換わるのかよくわからないん~

最後に

DoozyUIのアニメーションや音の機能はすごく良いけど、UI管理とか遷移をノードやデータベースでするのはめんどくさいような気がする~

単発や個人のプロジェクトならいいけど、複数人で長期間使っていくプロジェクトで使っているとこあるのかな?

全部c#に置き換えるってなったら大変じゃないのかな