動画と一緒にみてね : https://www.youtube.com/watch?v=SSv9zoM1Rn4 【年末だよ】Unity お・と・なのLT大会 2019 https://meetup.unity3d.jp/jp/events/1178

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

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

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

4. スライドについて
• Animation gifや動画で説明している部分があります
• Unity Learning Materialで公開される（予定）の講演動画を合わせて
参照してください
• 動画へのリンクはスライド内に書いてあります
• Gif画像は以下のURIからまとめて参照できます
• https://twitter.com/toRisouP/status/1203232838671163393

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

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

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

8. DoozyUI ?

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

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

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

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

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

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

16. 導⼊⽅法

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

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

19. DoozyUIの設定パネルの開き⽅

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

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

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

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

24. サンプル

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

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

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

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

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

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

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

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

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

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

35. 5.Viewを設定する
Behavior at StartをHideかPlay Show Animationにしておく
・Do Nothing
・Hide（描画位置を補正した上で⾮表⽰にする）
・Play Show Animation
Hideにしておくと再⽣時に⾃動的にCanvas内にViewを再配置してくれる
（CanvasからViewをズラして、Canvasの外で調整とかしていたときに便利）

36. 6.Viewのアニメーションを設定する
• Viewの表⽰・⾮表⽰時の
アニメーションを設定する
• 設定しないとエラーになる
• プリセットから選ぶのがかんたん
1. Show View / Hide View を開く
2. Animationタブを選択
3. Presetを選んで「Load Preset」
※Animation gif

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

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

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

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

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

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

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

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

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

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

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

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

49. 13. UI Nodeを追加

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

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

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

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

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

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

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

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

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

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

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

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

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

63. その他 知⾒

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

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

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

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

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

70. まとめ

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

72. Doozy UI 使おうぜ！