---
tags: 'NCUGC'
---
# 程式分線課程-UI介面程式設計
> 2020.03.10
> 講師：google哥
> 素材包：[下載](https://drive.google.com/file/d/1hHFLcXiGsf1vIVqzmRwV3mYgAlBUIFce/view)
> 簡報：https://hackmd.io/@JCxYIS/Hy4Ut13N8
> 簡報內容：https://hackmd.io/EYHIEqgcR06H1L-0mz9GTg?both

[toc]

## Unity da UI tools
- onGUI (deprecated)
- NGUI (OwO民間的插件的說)
- ==UGUI== (unity內建)
- FairyGUI
- 跨平台
- 類 adobe XD
- PowerUI/Marklight
- using html syntax
- ...

## Unityㄋㄋㄋ
:::warning
### :heavy_exclamation_mark:注意
1. UI layer的前後排序是 "下面" 的在 "前面"
2. 拉UI時 `Anchors` 的位置要注意
:::
### Canvas
> create/UI/Canvas
- UI 渲染的地方
- 自動添加 `Event System`
- 會依照螢幕大小來縮放
:::warning
螢幕太大時 Canvas 會遮不住全部!?
-- `Canvas Scaler`
:::

- Canvas Scaler
- 
- constant Pixel size
- 固定pixel比例
- 用高畫質螢幕時就可能變的感覺很小！
- Scale with Screen Sizze
- 隨螢幕大小(畫質)縮放
- constant pysical size
- 固定大小(物理)(隨著螢幕寸數縮放)

#### Text
> create/UI/text


- horizontal overflow
- Overflow / wrap
- best fit
- 自動調整UI大小
- 有些UI設計師不喜歡這個功能，因為會影響一致性
- material
- RICH TEXT
- e.g. `<color='red'>the text</color>`
-

#### Image
> Component/UI/image
- source_imge:
- sprite (功能多但是耗資源)
- 直接用 texture (只是圖，但是省資源)
- attribute (在載入`sourceImg` 後才能設定)

#### Button
> Component/UI/button
- 可以放字/圖片
- interactable
- on click functions
- 在按下按鈕時，執行某 script 裡的某 method

#### Slider
> create/UI/slider
> 可以做血條歐[name=Google.bro]

#### Drop Down
> Component/UI/dropDown

#### Input Field
> Component/UI/inputField
- 要在object 下再掛script，在script裡讀輸入文字

#### Scroll View
> Component/UI/scrollView

- 內容在:`ScrollView/ViewPort/Content`
- 想要放什麼就在 Content 那掛什麼
- e.g. 加文字
- Content => `Add component/text`

#### Mask
> Component/UI/mask
- 遮住子物件
- Rect Mask 2D
- 矩形遮罩
- 
- Sprite Mask
- 用 sprite 作為 Mask (把輸入圖片蓋上去)

### Layout Group
> - Grid Layout Group
> - Horizontal Layout
> - Vertical Layout
- 自動排列子物件
- 各式各樣的排列方法

### Layout Element
- 是拿來放在 Layout Group 底下的子物件的 Component

### Content Size Fitter
- 把子物件自動排版

## 實作嘍～
> 沒空寫這邊QQ

## 如果你不想麻煩了話
:::success
### :credit_card:<span class='card'> ！使用你的魔法小卡！ </span>:credit_card:
> [name=Google.bro]
:::

<style>
.card {
animation: rainbow 0.2s infinite;
}
@keyframes rainbow {
0% { color: red; }
25% { color: yellow;}
50% { color: green; }
75% { color: blue; }
100% { color: red; }
}
</style>