小Q噗噗說

    前陣子接觸到Unity的新的UI工具UIToolkit，讓我想到以前碰到網頁排版和樣式要寫CSS的日子。很好奇目前重製版專案裡的UI是否也能順利轉換到UIToolkit上，由於我UI在功能上有用到Zenject所以想趁著這陣子有空來測試看看，能不能順利轉換。 之所以寫這篇文章是因為網路上查到有用 UIToolkit和Zenject在一起的人並不多，所以想拋磚引玉看看有沒有人也有類似經驗可分享。 測試對象：一個會使用到Zenject和Localization功能的按鈕 測試的項目很簡單，挑一個比較有代表性的元素做測試。 我選擇的是一個帶有文字敘述和圖片的按鈕，這個按鈕其實是展示畫作圖片的按鈕。UGUI版本中是一個Prefab，上面有個元件可以指定這個按鈕的圖片和文字敘述，文字敘述會由Localization這個插件負責載入在地化版本的文本，而這個按鈕的功能很簡單，按下去後會使用Zenject的Signal發出訊息，會滿版顯示這個按鈕的圖片和文字敘述，以下的影片為UGUI版本的展示： 由於我選擇的按鈕文字敘述和圖片是綁在一起的， 所以我就用ScriptableObject包起來，裡面裝有LocalizedString和Sprite。其中有個事件，用來通知在地化文本的語言變更，UI的部分接收到通知後再取得最新的在地化文本。 怎麼寫客製化的VisualElement 針對怎麼寫一個客製化的VisualElement在官方的文件有簡單的說明，可以先看此： Using custom (C#) elements 我這邊客製化的VisualElement稱作ImageBoxElement，以下的程式也會用這個名字示範。 客製化的VisualElement裡面的內容可以透過程式添加，類似這樣： ImageBoxElement.Add(new Label("NewLabel")); 或者是透過UIBuilder做出一個範本(類型是VisualTreeAsset)，並透過在程式中載入的方式添加，有點像是在UGUI排好UI元素然後做成Prefab的概念。記住裡面會用程式控制的元素記得命名。 如下圖就是我製作的範本，稱作ImageBox： 載入並動態生成的方法，我是用Addressables載入： public class ImageBoxElemen...