當建立 Scroll View 時，預設會建立多個組件(Component)。

• Viewport ：決定可視範圍
  • Content ：在這個滾動視圖中的內容物件都將放置於這個 Content 中。它的尺寸多大，滾動視角就能滾多遠。
• Scrollbar Horizontal ：水平滾動條，可視需要刪除
• Scrollbar Vertical ：垂直滾動條，可視需要刪除

ScrollRect

ScrollRect 是 滾動視圖中的一個組件。

此外如果想對 Container 中的物件做排列的話，可以使用 Layout Group 組件

• Grid Layout Group ：網格(Grid)方式排列子物件
• Horizontal Layout Group ：水平方向(Width) 排列子物件
• Vertical Layout Group ：垂直方向(Height) 排列子物件

若想讓 Container 的大小自動符合內容物件的大小的話，可以使用 Container Size Filter 組件

RectTransform 組件(Component)是 2D 佈局(layout)中使用的組件，用於控制 UI 組件位置以及對齊方式，繼承自 Transform 組件。

• Transform 表示一個點，只處理位置(Position)，角度(Rotation)與縮放(Scale)
• RectTransform 表示一個 2D 矩形，UI 元素可以放置在這個矩形內，並加入了錨點(Anchors)，軸心點(Pivot)，長寬等屬性。
• 目的是控制 UI 元件大小，讓其可以自動適應解析度。

屬性	說明
Anchor	錨點，為相對於父矩形的錨點，值為 0 ~ 1。 Min：父矩形範圍內 X 和 Y 的最小值 Max：父矩形範圍內 X 和 Y 的最大值
Pivot	矩形範圍內的軸心點，值為 0 ~ 1。影響物件的旋轉，縮放，位置。在錨點計算位置中會用到
Pos (X, Y, Z)	軸心點相對於錨點的位置
Width, Height	矩形的寬高
Left/Top/Right/Bottom	矩形邊緣相的對於錨點的位置。當錨點分離時才會出現。
Ratation	圍繞軸心點的旋轉角度
Scale	縮放大小
BluePrint Mode	啟用後，編輯旋轉和縮放不會影響矩形，只會影響顯示內容
Raw Edit Mode	啟用後，改變軸心點和錨點值不會改變矩形位置，但會影響顯示內容

軸心點(Pivot)

軸心點為矩形範圍內的軸心點，它會影響物件的旋轉，縮放，位置。此外在錨點計算位置中會也用到

• 在編輯器中，藍色空心圓就是軸心(Pivot)
  
• 軸心的值為 0 ~ 1 之間
• 預設值為 (0.5, 0.5)，在矩形的中心。
• 當值為 (0, 0) 時，會在矩形位置的左下角。
• 當值為 (1, 1) 時，會在矩形的右上角。
  
• 物件會根據軸心坐旋轉
  

錨點(Anchor)

錨點，為相對於父矩形的錨點。由 Min 和 Max 組成，這四個點在 Unity 編輯器中顯示為四個三角形，並組成一個矩形。

• Min：父矩形範圍內 X 和 Y 的最小值。
• Max：父矩形範圍內 X 和 Y 的最大值。
• 錨點為一個點：當 Min 與 Max 相同時，錨點為一個點。
  • 預設 Min 與 Max 皆為 (0.5, 0.5)。此時，為父元素的中心。
  • Min 與 Max 皆為 (0, 0)。此時，為父元素的左下角。
  • Min 與 Max 皆為 (1.0, 1.0)。此時，為父元素的右上角。
    
  • 錨點為一個點的時候，編輯器左邊顯示的為 Pos X 與 Pox Y，在此情況下，將錨點看作原點座標，而錨點距離軸心的 X 距離為 Pos X ；錨點距離軸心的 Y 距離為 Pos Y
    
  • 這麼做的原因是為了適應不同解析度。例如，將錨點設定到右上角 Min(0,1) Max(0,1)，那麼不論解析度如何改變，這個元件都可以根據錨點保持正確的距離。
  • 錨點為一個點的時候，編輯器左邊顯示的還有 Width 與 Height ，這個寬高為元件的寬高，會依據軸心點而有所不同
