# FairyGUI 運用策略

[外部連接](https://hackmd.io/@chengko/HkCh6FhI_)

## 原工作流?

企劃->企劃: 產出含UI示意圖的需求文件
企劃->美術: 請美術製作暫代圖
美術->程式: 請程式用暫代圖組出簡易UI並實作功能
美術->美術: 製作實際UI圖
企劃->程式: 定義多語言ID請程式套用
程式->美術: 功能實作完成請美術換皮
美術-->程式: 呈現方式變更，請程式配合做對應修改

## 分時(理想)工作流

企劃->企劃: 產出含UI示意圖的需求文件
企劃->美術: 請美術製作UI
美術->程式: 請程式修改UI邏輯元件並實作功能
企劃->程式: 定義多語言ID請程式套用

## FairyGUI工作流其一

企劃->企劃: 產出含UI示意圖的需求文件
企劃->美術: 請美術製作含程式功能的簡易UI
美術->企劃: 請企劃設好介面文字(多語言)及設定變數給程式設值。
美術-->美術: 多語言含圖檔，一併處理
美術->程式: 請程式製作功能
企劃->美術: 請美術製作實際UI
美術->美術: 使用FairyGUI幫簡易UI換皮
美術-->美術: 輸出到Unity製作粒子特效

#### 策劃
+ 需要將UI可能的狀態變化定義完整。
+ 需要了解FairyGUI多語言控制介面(靜態)文字的方式，及如何設定變數給程式替換(動態)文字。

#### 美術
+ 基礎的置換圖檔/元件操作。
+ 需要了解FairyGUI各種元件的用途。
+ 需要了解FairyGUI控制器的運作方式，設定好UI控制器可能的狀態變化，並為不同狀態製作動態。
+ 版面適配調整。

## FairyGUI工作流程二

企劃->企劃: 產出需求文件
企劃->企劃: 使用FairyGUI組裝含多語言與程式功能的簡易UI
企劃->程式: 請程式製作功能
企劃->美術: 請美術製作實際UI
美術->美術: 使用FairyGUI幫簡易UI換皮
美術-->美術: 輸出到Unity製作粒子特效

#### 策劃
+ 需要了解FairyGUI各種元件的用途。
+ 需要了解FairyGUI多語言控制介面(靜態)文字的方式，及如何設定變數給程式替換(動態)文字。
+ 需要了解FairyGUI控制器的運作方式，設定好UI控制器可能的狀態變化，交由程式控制，可能暫時看不出效果，等美術置換圖檔及製作動態完成就能正常顯示。
#### 美術
+ 基礎的置換圖檔/元件操作。
+ 需要了解FairyGUI控制器的運作方式，為不同狀態製作動態。
+ 版面適配調整。

## FairyGUI工作流其三

企劃->企劃: 產出含UI示意圖的需求文件
企劃->程式: 請程式使用FairyGUI組裝含多語言與程式功能的簡易UI
程式->美術: 請美術製作實際UI
美術->美術: 使用FairyGUI幫簡易UI換皮
美術-->美術: 輸出到Unity製作粒子特效
程式->程式: 實作功能

#### 策劃
+ 需要將UI可能的狀態變化定義完整。

#### 美術
+ 基礎的置換圖檔/元件操作。
+ 需要了解FairyGUI控制器的運作方式，為不同狀態製作動態。
+ 版面適配調整。
#### 程式
+ 需要了解FairyGUI各種元件的用途。
+ 需要了解FairyGUI多語言控制介面(靜態)文字的方式，及如何設定變數替換(動態)文字。
+ 需要了解FairyGUI控制器的運作方式，設定好UI控制器可能的狀態變化。

## 學習成本
+ 企劃
+ ......?
+ 美術
+ 官方說法是編輯器操作邏輯和Photoshop很像，要請美術實際確認。
+ 有[工具](https://www.fairygui.com/docs/editor/export#%E4%BB%8Epsd%E4%B8%AD%E7%94%9F%E6%88%90ui)能將PSD檔直接轉換成FairyGUI的資源檔，遵循命名規則就能自動生成對應的元件，要請美術測試。

+ 程式學習經驗
+ 觀看網路上[教學影片](https://www.bilibili.com/video/BV1Xb411c7Lj?p=1)入門（教學者是程式）。
+ 大概花費2天時間學到的程度應該能滿足工作流3對程式的要求。
+ 使用**工作流3**應能降低整體學習成本，亦能有效增進開發效率，**前提有足夠的程式人員**。

## 缺陷應對
#### 特效/粒子系統無法直接在FairyGUI編輯器裡所見即所得

+ 維持在Unity內編輯的做法，程式可協助修改SDK自動掛載特效。
+ 在運行期編輯特效無法儲存的問題可使用Unity的Preset功能解決，可以將元件上的目前的所有參數存成一個樣版檔，只要讀取樣版就能把之前調整的參數還原回元件上。

## 優勢

#### 虛擬列表
+ 可視為一套完整的列表式元件的解決方案。
+ 美術可所見即所得看到列表的運行時效果，產出給程式時不必清空內容。
#### 狀態控制
+ 自定義狀態的邏輯類似Unity的AnimationController，而Unity原生的UI系統有狀態控制的元件很有限（Button、Toggle）。
#### 多語系&文字
+ 統一文字介面，美術變更文字成像元件時無須更動代碼
+ 企劃無須為介面文字定義ID，程式亦無須知道任何細節
+ 可設定變數給程式控制動態文字，直接預覽運行時效果，產出給程式時不必清空內容。
#### 分支
+ 分支的特性在預先做未來的新功能有需要更動到原本UI時，可以直接在分支修改，切換到分支時只是把有修改的部份替換掉，主幹不受影響。
+ 運用在多語系時，針對同一個元件可任意選擇不同方案（Text、BmpFont、Image)。