UI skew/shear in Unity

shellycute

UI 圖檔的形狀基本上都是 正方形 或 長方形, 但有時候需要依視角傾斜或是幾何形變的效果. 這時候雖然可以再交由美術重製一份圖檔, 但是多少會拖累整個遊戲製程. 我們其實可以從程式修改起, 在不改變原圖的前提下做出歪斜的效果, 可以怎麼做?

首先可以區分傾斜的效果是 (a)"視差造成的歪斜" 還是 (b)"幾何圖形的歪斜"
(a)view skew      (b)geometry shear

視差造成的歪斜

這種歪斜效果比較容易做出來, 基本上只要將camera的投影類型設定成 “Perspective", 即透視投影, 接著調整 UI 的旋轉角度, 就能做出立體 UI 的感覺

camera projection

PS. UGUI 或 NGUI 都行 😀

幾何圖形的歪斜

要做到幾何圖形歪斜, 最直覺的方式就是修改 UI vertice 位置, 給每一個 vertice 在 x, y 方向加上一些偏移量, 這些偏移量決定歪斜的程度, 以 2D 圖來示範

x 方向偏移 :  x shear

y 方向偏移 : y shear

因此我們需要一個矩陣 -> shearing matrix 來算出偏移後的 vertice 新位置 (x’, y’), shx 與 shy 分別是 x, y 方向的偏移量, 詳細的公式可以參考 2D Transformation 與 3D Transformation

shearing matrix

以上提的只是概念, 至於實作在Unity的方式則有很多種, 可以用Shader, 也可以在Script上直接修改 vertice, 根據使用的 UI 套件 (UGUI 或 NGUI) 不同也有不同的做法

網路上已有人分享 2D UI sprite shearing shader , 能直接套用在 2D object sprite
-> 先建立一個 material, 把該 material 使用的 shader 設定成上面提供的 shader
-> 新增 2D Sprite 物件 (GameObject -> 2D Object -> Sprite) 於場景中
-> 設定 2D Sprite 物件 的 material 為我們新增的 material, 調整 Horizontal Skew 與 Vertical Skew 兩個參數, 能做出 x, y 兩方向的 shearing
-> 很方便 😀

Material : material

Sprite : 2D object sprite

PS. 關於 material 與 shader 的關係請看 Unity官方介紹 : Materials, Shaders & Textures

PS. 所有套用該 material 的物件都是參照同一組參數的效果 (horizontal = 0.5, vertical = 0), 若是想要不同的 shearing 效果 (horizontal = 0.5, vertical = 0 與 horizontal = -0.5, vertical = 0.1), 請分別製作不同的 material !!!

然而, NGUI 的 UISprite 物件, 不提供直接在 Unity Editor 設定 material 或 shader 的功能 (當然利用 script 更改也是 ok 的, NGUI 的 UISprite 類別有 material 變數)

NGUI 中能夠直接設定 material 或 shader 的只有 UITexture 物件, 但是也沒有前一個方法方便, UITexture 沒辦法在 Unity Editor 修改 shader 參數, 必須使用Scripts 設定/更改參數 😦

NGUI UITexture

用 NGUI 有好有壞, 剩下的就看使用者自己斟酌哪種方法比較適合開發中的專案囉~

這篇只示範用 shader 來處理 geometry shearing, 如果對怎麼用 scripts 製作有興趣可以參考下面幾篇文章 :

本篇內容是我目前找到的許多解決問題的方法, 若是大家有覺得更好的方法也歡迎交流 ~ 😀

發表留言