目錄

1 圖片 image

1.1 如果直接導入image

1.2 圖片 image 和精靈 sprite

1.2.1 繼續修改上面的格式 texture type 是default

1.2.2 再次關聯到UI的 image 物體上就可以了

1.3 圖片和遮罩 mask

1.3.1 創建1個父物體和1個子物體，分別都是image

1.3.2? 如果父物體增加一個 mask的component

1.3.3 那什么是UI里所說的遮罩 mask ? 補集

2 text：新舊2種文本

2.1 區別

2.2 下面新建2種 text進行測試

3 舊版文本： legacy - text

3.1 文本的屬性

3.2 文本的默認

3.3 支持富文本

3.4 支持溢出 和截斷處理

3.5? best fit 時，文本框大小不變，自動修改字體的大小保證全部顯示

3.6 color

3.7 raycast

4 新版文本:? ?text?TMP/TextMesh Pro?

4.1 創建后，需要import這個TMP包

4.2 新版 tmp-text 的屬性

4.3 設置文本的各種類型

4.4 字體 font 相關

4.5 color 且有漸變色

4.6? 間隔設置等

4.7 對齊 alignment 和 overflow 溢出處理

5 內容適應器： content size fitter

（根據文字內容，動態調整文本框的大小，和前面不同）

---

1 圖片 image

• UI的基礎就是圖片
• 可以把canvas ， panel 都看成圖片
• 尤其是panel面板是自帶 image這個componet的，本身就是一個用圖片改的容器

1.1 如果直接導入image

• 我從網上直接down一個圖下來，png的
• 可以直接拖到project里
• 可以看到 texture type 是default

• 會發現如果往UI里新建的image對象的 源圖像里拖入
• 無法拖入
• 這是為什么？ 因為 這個源圖像，格式不對

1.2 圖片 image 和精靈 sprite

• 圖片導入unity后，有很多種格式
• 一般來說, image 都是默認格式
• 但是如果需要在2D 或者 UI下使用，必須先把圖片類型修改為 sprite才可以

1.2.1 繼續修改上面的格式 texture type 是default

• 繼續修改上面的格式 texture type 是 sprite

1.2.2 再次關聯到UI的 image 物體上就可以了

1.3 圖片和遮罩 mask

1.3.1 創建1個父物體和1個子物體，分別都是image

• 創建1個父物體和1個子物體，分別都是image
• 可以發現子物體，可以顯示超過父物體，顯示在外面

1.3.2? 如果父物體增加一個 mask的component

如果父物體增加一個 mask的component

1.3.3 那什么是UI里所說的遮罩 mask ? 補集

• 我理解，就是除了這個 圖片，外面所有的地方都是遮罩
• 也就是，灰色的區域
• 灰色區域：一個挖了一個洞的整個圖都是mask
• 從數學的概念理解： 就是imageA的 補集 = 全集合 - imageA

2 text：新舊2種文本

2.1 區別

• 雖然是2套
• 每套里，包含4個： 文本，按鈕，下拉框，輸入框。每套里，實際是只有文本不同
• 比如，新版TMP的按鈕，只是button上的文本用的新版的text-tmp 其他都一樣

• 第1套： 文本，按鈕，下拉框，輸入框
• 第2套 TMP： TMP文本，TMP按鈕，TMP下拉框，TMP輸入框

2.2 下面新建2種 text進行測試

3 舊版文本： legacy - text

3.1 文本的屬性

3.2 文本的默認

• legacy - text
• 默認是黑色，而且字體很小，要注意。。。。

3.3 支持富文本

• 富文本的語法，類html那種

3.4 支持溢出 和截斷處理

對比下效果很明顯

3.5? best fit 時，文本框大小不變，自動修改字體的大小保證全部顯示

• best fit 時，文本框大小不變，自動修改字體的大小保證全部顯示
• 但是字體的大小范圍還是有限制

3.6 color

3.7 raycast

如果不勾選，則無法被點擊操作等選中

4 新版文本:? ?text?TMP/TextMesh Pro?

4.1 創建后，需要import這個TMP包

4.2 新版 tmp-text 的屬性

4.3 設置文本的各種類型

4.4 字體 font 相關

很多內容

字體庫，材質，模式。大小等等

4.5 color 且有漸變色

4.6? 間隔設置等

各種間隔設置

• 字符之間的
• 詞語之間的
• 行之間的
• 段落之間的

4.7 對齊 alignment 和 overflow 溢出處理

5 內容適應器： content size fitter

（根據文字內容，動態調整文本框的大小，和前面不同）

一個文本框顯示效果

可以動態根據文字內容，實時動態的修改文本框的大小，去適應文字內容

這樣就會自動根據文字內容，調整文本框大小了