版面元件 – Panel, Scroll View
依照選單的分隔線劃分,版面框架組件除了先前講的Canvas外,還有Panel、ScrollView可以加到Canvas下做分層使用。
Panel
Panel相當單純,就是圖層的概念,他只有一個Image在底下用來設定背景圖片或顏色,通常會把相關的UI放在這個組件底下做分類,重點在於它的Rect預設是滿版的。
可以透過點選左上的圖示來改變,就可以用不同的方式設定對齊和尺寸。
Scroll View
這個組件就複雜許多,通常是內容超出畫面大小時使用,他的子元素包括一個Viewport和兩個卷軸Scrollbar Horizontal、Scrollbar Vertical。
在Hierarchy下有關ScrollView結構如下圖,Viewport底下的Content就是內容,它的大小會決定卷軸的狀態,也可以取消某一邊的卷軸。
Scroll View上的ScrollRect有指定Content對象,看需不需要橫直軸的選項,和相關的參數。 下面的列表是相關說明 ;
屬性 | 功能描述 |
Content | 要滾動的元素 |
Horizontal | 啟用水平滾動 |
Vertical | 啟用垂直滾動 |
Movement Type | 彈性或夾緊。使用Elastic或Clamped強制內容保持在Scroll Rect的邊界內。彈性模式在到達Scroll Rect邊緣時彈回內容 |
Elasticity | 彈性模式中使用的彈跳量 |
Inertia | 設置慣量時,拖動後釋放指針時內容將繼續移動。未設置慣性時,內容僅在拖動時移動 |
Deceleration Rate | 設置慣量時,速率為0將立即停止運動。值為1表示運動永不減速 |
Scroll Sensitivity | 滾輪和的靈敏度 |
Viewport | 內容物的父級物件 |
Horizontal Scrollbar | 可選參考水平滾動條元素 |
Vertical Scrollbar | 可選參考垂直滾動條元素 |
Visibility | 滾動條是否在不需要時自動隱藏 |
Spacing | 滾動條和Viewport之間的空間 |
內容元件 – Text & Text Mesh Pro, Image & Raw Image
Text
文本組件,主要是用於呈現文字在螢幕上,並用於例如標籤,按鈕,和其他訊息。
屬性 | 功能描述 |
Text | 顯示輸入文本內容 |
Character 字元 | |
Font | 顯示的文本字體 |
Font Style | 文本的樣式。選項為正常,粗體,斜體和粗體+斜體。 |
Font Size | 文本字體大小 |
Line Spacing | 文本行之間的垂直距離 |
Rich Text | 文本中的標記元素是否被解釋為RichText樣式 |
Paragraph 段落 | |
Alignment | 文本的水平和垂直對齊 |
Align by Geometry | 使用字形幾何的範圍來執行水平對齊 |
Horizontal Overflow | 文本太寬而無法放入矩形的情況可以選擇Overflow |
Vertical Overflow | 用於處理文本太高而不適合矩形的情況可以選擇Overflow |
Best Fit | 忽略尺寸屬性,試圖將文本放到控件的矩形極限值 |
Color | 設定文本的顏色 |
Material | 設定材質 |
Text Mash Pro
TextMesh Pro是Unity中文字渲染的終極解決方案,原本是一個第三方插件,後被Unity收購後併入Unity,現在可以免費使用。
安裝
對於Unity2018及以後的版本,可以從Menu 欄位的 Window > Package Manager中安裝TextMesh Pro。
Unity2018.2及之後的版本TextMesh Pro包會被直接安裝到Unity中,無需手動安裝。
對於Unity2017及之前的版本,可以通過AssetStore https://assetstore.unity.com/packages/essentials/beta-projects/textmesh-pro-84126
TextMeshPro最基礎的用法就是使用它的Text組件來顯示文本。有兩種使用方法,一種是通過網格MeshRenderer渲染,一種是通過UI系統渲染。
Mesh方式:GameObject > 3D > TextMesh Pro – Text
UI方式:GameObject > UI > TextMesh Pro – Text
UGUI的Text使用了一張字體貼圖,Unity把所有需要顯示的字符放到了一張圖集中,字符的形狀是通過像素定義的。當我們放大時,像素不夠用就會出現文字變模糊的情況。
TextMesh Pro的Text使用了不同的技術來渲染文字,叫做Signed Distance Field(後面簡稱SDF,)。和UGUI類似,這個技術同樣需要將字符放到一個圖集中,但是不使用像素來代表文本的形狀,而使用SDF技術來生成文本的形狀。使用這種技術在渲染時不會因爲縮放而造成文本模糊的情況,它透過不同的著色器來實現描邊,陰影,發光等效果,表現更出色的同時性能也更好。
建立字體
首先從Asset Store導入Textmesh pro,然後選擇Window->TextMeshPro->Font Asset Creator;
屬性 | 功能描述 |
Source Font File | 選擇需要製作的字體 |
Sampling point size | Auto Sizing 建議使用該選項。根據給定Atlas Resolution(圖集分辨率)來計算並使用最大字號。 Custom 自定義字號 |
Padding | 圖集中每個字符之間的間隔,以便在渲染時能卻分他們的邊緣。此外padding也用於文字的特效,所以不宜過小;但是也不宜過大,過大會造成更大的atlas分辨率或者atlas上能承載的字符更少。對於512*512的圖集,padding爲5通常比較合適 |
Packing Method | Fast 可能計算出不是最大的字號,但是計算速度會快一些 Optimum 可以計算出圖集上能承載的最大的字號 通常在測試設置時使用Fast,在最終打包時使用Optimum |
Atlas Resolution | 使用SFD字體時,更高的分辨率會產生更精細的漸變,從而產生更高質量的字體。對於大多數字體,僅包含所有ASCII字符時,512×512紋理分辨率足夠用 |
Character Set | ASCII 大小寫字母+數字+常見符號 Extended ASCII 包含所有的ASCII字符 ASCII lowercase 小寫字母+數字+常見符號 ASCII uppercase 大寫字母+數字+常見符號 Numbers + Symbols 數字+常見符號 Custom Range 使用十進制來制定字符的編碼範圍,可以使用減號和英文逗號來指定範圍 Unicode Range(Hex) 使用16進制來制定字符的編碼範圍,可以使用減號和英文逗號來指定範圍,如20-7E,A1-FF Custom Characters 自定義字符,直接輸入對應的字符 Characters from file 從外部文件中導入字符 |
Font Style | 可以選擇幾種不同的字體樣式。這些設置僅適用於位圖字體。透過shader配置SDF字體的樣式,可以選擇粗體、斜體、粗體加斜體和描邊,也可以控制粗體和輪廓的強度 |
Render Mode | Raster模式不使用抗鋸齒,Smooth模式使用抗鋸齒。兩者都有一個Hinted模式,它將字符像素與紋理像素對齊以獲得更清晰的結果 |
Get kerning Pairs | 選擇從字體中提取字距數據。此數據用於調整特定字符對之間的間距,以產生更好的視覺效果。但是請注意很多字體沒有字距數據 |
Image & RawImage
顯示圖像用的元件有兩種Image和Raw Image,Image只允許使用Sprite格式,Raw Image則可以接受多種不同影像。
屬性 | 功能描述 |
Source Image | 表示顯示的圖像紋理(必須為Sprite) |
Color | 要應用於圖像的顏色 |
Material | 用於渲染圖像的材質 |
Raycast Target | 射線是否可碰觸目標 |
Preserve Aspect | 確保圖像保持現有維度 |
Set Native Size | 按鈕將圖像框的尺寸設為紋理的原始像素尺寸 |
屬性 | 功能描述 |
Texture | 表示要顯示的圖像的紋理 |
Color | 要應用於圖像的顏色 |
Material | 用於渲染圖像的材質 |
UV Rect | 圖像在控制矩形內的偏移量和大小,範圍0.0到1.0 |
待續;功能型元件介紹