- 轉載自注明: https://blog.csdn.net/andyhebear/article/details/50476802
本篇文章我們來學習下在unity new ui即UGUI九宮格紋理拉伸的使用，不論是遊戲中的UI，還是應用中的UI，紋理九宮格拉伸都是必不可少的，因為采用這種拉伸方式，可以最大化的節省紋理資源，任意縮放圖檔還能保持一個不錯的效果，是以在手遊和app中用的較多。我們先學習下九宮格拉伸的原理先，如下圖所示！
1.原理
把紋理用4條線分割成9部分（如上圖），通過觀察可以發現，5是最規則的形狀（矩形），其次是2,6,8,4（矩形，但是和四個角有公共邊），最後是四個角1,3,9,7（圓角矩形）
規則的圖形在拉伸之後的效果是比較好的，如果是不規則的圖形，則會在拉伸之後變形！
根據上圖做拉伸制定規則：
（1）保證四個角1,3,9,7不做任何拉伸
（2）與四個角有公共邊的四個矩形2,6,8,4做單向拉伸，即保證與四個角的公共邊不拉伸，例如2,8隻進行橫向拉伸，4,6隻進行縱向拉伸
（3）中間部分5做雙向拉伸，即橫向，縱向同僚拉伸
下面就講講Unity3d中使用ugui中如何使用九宮格：
選中紋理資源，點選下圖中紅框按鈕，打開sprite編輯器：
設定sprite的邊界，其中藍色的為可用圖檔邊界，綠色線則為九宮格的裁剪線，初始時，藍色和綠色重疊，滑鼠放在下圖中綠色節點上即可編輯九宮格裁剪線：
設定好圖檔後，就可以把sprite指派給ui，看效果去了，并将圖檔類型選擇為sliced，還要記得勾上Fill Center，你可以試試不勾選看看效果：
然後你就能看到的效果：
好吧，綠色線條的作用知道了，現在就看看藍色線條的作用吧。。
看到了吧，藍色線條是對圖檔做裁剪的，當然一張圖檔上可以有多個裁剪圖，每個裁剪圖可以有一個九宮格。但是sprite就需要改成multiple咯。
最終，本文想說的其實是我自己遇到的一個坑。希望後來的人能輕松解決：
其實unity3d的九宮格一直都知道怎麼用，但是突然我發現我用不了，操作步驟也沒錯，弄了一下午頭都大了。結果我靠搜尋技術，在這篇部落格上發現了一點兒蛛絲馬迹然後解決了問題：
修改下面紅色地方的參數，預設是100
各位應該是看到差別了，當canvas或者是圖檔的每機關多少像素修改後，圖檔大小顯示大小其實是不一樣的。如果圖檔設定為10，canvas設定為100，那就相當于九宮格中非中心的圖檔區域大小縮放了10倍，而我由于測試過canvas參數，将其改為1，後來見沒效果，沒有改為100，結果可想而知，我所有九宮格在sliced模式下，隻能看到九宮格中心區域。如果不仔細看，邊緣區域根本不可見。
至此，我的問題解決了，相信大家也會使用unity3d中UGUI的九宮格了。
好了本篇unity3d教程到此結束，下篇我們再會！
- 轉載自注明: https://blog.csdn.net/andyhebear/article/details/50476802