Just basic introduction & tutorial

1. DoozyUI
v3.13
Assetstore 4顆星，233則評論
2021/9/7, River

2. 概念
• UI框架，基於 Unity UGUI
– UIView – 主要介面容器(Canvas)
– UIButton/UIToggle – 包裝過的 Button/Toggle
– UIDrawer – (navigation)side bar視窗
– UIPopup – 彈出視窗
– Progressor – 進度條控制
– … … 一堆元件/功能我也還沒研究
• 基於 Dotween 動畫表現
• Nody – 圖形化 UI flow 編輯工具

3. 框架
• Nody 圖形化 UI flow 編輯器
• UIAction – 事件相關
• Soundy – 聲音管理
• Touchy – 觸控管理
• Themes – UI主題管理

4. Dotween
• C#版本實現 Tween動畫
• Tween 動畫到底是什麼鬼
– https://easings.net/

5. UIButton教學 (0)
• Hierarchy視窗新建選單: Doozy/UI/UIButton
– 產生 UIButton物件；MasterCanvas如果尚不存在會自動
產生

6. UIButton教學(1)
• Unity內建元件: RectTransform, CanvasRenderer,
Image, Button
• DoozyUI元件: UIButton

7. UIButton教學(2)
• Button Category, Button Name (for Nody)
• Button Label
• 各種事件反饋動畫效果設定
– OnPointerEnter/OnPointerDown/OnPointerUp/OnPointerExit
(指標進入/按下/放開/離開)
– OnClick/OnDoubleClick/OnLongClick/OnRightClick (點擊/觸控)
– … …

8. UIButton教學(3)
• (對某個事件編輯)Animation設定
– AnimationType: Punch(表演完恢復) / State(表演後狀態被
覆寫) / Animator (使用 AnimatorController)
– Move: 位移動畫設置
– Rotate: 旋轉動畫設置
– Scale: 縮放動畫設置
– Fade: 淡入淡出設置
– 按 Preview Animation可預覽
– State模式下可調整動畫模式 (Ease/Curve)

9. UIButton教學(4)
• Animation Presets (預設動畫組)
– 選 Preset Category  選 Preset Name  按 Load Preset

10. UIButton(5)
• 對事件編輯 OnTrigger設定
– Sound
– Effect (Particle System)
– Animators
– Game Events / Unity Events

11. UIView教學(0)
• UIView 為一組使用者介面最上層的容器
• Hierarchy視窗新建選單: Doozy/UI/UIView
– 產生 UIView物件；MasterCanvas如果尚不存在會自動產
生
• NODY 控制 UI flow 的主要對象單位

12. UIView教學(1)
• Unity內建元件: RectTransform, Canvas,
CanvasRaycaster, CanvasGroup, CanvasRenderer,
Image
• DoozyUI元件: UIView

13. UIView教學(2)
• View Category, View Name (for Nody)
• Behaviour at Start (初始化後的行為), Custom Start
Position (客製起始位置)
• 各狀態表演效果設置
– Show View (登場)
– Hide View (退場)
– View Loop (登場後循環表演)
– … …

14. UIView教學(3)
• 事件之效果設置，類似 UIButton 流程
– (Show View) Animation
• 編輯 Move In / Rotate In / Scale In / Fade In
• 或指定Presets (選 Preset Category  選 Preset Name  按 Load
Preset)

15. UIView教學(4)
• 事件設置
• @Start / @Finish
– Sound
– Effect (Particle System)
– Animators
– Game Events / Unity Events

16. NODY教學(0)
• 控制 UIView 之間的 UI flow
• Scene 裡面先建立 (Doozy/Nody/Graph Controller)
物件
• Graph Controller 元件中 Graph Model 指定 Graph
檔案 (由 Nody 編輯器產生)
– 按 Open Nody 開啟 Nody 編輯器

17. Nody教學(1)
• 點 Graph 按鈕建立新的 Graph Model 檔案
(Test.asset)
• 此 Test.asset 指定給 Graph Controller 的 ‘Graph
Model’ 欄位

18. Nody教學(2)
• 從 Start Node 出發
• 新增 UINode 代表一個 UIView物件
– ON ENTER NODE / ON EXIT NODE 編輯進入與離開該
Node 時的 UIView 控制
• Show/Hide UIView
– OUTPUT CONNECTIONS: 按鈕關聯的 UI flow 控制

19. Nody教學(3)
• 需要先在 (Tools/Doozy/Control Panel) DoozyUI 設置
視窗中設定 Views Names / Buttons Names
– DoozyUI Database 設定好這些 Name 之後 Nody 才能有
效透過它們控制 UI flow
• Views Database
• Buttons Database
• … …

20. Nody教學(4)
• App 啟動後由 Start Node 自動進入 (UINode) Main
Window
• 進入 Main Window ，按 Setting 按鈕後會進入
Setting Window；按 Slot 按鈕會進入 Slot Window
• Setting Window/Slot Window 當下按下 Back 鍵會回
到 Main Window

21. Nody教學(5)
• UINode 節點按下 + 按鈕新增一組對外連結按鈕
• Main Window (UINode) 設置
– 新增 Setting & Slot 按鈕
– ON ENTER 時顯示 (UIView)Main Window
– ON EXIT 時隱藏 (UIView)Main Window

22. Nody教學(6)
• (UINode)Main Window 節點對應的 ‘View – Main
Window’ 物件設置
– UIView 元件: View Category & View Name
• 其子物件 ‘Button – Slot’ 與 ‘Button – Setting’設置
– UIButton 元件: Button Category & Button Name

23. Nody教學(7)
• 同理 (UINode)Setting Window設置；(UINode)Slot
Window設置

24. 結論
• DoozyUI 專注於管理 UI (UGUI)
• NODY 圖形化編輯器可讓企劃/美術(所有人)
參與 UI flow 開發
• 非 UI (Sprite/Spine) 物件並不支援其動畫控
制。