• 錨點為矩形：當 Min 與 Max 不同時，錨點會分離為一個矩形
  • Min 設為 (0.2, 0.1) ， Max 設為 (0.8, 0.7)
    
  • 錨點為矩形時，編輯器左邊顯示會變為 Left ， Top ， Right ， Bottom。表示為錨點矩形與元件的矩形所形成的距離， Left 為左邊距離， Top 為上邊距離， Right 為右邊距離， Bottom 為下邊距離，如下圖。
    
  • 當錨點為矩形時，可以讓元件會根據父元件的變化而拉伸大小。常常用在背景圖。

BluePrint Mode

當勾選了 BluePrint Mode 之後，編輯旋轉和縮放不會影響矩形，只會影響顯示內容

一般不常使用。

Raw Edit Mode

啟用 Raw Edit Mode 後，當改變軸心點和錨點值不會改變矩形位置，但會影響顯示內容

1. 開始圖
   
2. 未啟用 Raw Edit Mode 去更改軸心，會發現軸心往上移動，但是圖形沒有變
   
3. 啟用 Raw Edit Mode 去更改軸心，會發現軸心沒有變，但是圖形往下移動
   

一般不常使用。

使用 Unity 編輯器快速設定軸心與錨點

在編輯器中，會看到如下圖的按鈕，使用滑鼠左鍵點擊，它便會展開

展開後如下圖

使用滑鼠左鍵點擊，就可以快速的設定錨點位置(九宮格佈局)。

按下 Shift ， 再點擊滑鼠左鍵，除了錨點位置，同時可以設定軸心點（相對自身矩形）
按下 Alt ， 再點擊滑鼠左鍵，除了錨點位置，同時可以設置物件位置

在程式碼中，取得 RectTransform

因為 RectTransform 繼承自 Transform，因此當該遊戲物件擁有 RectTransform 時，只要將它的 Transform 轉型為 RectTransform 即可。

1

RectTransform rectTransform = (this.transform as RectTransform);

Reference:

• https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/class-RectTransform.html
• https://www.arkaistudio.com/blog/2016/05/02/unity-ugui-%e5%8e%9f%e7%90%86%e7%af%87%e4%b8%89%ef%bc%9arecttransform/

Graphic Raycaster 是用來檢查UI輸入事件的圖形射線發射器。它主要負責透過射線檢查玩家和 UI 元素的交互，判斷是否點擊到了 UI 元素

Canvas Scaler 組件(Component)是控制 UI 縮放的組件。主要負責控制在不同解析度下 UI 元件大小縮放比例，讓 UI 可以自動適應不同的螢幕，但它不負責位置，位置由 (RectTransform)[/2024/07/05/2024-07-05-ugui-recttransform] 組件負責。

Canvas Size 為 Cavas 中 RectTransform 的寬高。

• 下圖中，
  • 左側的 Screen 為目前裝置的螢幕大小，下圖為 1012 x 515
  • Cavas 中 RectTransform 的 寬高＊縮放係數 = 螢幕解析度， (width * X scale) x (height * Y scale)， (1012 * 1) x (515 * 1)
    

Reference Resolution(參考解析度)：在 Scale With Screen Size 模式中，它會參與解析度自適應的計算

主要提供三種模式

• Constant Pixel Size(恆定像素模式)：不論螢幕大小如何，UI始終保持相同像素大小。
  • 一般在遊戲中不常用。
  • 它不會讓 UI 元件自動適應解析度大小，除非使用程式碼去修改
• Scale With Screen Size(縮放模式)：根據螢幕大小進行縮放
  • 在遊戲中最常用
• Constant Physical Size(恆定物理模式)：不論螢幕大小如何，UI元素始終保持相同物理大小
• World (世界模式)：當 Canvas 的 Render Mode 選擇為 World Space 時，會將 Canvas Scaler 變為 World。
  • 一般不常更改，主要像素密度，一般值越大越清晰。因此當文字模糊時，可以考慮加大這個值。

Constant Pixel Size(恆定像素模式)

Scale Factor

Scale Factor 縮放 Canvas 中所有 UI 元素。

