Unity UGUI 原理篇(二)：Canvas Scaler 縮放核心

Unity UGUI 原理篇(二)：Canvas Scaler 縮放核心

https://blog.csdn.net/gz_huangzl/article/details/52484611

 

Canvas Scaler

Canvas Scaler是Unity UI系統中，控制UI元素的總體大小和像素密度的Compoent，Canvas Scaler的縮放比例影響著Canvas下的元素，包含字體大小和圖像邊界。

 

Size

Reference Resolution：預設螢幕大小

Screen Size：目前螢幕大小

 

Canvas Size：Canvas Rect Transform 寬高

 

Scale Factor

http://docs.unity3d.com/ScriptReference/Canvas-scaleFactor.html

 用於縮放整個Canvas，而且調整Canvas Size與Screen Size一樣

 

先來看一段官方程式碼

CanvasScaler.cs

C#

1 2 3 4 5 6 7 8

protected void SetScaleFactor(float scaleFactor) {     if (scaleFactor == m_PrevScaleFactor)         return;       m_Canvas.scaleFactor = scaleFactor;     m_PrevScaleFactor = scaleFactor; }

程式碼可以看出，Canvas Scaler 透過設定Canvas下的Scale Factor，縮放所有在此Canvas下的元素

 

當Scale Factor為1時，Screen Size (800*600)、Canvas Size(800*600)，圖片大小1倍

 

當Scale Factor為2時，Screen Size (800*600)、Canvas Size(400*300)，圖片大小2倍

 

在當Scale Factor為2時，Scale Factor 會調整整個Canvas 的大小，並讓他的大小跟Screen Size一樣，運算後Canvas Size放大2倍，剛好等於Screen Size，而底下的圖片會放大2倍

 

UI Scale Mode

Constant Pixel Size

Canvas Size 始終等於 Screen Size，透過Scale Factor直接縮放所有UI元素

 

1. Scale Factor：透過此Factor縮放所有在此Canvas下的元素

2. Reference Pixels Per Unit：

先介紹圖片檔設定中的Pixels Per Unit，意思是在這張Sprite中，世界座標中的一單位由幾個Pixel組成

 

 

這邊使用的測試圖片為原始大小100*100 的圖檔，這邊統稱測試圖

 

 

舉例來說，場景中有一個1*1 Cube ，與一個Sprite圖片指定為測試圖，兩者的Transform Scale 都為 1

當 Pixels Per Unit=100，每單位由 100 Pixel組成，Sprite 是100*100 Pixels，那 Sprite 在世界座標中大小就會變成 100/100 * 100/100 = 1*1 Unit

(左：Cube ，右：Sprite)

 

當 Pixels Per Unit=10，每單位由 10 Pixel組成，Sprite 是100*100 Pixels，那 Sprite 在世界座標中大小就會變成 100/10 * 100/10 = 10*10 Unit

(左：Cube，右：Sprite)

 

結論：

■ Unity中一單位等於 100 Pixels

■ 由此可以推導出公式：

Sprite 在世界座標中大小 = 原圖大小(Pixels) / Pixels Per Unit

 

讓我們回到 Reference Pixels Per Unit，官方解釋是，如果圖片檔有設定Pixels Per Unit，則會將Sprite 的 1 pixel 轉換成 UI 中的 1 pixel

 

Image.cs

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

public float pixelsPerUnit {     get     {         float spritePixelsPerUnit = 100;