Unity：嘗試使用Zenject、Unity的Localization在地化插件與UIToolkit在一起

 


 

前陣子接觸到Unity的新的UI工具UIToolkit，讓我想到以前碰到網頁排版和樣式要寫CSS的日子。很好奇目前重製版專案裡的UI是否也能順利轉換到UIToolkit上，由於我UI在功能上有用到Zenject所以想趁著這陣子有空來測試看看，能不能順利轉換。

之所以寫這篇文章是因為網路上查到有用 UIToolkit和Zenject在一起的人並不多，所以想拋磚引玉看看有沒有人也有類似經驗可分享。

測試對象：一個會使用到Zenject和Localization功能的按鈕

測試的項目很簡單，挑一個比較有代表性的元素做測試。

我選擇的是一個帶有文字敘述和圖片的按鈕，這個按鈕其實是展示畫作圖片的按鈕。UGUI版本中是一個Prefab，上面有個元件可以指定這個按鈕的圖片和文字敘述，文字敘述會由Localization這個插件負責載入在地化版本的文本，而這個按鈕的功能很簡單，按下去後會使用Zenject的Signal發出訊息，會滿版顯示這個按鈕的圖片和文字敘述，以下的影片為UGUI版本的展示：

由於我選擇的按鈕文字敘述和圖片是綁在一起的， 所以我就用ScriptableObject包起來，裡面裝有LocalizedString和Sprite。其中有個事件，用來通知在地化文本的語言變更，UI的部分接收到通知後再取得最新的在地化文本。

怎麼寫客製化的VisualElement

針對怎麼寫一個客製化的VisualElement在官方的文件有簡單的說明，可以先看此：

我這邊客製化的VisualElement稱作ImageBoxElement，以下的程式也會用這個名字示範。

客製化的VisualElement裡面的內容可以透過程式添加，類似這樣：

  1. ImageBoxElement.Add(new Label("NewLabel"));

或者是透過UIBuilder做出一個範本(類型是VisualTreeAsset)，並透過在程式中載入的方式添加，有點像是在UGUI排好UI元素然後做成Prefab的概念。記住裡面會用程式控制的元素記得命名。

如下圖就是我製作的範本，稱作ImageBox：



載入並動態生成的方法，我是用Addressables載入：

  1. public class ImageBoxElement : VisualElement
  2. {
  3.     //_paintData是儲存畫作資料的ScriptableObject，怎麼給就看個人做法
  4.     private PaintingData _paintData;
  5.     private Label _header = default;
  6.     private VisualElement _image = default;
  7.     private Label _name = default;
  8. }
  9.     public ImageBoxElement()
  10.     {
  11. 		//從Addressables載入製作好的UI範本
  12. 		VisualTreeAsset tree = Addressables.LoadAsset<VisualTreeAsset>("ImageBox").WaitForCompletion();
  13. 		//從範本裡面複製一份副本到客製化的VisualElement裡
  14. 		tree.CloneTree(this);
  15. 		//把底下有關文本和圖片的VisualElement存起來，提供之後修改內容使用
  16. 		_header = this.Q<Label>("Header");
  17. 		_image = this.Q<VisualElement>("Image");
  18. 		_name = this.Q<Label>("Name");
  19.     }
  20. }

如此一來客製化的VisualElement裡面就會有在UIBuilder做的ImageBox裡所含的UI。而使用上跟一般內建的VisualElement差不多，可以用程式添加或是在UIBuilder中拖曳添加。

客製化的VisualElement中處理文字在地化

UIToolkit據官方說法，目前並沒有官方支援Localization插件的功能，所以要使用Localization來處理在地化就需要自己寫。作法大致上是自己寫一個類似Label的VisualElement(或是TextElement)，透過LocalizedString自行訂閱LocalizedString.StringChanged來更新文字的內容，這樣就能透過Localization插件依照語言在UIToolkit上顯示在地化的文本。雖然我這邊只提到文字，其他如圖片的在地化應該也差不多。有人有嘗試實作可參考此文章。 
 
由於UIToolkit目前的限制，無法直接在UIBuilder裡面選取指定的LocalizedString，所以只能填LocalizedString的Key來查找，像是ScriptableObject的物件參考也無法。