當 Scale Factor 為 1 且 Screen Size=1024x768 則 Canvas Size 會為 1024x768，圖片大小為原樣

當 Scale Factor 為 2 且 Screen Size=1024x768 則 Canvas Size 會為 512x384，在其中的圖片大小看起來會放大 2 倍。

Reference Pixel Per Unit

Reference Pixel Per Unit 設定多少像素對應 Unity 中的一個單位，預設一個單位為 100 像素。

在計算時，圖片設定中的 Pixels Per Unit 設定會與此參數一起計算。(圖片設定中的 Texture Type 要設為 Sprite(2D and UI))，

當 Pixels Per Unit=100，表示每單位由 100 像素組成，而圖片解析度是512x512，那麼圖片在世界座標中大小就會變成 512/100 = 5.12x5.12 Unit
Sprite 在世界座標的大小 = 原圖片大小(像素) / Pixels Per Unit

UI的大小 = 原圖片大小(像素) / (Pixels Per Unit / Reference Pixels Per Unit)

Scale With Screen Size

Reference Resolution

Reference Resolution：參考解析度，美術人員出圖的標準解析度。一邊選擇市面上最常見的解析度作為標準。

• 使用在電腦上的話，可以用 1920x1080
• 假設你要用於 Android 或是 iOS 的手機遊戲的話，可以用 1080x1440

Screen Match Mode

Screen Match Mode：螢幕匹配模式，當目前螢幕解析度寬高不符合解析度時，用於解析度大小自適應的匹配模式。

Expand(擴大)

Expand：水平或垂直擴大 Canvas Size，讓它高於Reference Resolution，不會裁剪 UI 元素，可能會有黑邊。
計算公式：

• scaleFactor(縮放係數) = Mathf.Min(screenSize.x(螢幕寬) / m_ReferenceResolution.x(Reference Resolution寬), screenSize.y(螢幕高) / m_ReferenceResolution.y(Reference Resolution高))
• Canvas Size = 螢幕寬高 / scaleFactor(縮放係數)

例子： Reference Resolution 為 1920x1080 ， 螢幕(screen)解析度為 800x600。
scaleFactor = Mathf.Min(800/1920, 600/1080) = Mathf.Min(0.41667, 0.5555) = 0.41667
Canvas Size = (800,600) / 0.41667 = (1920, 1440)

效果：最大程度的顯示所有 UI 元素，保留 UI 所有的細節，可能會有黑邊。

Shirk(收縮)

Shirk：水平或垂直收縮 Canvas Size，讓它低於Reference Resolution，可能會被裁減。
計算公式：

• scaleFactor(縮放係數) = Mathf.Max(screenSize.x(螢幕寬) / m_ReferenceResolution.x(Reference Resolution寬), screenSize.y(螢幕高) / m_ReferenceResolution.y(Reference Resolution高))
• Canvas Size = 螢幕寬高 / scaleFactor(縮放係數)

例子： Reference Resolution 為 1920x1080 ， 螢幕(screen)解析度為 800x600。
scaleFactor = Mathf.Max(800/1920, 600/1080) = Mathf.Max(0.41667, 0.5555) = 0.5555
Canvas Size = (800,600) / 0.5555 = (1440, 1080)

效果：最大程度的放大 UI 元素，可能會被裁減。

Match Width Or Height

Match Width Or Height：以寬和高進行混合縮放。

• Match：用於計算寬高匹配值。
  • 當值為 0 時，適合直立螢幕模式的遊戲。將 Canvas Size 寬度設為 Reference Resolution 的寬度，並保持比例不變，螢幕越高時可能會出現黑邊。
  • 當值為 1 時，用在橫向螢幕模式的遊戲。將 Canvas Size 高度設為 Reference Resolution 的高度，並保持比例不變，螢幕越長時可能會出現黑邊。
    計算公式：

    1 2 3 4

    float logWidth = Mathf.Log(screenSize.x / m_ReferenceResolution.x, kLogBase); float logHeight = Mathf.Log(screenSize.y / m_ReferenceResolution.y, kLogBase); float logWeightedAverage = Mathf.Lerp(logWidth, logHeight, m_MatchWidthOrHeight); scaleFactor = Mathf.Pow(kLogBase, logWeightedAverage);

