Unity(5)-UGUI(1)

UGUI是什麼

Unity圖形使用者界面Unity Graphical User Interface是Unity4.6以上版本新加入的界面顯示系統。

Unity界面發展史

與OnGUI對比

• 全新的布局系統：Rect Transform、Layout Group
• 強大的時間機制：滑鼠指針類、拖拽類、點選類、輸入類
• 最佳的執行效能：減少了GPU負擔

與NGUI對比

• 由NGUI創始人參與開發
• 自适應系統更完善
• 更友善的深度處理
• 淡化了Atlas，直接使用Sprite Packer
• UGUI沒有Tween元件
• 開發效率暫時低于NGUI

基礎控件

Canvas畫布

• 簡介

  畫布，繪制UI元素的載體，所有UI元素必須在Canvas之下。UI元素的繪制順序依賴于層次面闆中的順序。

• 屬性
• Render Mode渲染方式

  

  • Screen Space-Overlay覆寫模式：UI元素将繪制在其他元素之前，且繪制過程獨立于場景元素和錄影機設定，畫布尺寸由螢幕大小和分辨率決定。
    • Pixel Perfect完美像素：若勾選，則會銳化螢幕顯示效果。
    • Sort Order渲染順序：在多個Canvas中，值越大越渲染到最上層。
  • Screen Space-Camera錄影機模式：提供UICamera，Canvas對象繪制在一個與錄影機固定距離的平面上，且繪制效果受錄影機參數的影響。
    • Render Camera渲染錄影機
    • Plane Distance平面與錄影機的距離
    • Sorting Layer排序層：通過Edit–Project Settings-Tags and Layers調整Canvas渲染順序。
  • World Space世界空間模式：畫布渲染于世界空間，與場景中其他3D物體性質相同。

Rect Transform

• 簡介

  派生自Transform，在UGUI控件上代替原有變換元件，表示一個可容納UI元素的矩形。

• 屬性
  • Pos：控件軸心點相對于自身錨點的位置。

  • Anchor錨點：UI元素的4個頂個與錨點的間距保持不變錨點總是相對于父級，不能超越父物體範圍

    表示點–> PosX PosY Width Hight

    表示拉伸–>Left Right Top Bottom

  • Pivot軸心點：移動、旋轉與縮放都圍繞軸心點發生變化，0,0為左下頂點，1,1為右上頂點。

Image圖檔

• 屬性
  • Image Type貼圖類型：
    • Simple簡單
      • Preserve Aspect 保持貼圖原始比例
      • Set Native Size将貼圖設定為原始尺寸
    • Sliced 切割
      • Fill Center填充中部區域，如果取消中部區域為透明
    • Tiled平鋪
      • 保持圖檔原始尺寸，從左下角重複多次填充空白
    • Filled填充
      • 可以呈現出從空白到完整填充的過程

Text 文本标簽

• 屬性
• Character 字元
• Font 字型
• Font Style 樣式
• Font Size 大小
• Line Spacing 行間距
• Rich Text 是否使用富文本樣式
• Paragraph 段落
• Alignment 對齊方式
• Horizontal / Vertical Overflow 水準 / 垂直 溢出
• Best Fit 大小自适應 範圍在Min Size 與Max Size之間
• Color 顔色
• Material 材質
• 富文本文法

<b>粗體</b>
<i>斜體</i>
<size=14>字号</size>
<color=green>顔色</color>
           

效果：

NGUI圖文混排可參照該部落格：https://blog.csdn.net/qq992817263/article/details/51000744

Button 按鈕

• 屬性
• Interactable 是否啟用互動
• Transaction 過渡方式
  • Color Tint 顔色過渡
  • Normal 正常 Highlighted 高亮 Pressed 點選
  • Disabled 禁用 Multiplier 顔色倍數
  • Fade Duration 變化時間
  • Sprite Swap 精靈切換過渡
  • Animation 動畫過渡
  • Navigation 導航
    • Horizontal 水準導航
    • Vertical 垂直導航
    • Automatic 自動導航
    • Explicit 顯示導航
  • visualize 可視化–顯示導航路徑

Input Field 輸入框

• 屬性
• Character Limit 字元數量限制
• Content Type 内容類型
  • Standard 标準 Autocorrected 自動驗證
  • Integer Number 數字 Decimal Number 小數
  • Alphanumeric 字母數字 Name 姓名
  • Email Address 郵件位址 Password 密碼
  • Pin 僅輸入整數，用*隐藏字元
  • Custom 自定義
• Line Type 行類型
  • Single Line 單行
  • Multi Line Submit 多行文本，回車送出
  • Multi Line Newline 多行文本，回車換行
• Caret Blink Rate 光标閃爍速度
• Selection Color 選擇的字元顔色

Toggle開關

• 屬性
• Is On 複選框的選中狀态
• Toggle Transaction 狀态改變時，是否啟動過渡效果
• Graphic 切換的背景圖檔
• Group 單選組

Slider 滑塊

• 屬性
• Fill Rect 填充矩形區域
• Handle Rect 搖桿矩形區域
• Direction 搖桿方向
• Min/Max Value 最小/最大值
• Whole Numbers 整數數值
• Value 數值

Scrollbar 滾動條

• 屬性
  • Size 搖桿大小
  • Number of Steps 從開始 滑動 到末尾的步驟

Dropdown