1.Sprite精靈是UI以及unity 2D的基本元素。在UI系統中, 所有圖片的顯示都必須通過精靈。
2.圖片設置為精靈, 在Inspector窗口中將其Texture Type設置為Sprite(2D and UI), 并點擊窗口右下角的Apply按鈕。

(1).Sprite Mode:精靈模式, 常用的有Single單圖、Multiple多圖模式。
(2).Packing Tag:打包標簽。具有相同標簽的, 如果精靈打包模式是開著的, 打包時會被打成一張圖集, 注意這些圖片不能放在Resources目錄下。
(3).Edit->Project Settings->Editor可以設置精靈的打包模式

(5).Sprite Editor:編輯精靈

(6).Border邊界在之后如切片類型Image的UI元素中會用到。L代表左邊界, R代表右邊界, T代表上邊界, B代表下邊界。我們可以直接在輸入欄中填寫正整數進行設置, 也可以拖拽圖素上的綠色小正方形設置對應的邊界, 最后點擊Apply按鈕, 完成設置。當設置了邊界后, 俗稱九宮格。?

(7).Pivot:中心點。
(8).Pixels To Units:像素至單位, 多少像素對應世界坐標系中的一個單位。
3.Canvas畫布, 它是所有UI元素的承載體。
4.創建畫布
(1).在Hierarchy視圖中, 鼠標右鍵, 然后選擇UI, 然后選擇Canvas

(2).創建完成, 在Scene視圖中白色的矩形表示畫布

4.畫布的第一個參數RenderMode的渲染模式有3種:Screen Space-Overlay、Screen Space-Camera以及World Space。

5.Screen Space-Overlay(屏幕空間-覆蓋模式)的畫布會填滿整個屏幕空間, 并將畫布下的所有UI元素置于屏幕的最上層, 或者所畫布的畫面永遠"覆蓋"其它普通3D畫面。
(1).Pixel Perfect:只有RenderMode為Screen類型時才有的選項。使UI元素像素對應, 效果就是邊緣清晰不模糊。
(2).Sort Layer:是UGUI專用的設置, 用于指明畫布的深度。
6.Screen Space-Camera(屏幕空間-攝像機模式)和Screen Space-Overlay相似, 畫布也是填滿整個屏幕空間, 如果屏幕尺寸被改變, 畫布將自動改變尺寸來匹配屏幕。不同的是, 在該模式下, 畫布會被放置在指定攝像機的前方。在這種渲染模式下, 畫布會看起來繪制在一個與攝像機固定距離的平面上。所有UI元素都由該攝像機渲染, 因此攝像機的設置會影響UI畫面。
(1).Render Camera:攝像機
(2).Plane Distance:畫布平面距離攝像機的距離
(3).Sorting Layer:是UGUI專用的設置, 用于指明畫布的深度。
點擊Sorting Layer, 然后點擊Add Sorting Layer...

可以按”+”按鈕添加Layer, 也可以按”-”按鈕刪除Layer。畫布所使用的Sorting Layer越排在下面, 顯示的優先級也就越高。

(4).Order in Layer:在相同Sorting Layer下的畫布顯示先后順序。數字越高, 顯示的優先級也就越高。

7.World Space即世界空間模式。在此渲染模式下, 畫布被視作與場景中其他普通游戲對象性質相同的類似一張畫片(Plane)的對象。畫布的尺寸可以通過Rect Transform設置, 所有UI元素可能位于普通3D物體的前面或者后面顯示。當UI為場景的一部分時, 可使用這個模式。它有一個獨有的參數Event Camera, 用來指定接收事件的攝像機, 可以通過畫布上的GraphicRaycaster組件發射射線產生事件。

8.畫布的3種渲染模式

渲染模式	畫布對應屏幕	攝像機	像素對應	適合類型
Screen Space-Overlay	是	不需要	可選	2D UI
Screen Space-Camera	是	需要	可選	2D UI
World Space	否	需要	不可選	3D UI

9.UI元素的關系

總結

以上是生活随笔為你收集整理的用户界面精灵和画布的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。