使用建議

• 存在直立螢幕模式和橫向螢幕模式的遊戲選擇使用 Expand 或 Shirnk
• 不存在螢幕模式切換的遊戲（即定死為直立螢幕模式或是橫向螢幕模式）選擇使用 Match Width Or Height
• 直式螢幕稱為 Portrait ，橫式螢幕 Landscape

Constant Physical Size(恆定物理模式)

DPI (Dots Per Inch，每英吋點數)

DPI：圖像每英吋長度內的像素點數

Physical Unit

Physical Unit：物理單位，使用的物理單位種類

• Centimeters(cm 公分)：1 英吋 = 2.54 公分
• Millimeters(mm 公釐)：1 英吋 = 25.4 公釐
• Inches(英吋)： 1 英吋 = 1 英吋
• Points (點)： 1 英吋 = 72 點
• Picas (派卡)： 1 英吋 = 6 派卡

Fallback Screen DPI：備用 DPI ，當找不到裝置 DPI 時，使用此值

Default Sprite DPI：預設圖片 DPI

計算公式：根據 DPI 算出新的 Reference Pixels Per Unit
新 Reference Pixels Per Unit = Reference Pixels Per Unit ＊ Physical Unit / Default Sprite DPI

UI的大小 = 原圖片大小(像素) / (Pixels Per Unit / 新 Reference Pixels Per Unit)

根據裝置的 DPI 進行計算，在不同裝置上的顯示大小更加準確

World 模式

當 Canvas 的 Render Mode 選擇為 World Space 時，會將 Canvas Scaler 變為 World ， 3D 世界模式。

Dynamic Pixels Per Unit

UI 中動態建立的點陣圖(例如文字)，中的單位像素(類似密度)。一般值越大越清晰。因此當文字模糊時，可以考慮加大這個值。

Reference Pixels Per Unit

單位參考像素，多少像素對應 Unity 中的一個單位，預設一個單位為 100 像素。

Reference:

• https://www.arkaistudio.com/blog/2016/03/28/unity-ugui-%e5%8e%9f%e7%90%86%e7%af%87%e4%ba%8c%ef%bc%9acanvas-scaler-%e7%b8%ae%e6%94%be%e6%a0%b8%e5%bf%83/
• https://forum.unity.com/threads/what-reference-resolution-and-game-view-settings-should-i-use.1088650/

Canvas 組件(Component)為 UGUI 中的根本，主要用來渲染自己的所有 UI 組件。UI 組件必須要為 Canvas 組件的子組件才可正常顯示。

Render Mode

UI 渲染方式有以下三種

• Screen Space - Overlay(預設)：螢幕空間，覆蓋模式，
  • UI 始終顯示在場景(Scene)內容前方。
  • Pixel Perfect：是否開啟無鋸齒精確渲染，性能換效果，當勾選時會有較好的 UI 顯示，但是較耗費性能
  • SortOrder：排序層編號，用於控制多個 Canvas 時的渲染先後順序。該值越高顯示越前面
  • Target Display：目標裝置，在哪個裝置上顯示。
  • Additional Shader Channels：其他著色器通道，決定著色器可以讀取哪些資料。
• Screen Space - Camera：螢幕空間，攝影機模式，
  • 3D 物體可以顯示在 UI 之前。
  • Render Camera：用於渲染UI的攝影機，如果不設定，則會類似於覆蓋模式
    • 一般不建議直接使用主攝影機去渲染 UI
  • Plane Distance：UI 平面在攝影機前方的距離，類似整體 Z 軸的感覺。值越小該 Canvas UI 越靠近攝影機。
  • Sorting Layer：Canvas屬於的排序層，可在 Edit -> Project Setting -> Tags and Layers -> Sorting Layers 進行新增與編輯，越下方的層顯示越前面
  • Order in Layer：Canvas在所屬排序層下的順序，該值越高顯示越前面
  • 例如角色狀態，一般會選這種模式，因為玩家角色物件要顯示在 UI 前面。
