一、前言
游戲開發是一個復雜並且龐大的工程，為了保證游戲開發的效率和質量，我們往往需要從多方面進行努力。例如，選擇穩定且長期支持的引擎版本；使用經過商業項目驗證后或者有大量使用者的游戲框架；使用部分現有的開源組件，節約開發時間。而這次以點入手，從小的方面出發，推薦一些的開源組件，避免重復造輪子，能讓我們開發事半功倍。（擠出一半時間學習摸魚學導論）這次先介紹 UI 相關的的三個 PSD2UGUI 、LoopScrollRect 和 DoTween 項目。
二、PSD2UGUI
1. 項目介紹
如果你水過一些游戲開發的群，會經常能看見一個帶有調侃性質的稱呼，「拼圖仔」。雖然帶有誇張成分，但是我相信每一個參與游戲開發的同學，肯定是做過拼界面的任務。雖說有些大的項目組有資源策划的存在，專門進行UI資源的拼接和管理，但是大家其實都會被拼界面的任務煩惱。如果是個人項目，更會花費大量的時間在麻煩的拼界面和綁定資源上。這里就推薦一個能夠從一定程度上舒緩大家疼痛的項目。quick_psd2ugui
該項目能夠讓我們在 PhotoShop 上按照一定的規則拼接界面，然后把保存的 PSD 文件，直接轉成能夠使用在 Unity 中的 UGUI 界面。
2. 項目演示
2.1 導入工程
從 Github 上將工程下載下來后，需要把腳本文件導入到 PS 中。即把腳本文件 Export PSDUI.jsx 拷貝至「PS 安裝目錄\Presets\Scripts」目錄下。
同樣的需要把 PSD 項目中 Asset 下的代碼導入到 Unity 的項目中。
2.2 創建 PSD
作為演示，我們這里做一個獎勵界面。打開 PS，搭建一個滑動列表的界面。
這個界面的層級結構需要按照一定的規則去搭建，具體內容可以查看官方文檔，路徑為 「 psd2ugui\Assets\PSD2UGUI\Doc 」。這里只是簡單搭建演示下滑動列表的規則要求。
以「@」符號開始，后面填寫的就是程序需要識別的關鍵詞和參數。這里我們用到了兩種控件，按鈕 Button 以及滑動列表 ScrollView。
在 ScrollView 后通過字符「:」分割后續填入的就是滑動列表的參數。這里填寫的是 V，代表滑動方向為垂直方向。Cell 后的 LE 對應 UGUI 的 LayoutElement。加該關鍵字后，滑動列表的子項(item)會自動布局。需要注意的是我們需要通過一張圖片表示滑動區域的大小，需要創建一個名為 @Size 的圖層，使用一張圖片表示覆蓋區域。rewardProp 后面的 Common 表示命名同一個 PSD 中多次用到的圖，以后只會切一張圖，不會產生多個資源。
保存我們創建好的 PSD 文件。PS 界面選擇「文件」-「腳本」-「Export PSDUI」，選擇導出的目錄，就能生成切圖和配置文件。
2.3 生成 UGUI
打開 Unity 項目，在菜單欄選擇「 QuickTool 」-「 PSDImport 」。（如果你沒有找到，請先確定是否將 PSD2UGUI 項目導入到了工程中，再查看是否存在報錯情況）
選擇我們剛才導出目錄下的 LoopScroll.xml 配置文件。就能夠自動生成和 PS 中相同的 UGUI 界面。
scroll 由於我們設置了 ScrollView 會自動生成對應的 Viewport 和 Content，並且移動范圍大小和我們最開始設置的 @Size 大小一致。
我們就可以將生成的 UI 界面 LoopScroll，生成預制體，然后通過我們自己的 UI 框架進行加載和運行。
2.4 自動生成 UI 腳本(可選)
這個項目還提供了可供參考的快速綁定實現方案。在 Unity 中執行 「 QuickTool 」-「 QuickGenCode 」，會打開以下界面，依次按照圖片中的內容執行。
步驟 4 和步驟 7 可以二選一。步驟 4 是通過 transform.Find 方法進行綁定，步驟 7 是把腳本掛載在對應的 UI界面（LoopScroll 節點上），直接綁定 UI 組件，記得操作完成后 Apply 應用下預制體修改。
3. 總結
至此我們通過 PSD2UGUI，有了能直接在 Unity 中使用的界面。官方文檔在 「 Assets/PSD2UGUI/Doc/使用說明 」下，建議還是多瀏覽一遍。之后的流程就是添加相關的邏輯功能腳本了，在我們開發的日常中，經常會遇到有重復的功能需求，此時一般就會提供出來公共組件。這種公共的組件一般會由內部的同學提供，或者通過開源的項目進行改造。
PSD2UGUI，這種實現方案導致工作流還是偏向程序，因為在拼 UI 的時候需要懂得一些規則，需要明白這個是一個按鈕 Button，還是一個圖片 Image。所以還是適合小團隊或者是程序個人項目。而且類似的項目在 Github 上還有多個，可以選擇一個最適合自己的，如果是團隊使用最好在基礎上進行二次開發。
三、LoopScrollRect
1. 項目介紹
我們在業務開發的過程中，經常會遇到有大量的列表需要顯示的情況，比如上面的獎勵列表。這里要推薦的，就是一個通過對象池實現的，元素可重復利用的循環列表。Github項目地址+官方文檔
2. 項目演示
2.1 導入工程
我們從 Github 上下載的項目，將項目中 Scripts 目錄下的代碼導入工程中。
2.2 修改 UI 組件
循環滑動組件可以認為是原有滑動組件的增強組件，需要把新增的 LoopHorizontalScrollRect，或者是 LoopVerticalScrollRect，添加到對應位置，代替原有的 ScrollRect。
以我們上面的例子舉例，先需要把原有 UI 進行下改造，把 Content 下的 Cell 節點保存成單獨的預制體，並且刪除原有的所有 Cell。
我們這里是垂直方向，所以選擇 LoopVerticalScrollRect 組件，把組件替換原有的 ScrollRect，並且綁定與 ScrollRct 相同的 Content 和 Viewport。如果不想響應水平移動，需要把 Horizontal 取消勾選，基本參數類似 ScrollRect。比較特殊的是 Prefab Source 屬性。Prefab Name 中的名稱需要和我們之前保存的 Cell 預制體相同，Pool Size 表示對象池的緩存大小。需要注意的是組件默認是通過 Resources.Load 的 API 來創建對象，所以需要把預制體存放在 Resources 目錄下。當然如果是真正接入到項目的時候，往往會再此基礎上進行部分修改和封裝。改變一些加載和使用方式，讓其更符合我們自己的項目。
2.3 代碼控制
創建初始化代碼，RewardsScrollInit.cs。設置滑動列表 Cell 數量，並且重新填充。
using UnityEngine;
using UnityEngine.UI;
public class RewardsScrollInit : MonoBehaviour
{
public int totalCount = 15; // 創建15個 cell
void Start()
{
var ls = GetComponent<LoopScrollRect>();
ls.totalCount = totalCount;
ls.RefillCells();
}
}
將腳本掛載到與LoopVerticalScrollRect 相同的節點 scroll 上。
創建 Cell 接收代碼 RewardCell.cs。ScrollCellIndex 在 Cell 創建和刷新的時候會被調用。組件默認使用的是 transform.SendMessage 的 API 來傳遞消息調用的方法。我們自己也可以使用自己項目內部的消息系統來傳遞調用。
using UnityEngine;
using UnityEngine.UI;
public class RewardCell : MonoBehaviour
{
Image image;
private void Awake() {
image = transform.Find("rewardProp").GetComponent<Image>();
}
// 關鍵方法，idx 表示當初 Cell 的索引值
void ScrollCellIndex (int idx)
{
string name = "Cell " + idx.ToString ();
if (image != null)
{
image.color = Rainbow(idx / 25.0f);
}
gameObject.name = name;
}
// http://stackoverflow.com/questions/2288498/how-do-i-get-a-rainbow-color-gradient-in-c
public static Color Rainbow(float progress)
{
// 設置彩虹色
//....
}
}
將腳本掛載在 Cell 預制體上。
2.4 運行效果
3. 總結
該組件重點在於實現了對象池緩存，能夠通過由Cell 組成的內容部分大小和可視區域 ScrollRect 大小進行比較，動態的增刪對象。方便展示大量的對象。
在一些加載對象和傳遞調用方面，就如是上文所說，還是推薦進行修改和封裝后放入到我們自己的項目中。
四、DoTween
1. 項目介紹
DoTween 應該是 Unity 中插件使用排行榜前幾的插件，作為一款動畫插件，覆蓋率非常高。官方的介紹是“DOTween 是適用於 Unity 的快速，高效，完全類型安全的面向對象的動畫引擎，針對 C＃ 用戶進行了免費和開源優化，具有大量高級功能”。通過 DOTween 我們能夠很方便的完成許多動畫效果，並且支持 2D 和 3D，是一個非常強大的插件。這里我們簡單的演示下，使用 DoTween，來實現一下界面關閉的效果。
2. 項目演示
2.1 導入項目
從官網下載下載，解壓后直接把 DoTween 拖入項目目錄中。
或者直接從 Unity Store 上搜索 DoTween，直接下載導入到項目中。
2.2 代碼控制
打開在 PSD2UGUI 中自動生成的 UI 腳本 LoopScrollWin.cs，在關閉按鈕事件中進行關閉界面表現控制。
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using DG.Tweening; // 引入命名空間
public class loopScrollWin : MonoBehaviour
{
#region UI Variable Statement
// UI 組件
//...
[SerializeField] private Button button_closeButton;
#endregion
#region UI Event Register
private void Awake()
{
// 添加事件
AddEvent();
}
private void AddEvent()
{
button_closeButton.onClick.AddListener(OncloseButtonClicked);
}
private void OncloseButtonClicked()
{
// 縮放，時長0.3s
Tweener tweener = transform.DOScale(Vector3.zero, 0.3f);
// 移動
// transform.DOMove(new Vector3(0,10,0), 0.3f);
// 旋轉
// transform.DORotate(new Vector3(0,90,0), 0.3f);
// 縮放完成后關閉
tweener.OnComplete(() =>
{
Destroy(this.gameObject);
});
}
#endregion
}
2.3 運行效果
除了常見的縮放、平移、旋轉，DoTween 還有大量的 API，瀏覽官方文檔或者搜索各種教程，我們能夠實現各種效果。比如上面的例子，線性縮放看起來有點不自然，那么我們可以增加一個曲線。
private void OncloseButtonClicked()
{
Tweener tweener = transform.DOScale(Vector3.zero, 0.3f);
// 設置緩動函數
tweener.SetEase(Ease.InSine );
tweener.OnComplete(() =>
{
Destroy(this.gameObject);
});
}
3. 總結
DoTween 是一個使用簡單，功能強大的組件。除了使用腳本來控制播放，還擁有可視化編程的內容，只需要為要做動畫的物體添加 DoTweenAnimation 組件，在 Inspector 面板上設置參數，就能夠實現動畫效果。
五、總結
這次只是簡單介紹了下，我工作中接觸到的一部分組件。固然通過這些組件能夠快速的實現一部分需求，但是也要警惕通過各種開源組件拼接出來一個工程項目的做法。因為每個開源項目的進度和目的不同，所以會存在完成度差距的問題。比如 PSD2UGUI，項目時間較遠；循環滑動列表需要封裝改造后，才能更好的使用；最為成熟的 DoTween 也要考慮是否需要添加全部組件。
因此我認為，最正確的打開方式應該是，先確定自己工程的主要游戲框架。可以選擇已有的較成熟的游戲框架，或者自己搭建一個。以框架為骨骼，這些開源的組件為肉，在添加進項目前，按照框架的一些需求和工作流，進行修改和封裝，最后再添加進工程。以模塊化的方式使用這些組件，方便以后可以替換和修改這些組件，不會影響到大部分功能，這樣才能保證我們的項目總體上不受各個開源項目的反噬影響。