推薦：將NSDT場(chǎng)景編輯器加入你的3D工具鏈

3D工具集：NSDT簡(jiǎn)石數(shù)字孿生

制作可任意拉伸的 UI 圖像

UI 系統(tǒng)核心的設(shè)計(jì)原則是能夠自動(dòng)適應(yīng)各種不同的設(shè)備屏幕尺寸，因此我們?cè)谥谱?UI 時(shí)需要正確設(shè)置每個(gè)控件元素的尺寸（size），并且讓每個(gè)控件元素的尺寸能夠根據(jù)設(shè)備屏幕的尺寸進(jìn)行自動(dòng)的拉伸適配。為了實(shí)現(xiàn)這一點(diǎn)，就需要使用九宮格格式的圖像來(lái)渲染這些元素。這樣即使使用很小的原始圖片也能生成覆蓋整個(gè)屏幕的背景圖像，一方面節(jié)約游戲包體空間，另一方面能夠靈活適配不同的排版需要。

上圖右邊為原始貼圖大小的顯示，左邊是選擇 Sliced 模式并放大 size 屬性后的顯示效果。

編輯圖像資源的九宮格切分

要使用可以無(wú)限放大的九宮格圖像效果，我們需要先對(duì)圖像資源進(jìn)行九宮格切分。首先打開 Sprite 編輯器，在 資源管理器 中選中圖像資源，然后點(diǎn)擊 屬性檢查器 最下面的 編輯 按鈕。如果您的窗口高度不夠，可能需要向下滾動(dòng) 屬性檢查器 才能看到下面的按鈕。

打開 Sprite 編輯器 以后，可以看到圖像周圍有一圈綠色的線條，表示當(dāng)前九宮格分割線的位置。將鼠標(biāo)移動(dòng)到分割線上，可以看到光標(biāo)形狀改變了，這時(shí)候就可以按下并拖拽鼠標(biāo)來(lái)更改分割線的位置。

我們分別拖動(dòng)上下左右四條分割線，將圖像切分成九宮格，九個(gè)區(qū)域在 Sprite 尺寸（size）變化時(shí)會(huì)應(yīng)用不同的縮放策略，見下圖：

而下圖中描述了不同區(qū)域縮放時(shí)的示意（圖片來(lái)自 Yannick Loriot 的博客）：

完成切分后別忘記點(diǎn)擊 Sprite 編輯器 右上角的綠色對(duì)勾來(lái)保存對(duì)資源的修改。

設(shè)置 Sprite 組件使用 Sliced 模式

準(zhǔn)備好九宮格切分的資源后，就可以修改 Sprite 的顯示模式并通過修改 size 來(lái)制作可任意指定尺寸的 UI 元素了。

1. 首先選中場(chǎng)景中的 Sprite 節(jié)點(diǎn)，將 Sprite 的 Type 屬性設(shè)為 Sliced。

2. 然后通過 矩形變換工具 拖拽控制點(diǎn)使節(jié)點(diǎn)的 size 屬性變大。您也可以直接在 屬性檢查器 中輸入數(shù)值來(lái)修改 size 屬性。如果圖像資源是用九宮格的形式生產(chǎn)的，那么不管 Sprite 如何放大，都不會(huì)產(chǎn)生模糊或變形。

注意事項(xiàng)

在使用 矩形變換工具 或直接修改 Sliced Sprite 的 size 屬性時(shí)，注意 size 的屬性值不能為負(fù)數(shù)，否則不能以 Sliced 模式正常顯示。