- DoozyUI
- 参考
- インストール
- サンプル
- スライド見ながら作る
- データベース
- UI作成&設定
- ノード管理
- GraphControllerをシーンに置く
- 完成
- 画面タップでUI出す
- UIDrawer
- UIPopup
- (おまけ)UnityのUIBuilder
- 最後に
DoozyUI
アニメーション付けたり、ノードでUI管理できる
元が65ドルで70%オフで2335円だった
VRにも対応してるって
VRっていうか、WorlsSpaceのUIでも使えるのでxR全般って感じかな〜
参考
公式ドキュメント
インストール
インストールしたら下のようなUI。DOToweenを入れる必要がある
入れたら再びInstallを押してDoozyUIを入れる?まだ入ってなかったんだ
結構時間かかる
サンプル
たくさんサンプルシーンがある
ぬるぬるしてる
WorldSpaceなCanvasを使っているシーンもあった
スライド見ながら作る
こちらのスライド通りに一通り作っていく
操作が意外と細かいので大雑把にメモ
改めて振り返ると、以下の作業はUIをDoozyUIで管理するときに必要な工程も含む。
ボタンなどにアニメーション付けるだけなら、UiButton作ってインスペクタでアニメーションなどを付けるだけでいい。
データベース
Tools>Doozy>ControlPanelからデータベースが開く
左のViewsからNewCategoryで新しいカテゴリーを作る。
カテゴリーの下にViewの数だけ項目を作る
UI作成&設定
Create>Doozy>UIから要素を追加。
UICanvasはCanvas.
UIViewもuGUIのCanvas.
UICanvas
UICanvasを作る。特に設定はなし
UIView
UICanvasの下にUIViewを作る
ViewCategoryとViewNameにさっきデータベースで作ったものを設定する。
Behavior at StartにHideを設定する。UnityPlaysしたときのViewの挙動
HideだとCanvasにViewがおさまったうえで、非表示される。
これが↓のように収まる
アニメーション設定
ShowViewとHideViewの参画を開いて、プリセットからアニメーションを選ぶ。
そしてLoadPresetボタンを押すと設定される。
アニメーションのプリセットいっぱいある。
LoadPresetを押した後にPreviewAnimationの再生マークを押すとGameViewでどんな感じか再生される。(プリセットを変えたら毎回LoadPreset押さないと反映されない!)
何がいいんだろう~
設定を終えたらもう一つUIviewをコピペして作る。ViewNameは変更
UIButton
UIButton作って、
データベースで登録したやつを設定
OnClickのところに、アニメーション設定。
Trigger events after animationにチェックを入れたら、アニメーションの後に遷移などする
このボタンをもう一つのViewにもコピペする
Sound
OnTriggerに切り替えれば音も設定できる。
Soundyボタンの下の横棒を押したら再生される。
もしくはSoundyを押したらデータベースが開いて音を再生できる。
かなり色々なクリック音などがあってよかった。
ノード管理
Tools>Doozy>Nodyでノード画面が出てくる
左側のGraphを押して名前を付けて保存
右クリックからUINode作成。
Blueと名前を付ける。(ノードひとつが一つの状態?)
そしてOutputConnectionにNextボタンを設定
OnEnterNodeとOnExitNodeの+を押して設定。入ったら自分自身をShow。出たら自分のviewをHideする
このノードをコピーしてもうひとつ名前を変えて作る。
InとOutつなげて、OnEnterとExitを自分に合うように設定
GraphControllerをシーンに置く
作る
さっき保存したGraphをセット
完成
ボタン押したら音もなるし、ボタンもViewもアニメーションして切り替わるようになった
ノードもハイライトされる
画面タップでUI出す
上の応用として画面をタップしたらUIが出てくるというのを作ってみた。
画面タップというイベントをとれるのかよくわからなかったので、画面全体の透明なボタンを配置。
UIViewは一つ作成
ノードは2つ作って、両方にボタン登録
Noneのほうはイベントは特に登録なし
UIありノードにUIViewのオンオフイベント登録
これでできた~
もっといいやり方がありそう。
UIDrawer
↑のやつはUIDrawerというのを使えば、少し操作は違うけどノードを使わずにできるということを知った
横からメニューを引き出すみたいな操作ができる
引き出す方向は変えられる
引き出る割合はContainerのPercentageの数字で変える
UIPopup
アラートとかのポップアップも作成できる。
でも同じようにノードから管理できるかと思ったらできなさそう・・・。
こちらの記事を見ると、プレハブとして作成してスクリプトから呼び出すらしい。
データベースにもプレハブとして登録
上の記事をまねたら呼び出せた。
(おまけ)UnityのUIBuilder
DoozyUIのUI管理機能はunityのUIToolKitに将来的に置き換わる技術かもしれない的なことを書いている記事があった
先日のCEDECやUniteにて、UIBuilderについて告知がありました。
(UIElementsについてはそれよりも前からアナウンスがありますが。)Unity2019.3バージョンで、既にPreview版として触ることができます。
(ここでは本筋から外れるので、詳細には書きません)結論から言うと、今後DoozyUI(というかuGUI)はこれらの技術に置き換わり、使えなくなる可能性があります。
UIBuilderのこと何もわからない;;
今はpreviewでエディタ拡張のUI作るのにつかわれているというイメージ。そのうちuGUIに置き換わるって誰かが言ってた。
どう置き換わるのかよくわからないん~
最後に
DoozyUIのアニメーションや音の機能はすごく良いけど、UI管理とか遷移をノードやデータベースでするのはめんどくさいような気がする~
単発や個人のプロジェクトならいいけど、複数人で長期間使っていくプロジェクトで使っているとこあるのかな?
全部c#に置き換えるってなったら大変じゃないのかな