iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
自我挑戰組

探索Unity中的視覺化製作工具系列 第 13

Doozy讓狀態機的概念發揮到極致

  • 分享至 

  • xImage
  •  

Doozy版本2最大的貢獻就是用Unity Inspector將複雜的Tween處理成可以直接調整,光是這樣的功能就嘉惠到不少發程式設計的開發者。而這次進入到版本3後,除了修正、改進Tween的設定外,最引人注目的自然就Nody的功能。

Nody的名稱多半是為了要配合其產品的命名而取名的,其它像是Soundy、Touchy等,都是在已知的名稱後加上y。Nody若是除去命名上的規則,它其是就是Node,節點的概念。也就是說第三版最主要的功能就是加上以圖和節點做為呈現的狀態機功能。

前面提及Bolt時也談過了狀態機的概念和用法。看起來若是同時擁有這二套擴充時,考慮到泛用性和不過度使用擴充為前提,單選一套Bolt可能就可以處理所有UI的狀態。但Doozy版本3可是2019年2月左右才出來,這時市場上早已充斥了許許多多號稱為視覺化狀態機的擴充。許多強敵環伺的情況下Doozy還是執意進行視覺化狀態機的導入,若沒有一定的信念,那只能稱匹夫之勇。

然而,同時有二套時,會發現Doozy不僅不是多餘的產物,且在製作UI的情境上,Doozy表現都不會輪給Bolt,而它直觀的操作,反而會成為製作UI的首選。在UI開發上,率先考量的會是Doozy而其它非UI的製作才是以Bolt為重。

這次的範例就用遊戲中最基本的流程來展示。Nody是版本3才加上去的,所以原有版本2基本的設定都要進行後才能順利往下。產生三個View,分別為主選單、遊戲主UI和暫停選單,用顏色進行簡易區別並於每個UI中放入對應按鈕。

開啓Nody後,看到如下空的圖示

按下Graph後會先被要求存檔,存完後利用現有的三個UI製作了三個代表View的狀態。這個Graph由於是Unity的ScriptableObject,所以要透過一個物件,並在上面擺上Graph Controller的元件,進行該Graph的引用。

這裡的Graph Controller在單一個場景上並不限一個,多個也可以。在Nody的設計上,可以進行

  • 一個Canvas對應一個Graph
  • 一個Canvas對應多個Graph
  • 多個Canvas對應一個Graph
  • 多個Canvas對應多個Graph

越多的Graph會越複雜,管理上要不容易,不過Nody本身不做限制,由開發者自行管理。而此範例不用太複雜的關係進行,就用多數時一個Canvas對應一個Graph做展示。

執行時UI會對應到相同的View狀態,在開發時可以隨時藉由這裡了解到是否現在處於正確的View狀態,達到快速開發、除錯的目的。

用Nody來進行View與View之間的串連也就是狀態串連狀態的應用,而對應的按鈕會發送事件,事件會進行狀態之間的轉移。除了基的狀態是以View為主外,它另外提供發事件、從任何事件轉換等狀態。

用另一個稍微複雜的例子來說明。在這個Graph中,按下Quit按鈕時會發送一個事件-Going to Quit,而於轉換到Main Menu狀態那多加了一個接收事件-Clean Up後轉換的狀態。

這樣的做法可以由Doozy端傳送一個事件到程式碼那處理,並於處理完成後再傳送一個事件到Doozy端。程式一碼片段大致如下,接收端註冊事件處理機制,而於處理機制中決定要如何處理,並於其中再回送一事件。

void OnEnable()
{
    Message.AddListener<GameEventMessage>(OnDoozyMessage);
}

void OnDisable()
{
    Message.RemoveListener<GameEventMessage>(OnDoozyMessage);
}

private void OnDoozyMessage(GameEventMessage message)
{
    if (message != null)
    {
        // Handle message according to the name
        Message.Send(new GameEventMessage("Game Clean Up", refGO));
    }
}

透過了視覺化的Tween,UI設計人員不用依靠撰寫程式就可以調出有趣的UI動作。透過了Nody的定義,UI設計人員可以直接決定UI的進程,由A到B再回到C等複雜關聯性。並輔佐事件的傳遞和接收,讓程式人員可以進行更精確的控制。其特有的UI狀態定義,更是簡化了不少其它視覺化工具帶來的繁瑣。

這種種的優勢都讓Doozy可以在2019脫穎而出,完全不受其它視覺化工具的壓制,對於UI製作上可謂最佳的選擇。但它的優勢不僅止於此,對於無形的UI優化工,也是版本3很重要的一項功能。對於使用Doozy的開發者來說間接的享受到Doozy優化UI的努力成果。

Yes

另一點Doozy的優勢是在於大量的教學影片,對於想要深度使用的開發者,這些影片絕對是不可以錯過的。

今日測試用的專案放罝在Git Repo中的doozy-nody目錄裡。可於拿取專案後自行滙入Doozy了解。

對於Doozy的使用就先告一段落,接下來會試著切進著色器視覺化編輯工具的研究中。


上一篇
用Doozy讓UI動作變得更加容易
下一篇
展開Shader視覺化工具的了解
系列文
探索Unity中的視覺化製作工具30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言