一、為什么要使用九宮格圖像拉伸

相信做過前端的同學都知道，ui （圖片）資源對包體大小和內(nèi)存都有非常直接的影響。

• 通常ui 資源都是圖片，也是最占資源量的資源類型，游戲中的ui 資源還是人機交互的最重要的部分，因此質(zhì)量要求都非常高，通常都是使用rgb32位真彩色，這就導致資源量比較大。

• 通常ui資源在打包時，都會以圖集的形式展現(xiàn)，在加載到內(nèi)存的時候，是整塊加載，如果ui 沒優(yōu)化好，則會增大內(nèi)存的開銷。

  
  

因此為了減少資源量，增強ui 資源的復用，解決圖片被拉伸變形、模糊的問題， 通常使用九宮格ui 的方式來對資源進行優(yōu)化。

如下圖：

我們可以看到，圖像周圍有一圈綠色的線條，表示當前九宮格分割線的位置。

將鼠標移動到分割線上，可以看到光標形狀改變了，這時候就可以按下并拖拽鼠標來更改分割線的位置。

我們分別拖動上下左右四條分割線，將圖像切分成九宮格，九個區(qū)域在 Sprite 尺寸（size）變化時會應用不同的縮放策略。

二、九宮格圖像拉伸使用步驟

（1）、設(shè)置 Sprite 組件使用 Sliced 模式

（2）、在資源管理器中，選擇需要調(diào)整九宮格的 spriteFrame 資源

（3）、在屬性檢查器中，選擇最下方的“Edit”編輯按鈕

（4）、在九宮格編輯窗口，編輯上、下、左、右邊框的位置

三、九宮格圖像拉伸調(diào)整技巧

• 可以鼠標滾輪放大圖片預覽試圖，便于精準調(diào)整邊框位置。

• 如果不知道邊框位置應該調(diào)整到多少合適，可以參考美術(shù)設(shè)計圖的圓角角度進行調(diào)整。

  如圖，我們需要以九宮格拉伸實現(xiàn)以下帶圓角的背景框效果：

我們根據(jù)藍湖上，設(shè)計圖的圓角角度（此處為12） ，依次調(diào)整邊框位置，即可達到預期效果：

編輯器調(diào)整：