怎樣使用UGUI

標籤：

什麼是 UGUI

UGUI 是 Unity 內建的一套 GUI 系統，含有基本的一些 UI 控制項。

UGUI 控制項有哪些？

我們常用的有 Canvas，Text，Image，Button，Toggle，Slider，Scroll Bar，Scroll View，Input Field。

怎樣建立 UI 控制項

在 Hierarchy 中右鍵添加

在功能表列的 Component 中添加

Canvas

Canvas 是所有 UI 控制項的根節點，即所有 UI 控制項均需要在 Canvas 下。

所示即一個 Canvas 包含了多個 UI 控制項。

Text

用來顯示文本的。

• Text：即顯示的常值內容。

• Font：文字的字型。

• Font Style：字型的形式，有正常，加粗，斜體，加粗斜體幾種可選。

• Font Size：字型的大小。

• Line Spacing：行間距。

• Rich Text：是否支援富文本。

• Alignment：對齊。

• Align By Geometry：幾何對齊

• Horizontal Overflow：橫向裁剪方式。

  • Wrap：裁剪
  • Overflow：不裁剪

• Vertical Overflow：豎向裁剪方式。

  • Truecate：裁剪
    
    • Overflow：不裁減

• Best Fit：是否最佳適應當前大小。

• Color：字型的顏色。

• Material：字型的材質。

• Raycast Target：是否可被點擊到。

Image

用來顯示圖片的。

• Source Image：顯示的源圖片。

• Color：給圖片疊加的顏色。

• Material：圖片的材質。

• Raycast Target：是否可被點擊到。

• Image Type：圖片的類型。

  • Simple：普通類型

    • Preserve Aspect：是否保持圖片的外形比例
    • Set Native Size：設定為圖片的原大小

  • Sliced：九宮格

    • Fill Center：是否填充中間部分

  • Tiled：平鋪

    • Fill Center：是否填充中間部分

  • Filled：填充

    • Fill Method：

      • Horizontal：橫向填充
      • Vertical：縱向填充
      • Radial 360：360 度填充
      • Radial 180：180 度填充
      • Radial 90：90 度填充

    • Fill Origin：填充起點

    • Fill Amount：填充量
    • Clockwise：是否按時鐘方向
    • Preserve Aspect：是否保持圖片的外形比例
    • Set Native Size：設定為圖片的原大小

Button

遊戲中使用的按鈕。

展示了按鈕一般由圖片和文字組成

• Interactable：按鈕當前是否啟用可用

• Transition：過渡方式

  • Color Tint：顏色過渡.

    • Target Graphic：控制顏色的對象
    • Normal Color：正常時的顏色
    • Highlighted Color：懸浮高亮時的顏色
    • Pressed Color：點擊按下時的顏色
    • Disabled Color：禁止不可用時的顏色
    • Color Mutiplier：顏色乘數
    • Fade Duration：漸層過渡時間

  • Sprite Swap：圖片過渡

    • Target Graphic：控制變化圖片的對象
    • Highlighted Sprite：懸浮高亮時的圖片
    • Pressed Sprite：點擊按下時的圖片
    • Disabled Sprite：禁止不可用時的圖片

  • Animation：動畫過渡

    • Normal Trigger：正常時的動畫觸發
    • Highlighted Trigger：懸浮高亮時的動畫觸發
    • Pressed Trigger：點擊按下時的動畫觸發
    • Disabled Trigger：禁止不可用時的動畫觸發
    • Auto Generate Animation：自動產生動畫

• Navigation：導航方式

  • None：無
  • Horizontal：橫向
  • Vertical：縱向
  • Automatic：自動
  • Explicit：自訂

• Visualize：導航線是否可見

Toggle

開關，適用於單選或者複選或者控制其他控制項的顯示或隱藏。

顯示一個 Toggle 一般由底圖，文本和一個是否選中的圖片組成。

大部分類似於 Button。

• Is on：是否預設處於開啟狀態

• Toggle Transtion：開關過渡方式

  • Fade：漸層過渡
  • None：無

• Graphic：開關控制的對象

• Group：所屬於的 Toggle Group。（所屬同一個 Toggle Group 的可以存在互斥狀態）

Slider

滑杆。

所示一個滑杆由背景，滑杆進度，滑塊三部分組成。

大部分類似於 Button。

• Fill Rect：填充的對象

• Handle Rect：滑杆對象

• Direction：滑動的方向

  • Left to Right：由左往右
  • Right to Left：由右往左
  • Bottom to Up：由下往上
  • Up to Bottom：由上往下

• Min Value：最小值

• Max Value：最大值

• Whole Numbers：是否只允許整數進度值

• Value：當前值

Scroll Bar

捲軸。

所示捲軸由背景和滑塊組成。

大部分類似於 Slider。

• Size：滑塊的比例大小

• Number of Steps：進度的塊數

Scroll View

捲動區域。

所示捲動區域由背景，遮罩和顯示內容組成。

• Content：顯示的內容框

• Horizontal：是否可以橫向滾動

• Vertical：是否可以縱向滾動

• Movement Type：

  • Unrestricted：無限制的滾動，無復原
  • Elastic：有限制的滾動，有復原
  • Elasticity：復原係數，數值越大彈性越小
  • Clamped：有限制的復原，無復原

• Inertia：慣性

  • Deceleration Rate：減速率

• Scroll Sensitivity：滾動靈敏度

• Viewport：可視地區

• Horizontal Scrollbar：橫向滾動控制條

• Vertical Scrollbar：縱向滾動控制條

Input Field

輸入框。

所示輸入框由背景，預設文本和輸入文本組成。

大部分類似於Button。

• Text Component：輸入文本組件

• Text：常值內容

• Character Limit：限制字元長度 (0 表示不限制)

• Content Type：驗證輸入類型

  • Standard：標準
  • Autocorrented：自動修正
  • Integer Number：整數
  • Decimal Number：可帶小數
  • Alphanumeric：數字和字母混合
  • Name：字母
  • Email Address：郵箱
  • Password：密碼
  • Pin：數字密碼
  • Custom：自訂

• Placeholder：最初顯示文本

• Caret Blink Rate：游標閃動速率

• Caret Width：游標寬度

• Custom Caret Color：游標顏色

• Selection Color：被選中部分顏色

• Hide Mobile Input：是否隱藏手機輸入

• Read Only：是否唯讀

簡單的控制群組合

其中包含了常用的基本控制群組合。

例子下載

怎樣使用UGUI