而訂閱LocalizedString.StringChanged來變更Label的文本內容會像是：
  1. LocalizedString.StringChanged += (str) => VisualElement.Q<Label>("Header").text = str;

由於我的在地化文本有使用到SmartString，所以我並沒有直接用這種方法，LocalizedString.StringChanged只是用來通知文本變更，然後透過LocalizedString.GetLocalizedString取得處理好的文本，這些部分被我封裝在ScriptableObject裡。

有關處理文字在地化的部分差不多了，再來就是怎麼讓這些客製化VisualElement使用Zenject的Signal互相溝通呢？

 

客製化的VisualElement與Zenject Signal

為了測試使用Zenject Signal的功能，我在UIBuilder做了一個很類似UGUI版本的介面，裡面含有四個ImageBoxElement，其中一個平時隱藏，並且名稱為Target，只有點選其他三個才會顯示這個隱藏的，並顯示全螢幕的圖片與文字敘述。功能上就跟上面影片中展示的很像。
為了讓這幾個ImageBoxElement可以互相溝通，ImageBoxElement要可以發出Signal和接收Signal。跟平常一樣我們要在ImageBoxElement注入SignalBus以發送Signal。在ImageBoxElement裡簡單加個欄位注入：
  1. [Inject] readonly SignalBus _signalBus;

並且在Installer裡將ImageBoxElement抓出來，並做Binding，才能完成BindSignal和注入SignalBus。

為了將我們做好的UI顯示在畫面上和抓取ImageBoxElement，就需要在場上放一個GameObject並掛上UIDocument元件，將我們做好的UIVisualTreeAsset放上去，這樣就能在畫面上看到UI，並且可以透過程式控制UI的元素，並抓取底下的VisualElement。

從UIDocument取得最上層的rootVisualElement後查找所有ImageBoxElement，先儲存起來，並用匿名方法Binding。然後針對每一個ImageBoxElement做注入，否則會Zenject不會注入，因為ImageBoxElement生成不是由Zenject處理，而且生成的時間很早。

 更新：Zenject 9.3.1版已經有內建處理了，無須手動操作。

有關注入，手動對每個物件要求注入是我目前是出來唯一可以做到的方法，不知道有沒有其他更好的方法可以做到。🤔

  1. IEnumerable<ImageBoxElement> elements = UIDocument.rootVisualElement.Query<ImageBoxElement>().ToList().OfType<ImageBoxElement>();
  2. Container.Bind<ImageBoxElement>().FromMethodMultiple((ctx) => elements);
  3. foreach (ImageBoxElement element in elements)
  4. {
  5.    Container.QueueForInject(element);
  6. }

完成注入後，剩下的就相對簡單，只需要處理訊息發送和接收。與UGUI時使用Zenject的一樣，首先是在執行完CloneTree後註冊Callback以在滑鼠按下時發送Signal，Signal裡面會裝有存放畫作資料的ScriptableObject。

  1. //傳送畫作資料的Signal
  2. public class TestEvent { public PaintingData Data; }
  3.  
  4. //在ImageBoxElement建構式中CloneTree之後
  5. this.Q<Button>("Box").RegisterCallback<ClickEvent>((click) => _signalBus.Fire(new TestEvent() { Data = _paintData }));
然後處理接收訊息的部分 
  1. //在Installer中
  2. Container.DeclareSignal<TestEvent>();
  3. Container.BindSignal<TestEvent>().ToMethod<ImageBoxElement>(x => x.ReactWhenOnClick).FromResolveAll();
  4.  
  5. //在ImageBoxElement中，這邊只是簡單示範開關VisualElement和更換內容而已
  6. public void ReactWhenOnClick(TestEvent t)
  7. {
  8. 	//只有名稱叫做Target的ImageBoxElement才需要反應
  9. 	if (this.name == "Target")
  10. 	{
  11. 		//開關顯示VisualElement
  12. 		if (this.style.display == DisplayStyle.Flex)
  13. 			this.style.display = DisplayStyle.None;
  14. 		else
  15. 			this.style.display = DisplayStyle.Flex;
  16. 		_header.text = t.Data.GetHeader();
  17. 		_image.style.backgroundImage = new StyleBackground(t.Data.GetImage());
  18. 		_name.text = t.Data.GetSubtitile();
  19. 	}
  20. }