• World Space： 世界空間，3D模式。
  • Event Camera：用於處理 UI 事件(Click、Drag)的攝影機。如果不設定，不能正常註冊UI事件，有就是說如果沒設定則像是 Click 事件就無法正常使用。
    • 一般使用主攝影機
  • 把 UI 當作 3D 物件，可以圍著人物或其他物件旋轉，移動。

Reference:

• https://www.bilibili.com/video/BV14N411Z7Fz?p=3&vd_source=f103d4eb21cc24456defbcf356882852

ScriptableObject 是一個資料容器(Data container)，用於儲存資料並作為資源（Asset）在執行時使用。除了基本的資料儲存功能外，它還有多種特殊用法。

1. ScriptableObject 基礎
2. 將 ScriptableObject 當作變數，在物件之間分享
3. 在事件系統中，將 ScriptableObject 當作事件(Event)物件
4. 將 ScriptableObject 當作物件集合容器，在執行期間，讓這個集合容器在物件之間分享
5. 將 ScriptableObject 當作 Enum 使用
6. 將 ScriptableObject 當作 委託(delegate)物件，在物件需要時將物件傳入委託它完成對應的動作
7. 將 ScriptableObject 作為 Dependency Injection 的工具

錄製遊戲影片是時間管理中的一個特例。保存螢幕圖片的操作需要耗費相當多的時間，這會導致遊戲的正常幀率降低，錄製出的影片無法反映遊戲的實際表現。為了解決這個問題，可以使用 captureFramerate 屬性。該屬性的預設值為 0，表示未錄製遊戲。如果要進行錄製，則需要將該屬性的值設為非零值，此時遊戲時間會變慢，幀更新會在精確的間隔內發生。
幀之間的間隔等於 1/Time.captureFramerate，所以如果將值設置為5.0，則更新每五分之一秒發生一次。由於幀率需求有效降低，在 Update 方法中有時間保存螢幕截圖或執行其他操作。

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

public class ExampleScript : MonoBehaviour {
    string folder = "ScreenshotFolder";
    int frameRate = 25;
        
    void Start () {
        Time.captureFramerate = frameRate;
        System.IO.Directory.CreateDirectory(folder);
    }
    
    void Update () {
        string name = string.Format("{0}/{1:D04} shot.png", folder, Time.frameCount );
        
        // 抓取螢幕截圖，並存放到指定位置
        Application.CaptureScreenshot(name);
    }
}

返回 時間與幀 大綱

以下將說明各種 Time 類中的屬性是如何回報與響應幀率的巨大變化；下面的表格展示了 Unity 執行了 16 幀的情況，其中第 8 幀出現一個大延遲。

在第 1 到第 7 幀中，

• 從 time 和 unscaledTime 可以發現這些值穩定的增加，約為 60 幀， timeScale 設為 1 。

在第 8 幀中，出現了超過一秒的大延遲，

• 當幀延遲超過 maximumDeltaTime 的值時，Unity 會限制 deltaTime 回報的值以及增加到目前時間的量。這個限制的目的是避免如果時間步長超過這個數值可能會發生的不良副作用。
  • 所謂的不良副作用：像這樣的延遲會導致 deltaTime 的值變得非常大。例如，如果延遲超過一秒，deltaTime 可能會超過 1.0 秒。如果一個物體的移動量是透過 deltaTime 縮放的，這樣大的 deltaTime 值會導致物體在一幀內移動非常大的距離，可能直接穿過遊戲中的牆壁或其他障礙物，導致遊戲中不希望看到的「穿牆」現象。

下圖表中可以看到在第 8 幀時， unscaledDeltaTime 超過一秒(1.016)，但是 deltaTime 回報的是 0.333 ，這是因為 deltaTime 被 maximumDeltaTime 限制。

在第 8 幀時， unscaledTime 增加將近一秒(1.123)的時間，但是 time 只增加較小的時間(0.440)，這是因為 time 加上的是被限制的 deltaTime (即 maximumDeltaTime 的值)。簡單的說：

• unscaledTime 代表從遊戲開始到目前幀的真實經過時間，不受限制。
• time 代表遊戲開始到目前幀的經過時間，但是受 maximumDeltaTime 限制。

