Doozy UI 使おうぜ! #unity_lt

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Doozy UI 使おうぜ！
2019/12/07
Unity お・と・なのLT⼤会
とりすーぷ

⾃⼰紹介
• 「とりすーぷ」
• @toRisouP
• 株式会社バーチャルキャスト開発
• xR開発
• 最近はサーバ開発
• Microsoft MVP
for Developer Technologies 2018〜2020

今回の話
• DoozyUIを使ってみたら便利だったって話

スライドについて
• Animation gifや動画で説明している部分があります
• Unity Learning Materialで公開される（予定）の講演動画を合わせて
参照してください
• 動画へのリンクはスライド内に書いてあります
•...

なんでこのアセットを選んだの？

なんでこのアセットを選んだの？
•何故か持っていたから

なんでこのアセットを選んだの？
•何故か持っていたから
•Humble Unity Bundle 2019に付いてきたから
• 2019/10くらいにやってた$15寄付でいろいろアセットが付いてくるセール
• Dynamic Boneとかいろい...

DoozyUI ?

UIのすごいシステム
• UIの表⽰・アニメーション・サウンドの管理システム
• uGUI & DoTweenベース
• UnityEditor上でノンコーディングでUIの設定ができる
• 豊富なアニメーションプリセット＆効果⾳集

できること
• Canvas遷移の管理
• ドロワーUIの作成
• ポップアップUIの作成
• ボタンにアニメーションや効果⾳を設定
• カラーテーマの管理・切り替え

ステートマシンを使ったUIの遷移
https://drive.google.com/open?id=1HJxrRGQnIcvdn-XT7OdBwdPmwxXnsLF1

ドロワーの作成
https://drive.google.com/open?id=1tlD1P2A0AlRLvcz0AyjLowd1qjKDLki4

ポップアップの作成
https://drive.google.com/open?id=1dt83BMnHJ0rsBEiynhVbb1O4AlCi5_2J

ポップアップの使⽤例
https://twitter.com/toRisouP/status/1198528066177257473

導⼊⽅法

導⼊⽅法
1. AssetStoreからインポート
2. DoTweenを導⼊する
3. TextMeshProを導⼊する（オプション）
4. Database設定をする
5. UIを作る

ウィザード
• DoozyUIの初回セットアップ時にウィザードが出る

DoozyUIの設定パネルの開き⽅

推奨：TextMeshProの導⼊
• DoozyUIの設定パネルからTextMeshProを有効化
• パッケージマネージャから導⼊してもOK

Database
• DoozyUIのシステムで⽤いるデータを登録できる
• Canvas/Viewの分類
• ボタンの分類
• 効果⾳の分類
• ドロワー/ポップアップの分類
• テーマの設定

ボタンとかをグループ分けして登録できる

CanvasとView
• Canvas : 描画のrootになるuGUIの Canvas
• View : UIの表⽰単位を制御するuGUIの Canvas
• 「どのCanvasで、何のViewを表⽰するか」

サンプル

例：ボタンを押すと交互にView遷移する

1. DatabaseにViewを設定
2画⾯あるのでそれぞれRedとBlueという名前で設定

2. DatabaseにButtonを設定
交互に画⾯遷移するだけなので
「Nextボタン」1つを2つのViewで使い回す想定

3. Canvasを⽤意する
HierarchyViewで右クリック

3.Canvasを⽤意する
できたCanvas→
DoozyUIのコンポーネント
がついてる→

4.Canvasの設定をする
ここを押すとGameObjectの
名前が⾃動変更される

5.Viewを⽤意する
Canvasを選んで右クリック

5.Viewを⽤意する
View(実体はuGUI Canvas)が作られる

5.Viewを⽤意する
ここを拡⼤

5.Viewを設定する
ここでDatabaseに登録したViewを指定する

5.Viewを設定する
Behavior at StartをHideかPlay Show Animationにしておく
・Do Nothing
・Hide（描画位置を補正した上で⾮表⽰にする）
・Play Show Animation
Hide...

6.Viewのアニメーションを設定する
• Viewの表⽰・⾮表⽰時の
アニメーションを設定する
• 設定しないとエラーになる
• プリセットから選ぶのがかんたん
1. Show View / Hide View を開く
2. Animatio...

7.もう⼀個View⽤意する
ViewをDuplicateして、適当に背景の⾊を⾚くしておく
この辺の設定を忘れずに
（RedViewを選ぶこと）
↓

7.もう⼀個View⽤意する
Viewが重なっていると操作しにくいので、適当にViewを移動させておくと楽
このときBehavior at Startが「Hide」か「Play Show Animation」なら
再⽣時に⾃動的にCanvas内...

8.ボタンを配置する
Viewを右クリック

8.ボタンを配置する
よしなに配置