這邊寫完後大致上功能就完成了，剩下的功能就差不多完成了，進入PlayMode測試就是最開頭影片的樣子。

留言

張貼留言

₍₍ς(OωO ς)⁾⁾

這個網誌中的熱門文章

Unity：製作可相交的視差遮蔽貼圖 Shader 續 (Parallax Occlusion Mapping Shader with Pixel Depth Offset)

圖片
前言 在 幾年前的文章 曾有提到嘗試製作可相交的視差遮蔽貼圖(以下都簡稱 POM) Shader，然而當時一直留下一個疑問，就是計算深度偏移的量一直不是很正確。 本文新的實現方法，與幾年前的看起來相似，但是有穩定的深度位移 多年後終於有能力重新整理過一次，看了 Unity 的原始碼才發現當年已經離問題的所在很接近了，在後來版本的 Unity 裡面可以看到解決方法，在 Shader Graph Parallax Occlusion Mapping 這個 Node 的參數可以看到問題的所在。 POM 控制垂直偏移高度的參數(Unity 中為 Amplitude)在本文章使用的是物件空間座標，如果偏移高度參數是 0.6，代表著表面到最底部距離在物件空間的座標下相差 0.6 公尺。   原始碼 有關原始碼，請詳見 Github 專案 。    問題根源-如何計算逐像素的世界空間座標偏移量 這個問題關鍵就在於 UV 空間座標的 U軸 和 V 軸這兩個基向量在物件空間的長度。當要計算各個像素位移後的深度時必須知道各個像素在偏移後的世界座標是多少，然後再計算出深度。 提醒一點：U 軸 和 V 軸基向量在某些條件對應到切線與副切線，但不是絕對，因為 U軸 和 V 軸可以沒有正交，切線與副切線卻必須正交，這個限制了使用 POM 的模型不能有太多 UV 扭曲和法線調整 從 POM 的計算裡會得到射線(viewDir)與位移後表面交點的高度(Tp 點的高度)，可以藉此高度值計算 T0 到 Tp 的位移向量 T0Tp ，如果這個位移向量的長度正好就是世界空間的長度，那麼只需要將是世界空間的射線向量乘以這個長度，然而在將射線的向量轉換的過程中會令這個長度可能沒有符合世界空間的長度，所以要在轉換過程中確保轉換後的長度一致。 Unity 版本的視差遮蔽，由物件表面為 1 起始 Created by modifying " LearnOpenGL " (©  JoeyDeVries ( Licensed under CC BY 4.0 ))   用來計算 POM 的射線一開始為世界空間的單位向量(viewDirWS)，如果使用此向量，得到的偏移高度會是世界空間，無法跟隨物體縮放，於是一開始先除以...
閱讀完整內容

Unity：嘗試製作可相交的視差遮蔽貼圖 Shader (Trying to Create an Parallax Occlusion Mapping Shader with Pixel Depth Offset)