Time.smoothDeltaTime 提供了最近一段時間內 deltaTime 的平滑近似值，這種平滑處理可以避免在計算中突然出現的波動，這種平滑的演算法無法預測未來的變化，但是可以讓回報的時間較平滑，因此可以比較符合實際預期的時間。

maximumDeltaTime 也會影響物理系統，物理系統使用 fixedTimestep 值來決定每個固定步長中模擬的時間量。Unity 嘗試保持物理模擬與實際經過的時間同步，有時會在一幀內執行多次物理更新。然而，如果由於某些重計算或延遲導致物理模擬落後太多，系統可能需要多次步驟來追趕當前時間。這種大量的步驟可能進一步導致性能下降。

• 為了避免由於試圖追趕而導致的逐步減慢，maximumDeltaTime 值還作為物理系統在任何給定兩幀之間模擬時間的上限。
• 如果一次幀更新的處理時間超過了 maximumDeltaTime，物理引擎將不會試圖模擬超過 maximumDeltaTime 的時間，而是讓幀處理趕上。一旦幀更新完成，物理模擬將恢復，就像它停止後沒有時間流逝一樣。這樣做的結果是，物理物體將不會像通常那樣以完全實時移動，而是會略微減速。然而，物理的「時鐘」仍然會跟踪它們，就好像它們在正常移動一樣。物理時間的減速通常不容易察覺，並且通常是在遊戲性能與實時物理模擬之間的可接受折衷。

返回 時間與幀 大綱

flowchart TD
    A["`deltaTime`"] --> B{"`deltaTime 
                             是否比
                             maximumDeltaTime 大？`"}
    B -- 是 --> C[deltaTime 的值設為
maximumDeltaTime]
    C --> D
    B -- 否 --> D[ deltaTime 
被加到 time 中 ]
    D --> E{"`fixedTime 
              是否落後 Time.time 
              一個固定時間步長？`"}
    E -- 是 --> F[ fixedDeltaTime 
加到 fixedTime中 ]
    F --> G[ 執行 FixedUpdate ]
    G --> E
    E -- 否 --> H[ 執行 Update ]

Time.time ：為遊戲開始後經過的時間，以秒為單位，一般會持續穩定的增加，只可讀。

• 受 timeScale 影響，如果 Time.timeScale 設為 0 ，那麼 Time.time 會停止計時，可以達到遊戲暫停的功能。
• 受 maximumDeltaTime 限制。
• 當在 FixedUpdate 中呼叫時，回傳的是 Time.fixedTime 的值。
• 通常用於關於整場遊戲計時的計算。

Time.deltaTime ：從上一個幀到目前幀之間的時間間隔，以秒為單位。

• 可以在遊戲中用來製作倒數裝置，例如施放技能的時間變化。

Time.timeScale ：時間流逝的縮放程度，可以用在實現慢動作效果，預設為 1.0 。

• 當為 1.0 時，表示遊戲時間和真實時間同步，
• 如果設為 0.5 則遊戲時間以半速運行。
• 設為 0.1 可以實現慢動作效果，這表示播放速度為正常速度的 10%。經過十秒之後 Time.time 的值會增加 1。
• 當為 0 時，則時間停止，但是遊戲邏輯(像是 Update 方法仍然會被呼叫)與渲染事件仍然會被觸發。但 Time.time 不會增加，Time.deltaTime 也為 0。

Time.maximumDeltaTime ：上面的屬性會被 Time.maximumDeltaTime 限制，這表示這些屬性任何幀率變化的長度永遠不會超過 Time.maximumDeltaTime，例如，如果發生一秒的延遲，且 maximumDeltaTime 為 0.333，那麼 Time.time 只會增加 0.333，而 Time.deltaTime 也會等於 0.333，儘管實際上已經過了更多時間。

• unscale版本的屬性(如Time.unscaledTime和Time.unscaledDeltaTime)會忽略這些變化和限制，並回報實際經過的時間。對於需要在遊戲慢動作播放時仍以固定速度響應的任何事物都很有用。例如，用於 UI 交互動畫。

返回 時間與幀 大綱

Reference:

• https://docs.unity3d.com/uploads/Main/time-flowchart.png