9.ボタンを設定する
Databaseで登録したボタンを選ぶ
「Next」を割当

10.ボタンのOnClickの挙動を設定する
• OnClick時のアニメーション
• プリセットから選ぶのが⼀番かんたん
※Animation gif

10.ボタンのOnClickの挙動を設定する
• 効果⾳も追加しておく
• プリセットから選ぶと（ry
※Animation gif

11.もう⼀個のViewにもボタン配置

12. ステートマシンを作る
Unityのツールバーから

12. ステートマシンを作る

12. ステートマシンを作る
ここを押して新しいステートマシンを作って保存する

12. ステートマシンを作る
ステートマシンが作られるとこうなる

13. UI Nodeを追加

13. UI Nodeを追加
UI Nodeを作ったら最初は勝⼿にStart Nodeと連結する

14. UI Nodeの設定を変更
• 「Next」ボタンを⼊⼒イベントにする
UI Nodeを選択した状態でInspector Viewを開くとNodeの設定ができる
ここで「Next」ボタンをUI Nodeに割り当てる

14. UI Nodeの設定を変更
• このままだとわかりにくいのでNodeに名前をつけておく
Blue Node

15. もう⼀個UI Nodeを作る
右クリックでコピペが楽
※Animation gif

16. 2つのNodeをつなげる
• ⻘：出⼒、⻩：⼊⼒
• D&Dで結線すればOK、ミスったときは「Alt」で削除モード
※Animation gif

17. Nodeのふるまいの設定
Blue Node →
このノードに⼊ったら
「Blue Viewを表⽰する」
このノードから出たら
「Blue Viewを隠す」
同じような設定をRed Nodeにも忘れずに

17. Nodeのふるまいの設定
Nextボタンを押すと
RedNodeに遷移する
Nextボタンを押すと
BlueNodeに遷移する
In: RedViewを表⽰する
Out: RedViewを隠す
In: BlueViewを表⽰する
Out...

18. Graph Controllerをシーンに配置する
これがScene上にないと動かない
↓さっき作って保存したステートマシンを指定

19. 完成、だが…？
ボタンのアニメーションとViewの遷移が被ってない…？
https://drive.google.com/open?id=1pG0PtM9oMdum6a0YaJM
T34LDYvjO8Aay

20.ボタンのアニメーション調整
• ボタン設定のココにチェックする

21.ボタンのアニメーション調整
https://drive.google.com/open?id=1n2WGibZWnWnnvzvMY0uR8pO9viH8M18t

22.いろいろPresetを試してみよう
https://drive.google.com/open?id=1HXef2wqsVkK_Sg3FnE2Z5Pl5E_tX5NU0

サンプル解説は以上！
• ノーコーディングでここまでできる！
• プリセットを選ぶだけでっぽいものが簡単につくれる
• ステートマシンでいろいろできる！
• クリックだけでなく、ボタン⻑押しや連打判定も可能
• スクリプトからEventを⾶ばし...

その他知⾒

Q. チュートリアルはあるの？
A. 公式サイトにまとまってる
• Youtubeの動画を⾒るのが良い

Q. Assembly Definitions Fileは定義されてる？
A. 「⾃分で定義する必要はあるが、対応はしている」
• adfを⽤意する⼿順については動画で公開されている
• https://www.youtube.com/watc...

Q. スクリプトとの連携は？
A. 「ベースはuGUIだから！」
• 既存のスクリプトはそのまま使える
• UniRxとの連携もOK

Q. ポップアップの動的⽣成ってどうやるの？
A. スクリプトが必須だが、簡単にできる
• DoozyUIのシステム経由で設定する
• TextとButtonの表⽰を上書きする程度ならこっちが楽
• ⾃前のスクリプトで設定する
• 画像を差し替...

⾃作コンポーネントでポップアップを表⽰するサンプル
仕組みとしてはPrefabをInstantiateしているだけ！
Prefabに⾃作コンポーネントを貼り付けておけばあとは⾃由⾃在
※Animation gif

まとめ

DoozyUI、いいぞコレ
• それなりの⾒た⽬のUIが簡単に作れる！
• プリセットが豊富でうれしい！
• Viewの遷移がステートマシンで設定できてたすかる！
• ボイラープレート化したコードを都度実装する⼿間がなくなる

Doozy UI 使おうぜ！

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1047773 views
Storytelling For The Web: Integrate... by Chiara Aliotta 961940 views
Artificial Intelligence, Data and C... by OECD Directorate ... 891371 views
How to Leverage AI to Boost Employe... by SocialHRCamp 375955 views
2024 State of Marketing Report – by... by Marius Sescu 213320 views
Everything You Need To Know About C... by Expeed Software 232066 views

View on Slideshare

1 of 72 Ad

View on Slideshare

1 of 72 Ad