圖片
  警告，本文只是分享摸索的過程，並不是完善的技術文。 此文在計算深度位移有錯誤，後續有所更新，詳見 此文     視差貼圖(Parallax Mapping)是一種改進後的凹凸貼圖的技術，可以用極少的面數模擬複雜模型的表面凹凸，因為介紹視差貼圖這個技術的文章很多了此處就不詳細介紹，本文只大概說明使用視差貼圖要怎麼讓模型與一般的物件產生正確的陰影投射和相交的效果。  一般的視差貼圖的做法是依照切線空間的視線相量位移貼圖採樣的 UV 座標而產生立體感，物件本身的幾何形狀並未更改，因此各個像素的深度也是原有形狀的位置，因此相交時無論畫面上的物體因為視差貼圖產生凹凸的樣貌為何，相交還是依照原有的幾何形狀，而接收物件陰影投射亦有相同狀況。(如下圖) Unity 中的 HDRP 中內建的 Lit Shader 提供的像素深度位移(Pixel Depth Offset)的功能，可以讓各個像素的深度位置依照視差貼圖位移的量產生位移，進而讓視差貼圖凹凸的效果也能對應到物件的相交上。(如下圖) 需要提到的是 Unreal 引擎的 Shader 也有同個功能，但無論是 Unity 和 Unreal 引擎的做法我都無法取得夠詳細的資料，雖然 Unity 的 Lit Shader 可以找到原始碼，但是太複雜了，目前暫時還是沒有辦法理清做法。 (ﾟ∀。) 為了產生正確的物件相交與陰影投射勢必要計算出正確的深度，那麼怎麼計算正確的深度呢？我的做法就是直接將像素的世界空間座標依照凹凸的位移量計算出位移後的世界座標，然後再計算剪裁空間的座標，然後就得出深度了。 需要說的是我採用的視差貼圖技術是視差遮蔽貼圖(Parallax Occlusion Mapping，POM) ，原先是在 Shader Graph 中用 Custom Function 節點製作的，結果如下方的影片。   參考了 Unity 的做法，使用的是高度圖而非深度圖，因此高度(深度)最低為0，最高為1，需要特別注意。 取得視差位移後的深度首先第一步是求出視差位移後的高度(深度)。這個很簡單，回傳位移後的 UV 時一並回傳目前的高度(深度)，如下圖可以看到高度最低至最高由 0 到 1 灰階漸層。 一旦取得高度後便可以取得世界空間的...
閱讀完整內容

Blender：Geometry Node 應用於營造法式生成大木作構件初探-梭柱篇

圖片
摘要 本文初步探索了透過使用 Blender 內建 Geometry Node 來程序化生成建築構件。 前言 最近正在學習 Blender 的 Geometry Node，使用程序化生成模型非常的吸引我，看了一些教學後在想時不是要做些什麼當作練習。第一個想到的其實是應用在建築構件的生成。 營造法式的大木作構件感覺就是一個很好的題材，因為大木作構建本身在營造法式中已經很詳細載明了做法。所以很適合做成程序化生成模型，此外我想到另一個優點是可以快速透過調整參數控制品質，例如曲線的段數和榫卯可以透過參數調整，便於處理 LOD 或是不同使用情境。 這次初探會針對梭柱嘗試製作程序化生成模型，首先我們要了解營造法式中針對梭柱的規則，再來藉由這些規格轉化成程程序化生成模型的邏輯。  該專案也有上傳至 Github 術語簡單介紹 因為再來會很常使用到中國傳統建築的一些術語，所以先在此簡單解釋： 卷殺：是指對構件砍削出折線或曲線的行為，藉以柔化外觀 材分 ：宋代《營造法式》中使用的這個建築尺度單位，主要用來控制建築構件尺寸的模數。1 材可細分為 15 分，但是這個一材的大小隨著等級可大可小。另外還有栔，為 10 分。 梭柱的規格 梭柱的規定在 《營造法式》第五卷·大木作制度二 有敘述，這邊只擷取與梭柱相關，亦不擷取與升起側腳相關的部分。 凡用柱之製，若殿閣即徑兩材兩栔至三材，若廳堂柱即徑兩材一栔，餘屋即徑一材一栔至兩材。若廳堂等屋內柱，皆隨舉勢定其短長，以下檐柱為則。（若副階廊舍，下檐柱雖長，不越間之廣。 …… 凡殺梭柱之法，隨柱之長，分為三分。上一分又分為三分，如栱卷殺，漸收至上，徑比櫨枓底四周各出四分；又量柱頭四分，緊殺如覆盆樣，令柱頭與櫨枓底相副。其柱身下一分殺令徑圍與中一分同。 …… 從以上敘述可以知道柱子有三個主要的參數，直徑與高（長）、材分等級來決定一分(U)的大小，然而高卻沒有非常詳細的規定，此處以實例常見的直徑(D)與高度(H)比為 1:9 假定。 H = 9 * D D = 42 ~ 45 * U 有關卷殺，柱身上方寫的非常清楚，柱身下方卻不是很明瞭，我們此處假設只有上方有卷殺，也就是如上敘述的柱身上方 1/3 的部分進行卷殺。 另外一個問題來了「徑比櫨枓底四周...
閱讀完整內容