UISprite可以說是NGUI中被用到最多的組件之一了。畢竟一個UI界面都是由不同的精靈圖片也就是Sprite進行不同的組合搭配而成的。
在Unity中使用NGUI創(chuàng)建Sprite非常的簡單，只需要在工具欄中找到NGUI->Create->Sprite并點擊即可。如果你是第一次創(chuàng)建，NGUI會自動給你創(chuàng)建一個根目錄也就是UIRoot，并附帶一個Camera。
UIRoot本身掛載了一個名為UIRoot的組件，這個組件是整個NGUI的根節(jié)點。還掛載了一個UIPanel組件，UIPanel是NGUI渲染的重要一環(huán)，UIPanel可以直接將所掛在的UI及其下方的UI與其他UI做一個很好的分離。這里所說的分離是指層級的分離，依靠的就是UIPanel的depth屬性。當(dāng)兩個panel的depth屬性不一樣時，其節(jié)點下方的所有UI都會以此panel的depth的基礎(chǔ)上進行計算。這樣，多個Panel之間的層級都不一樣，做到了面板的分離。
回到UISprite，這個組件的Inspector面板是這樣子的。
sprite Inspector面板.png
Atlas表示這個sprite所屬的圖集，點擊“前方”的Atlas就可以看到Unity中所有的Atlas。
image.png
右方的Edit按鈕可以點進入編輯模式，可以更改圖集的引用模式，是直接使用，還是引用其他的圖集。引用其他圖集的好處在于，你可以用多個UIAtlas引用同一個圖集，這樣不需要將一個圖集拷貝成多份。這個功能的意義在于，你可以將圖集放editor目錄中，然后將引用方放在resource或者streamAsset目錄下，在打包的時候，斷開引用，這樣打包的時候不會打進包體中，包體會小很多。然后在手機上運行的時候，再重新關(guān)聯(lián)起來。這樣達到減小包體的作用，兩者之間的關(guān)聯(lián)只需要一張表就可以很好的綁定。
Sprite，就是這個圖集中的一個精靈元素，點擊Sprite可以打開選擇面板，里面有這個圖集所有的Sprite圖片，找到我們需要的點擊就可以直接運用到我們當(dāng)前Hierarchy面板中的UISprite上面。當(dāng)然，這是再Editor模式下選擇。想要用腳本動態(tài)改變或者賦值的話，直接xx.spriteName = "name"即可。xx是腳本中對場景中的UISprite的引用。spriteName是UISprite的一個屬性，直接賦值它會正確的找到我們需要的同名的圖片，如果賦值的名字是錯誤或者不存在的話，找不到雖然不會報錯，但是場景中原本應(yīng)該顯示Sprite的地方則是為空。
Type是這個Sprite的切割方式，NGUI總共提供了五種切割方式。第一種為Simple簡單型，這種就是保持最原始的樣子。這個模式下，如果次Sprite只做等比縮放或者不在意形變，比如純色的之類的，可以選擇這一種。但是如果你的Sprite要求能夠拉伸，比如你需要做搭建一個柱子，而美術(shù)只給了你底部的一小截(事實上，為了節(jié)約包體，這是正常的做法)，如果選擇Simple模式進行拉伸，肯定會有變形，會變得非常難看，也不是我們想要的效果。這時候就可以選擇第二種，為Sliced 模式。 選擇slice模式以后，需要點擊右方的editor按鈕，然后修改我們需要切割的部分。
sprite切割.png
Dimensions我們不需要動，xy是這個sprite在圖集中的位置，Width、Height是這個Sprite的高寬。這些保持默認就好，不建議動，因為很容易影響到其他的Sprite。要改大小的話，可以在外部改完以后重新打圖集。Border是這個Sprite的四個方向的內(nèi)邊框，當(dāng)我們改四個方向(Left、Right、Bottom、Top)為4的時候，下方的預(yù)覽可以看到多出了四根線，意思就是將內(nèi)邊框向內(nèi)部移動了4個像素。可以看到四條虛線中間隔出來了一個矩形，當(dāng)我們進行拉伸的時候，四條虛線外面的部分是不會被拉伸的，被拉伸的只有內(nèi)部的矩形部分。這樣我們可以將這個圖片拉伸到任何我們想要的大小。需要注意的是，內(nèi)部矩形部分不能有顏色不一致或者圖像，否則就會被拉伸，顯得很奇怪。
Padding是邊框的寬度，也就是sprite的外邊框到內(nèi)邊框的寬度。內(nèi)邊框就是我們剛剛切割的那條線，外邊框看不見，其實就是整個sprite最外邊的邊緣。如果我們修改這個值，則會出現(xiàn)向內(nèi)塌陷的情況。
sliced模式.png
如圖，如果我修改了padding的left，就會將內(nèi)邊框往圖片內(nèi)部擠壓，不過這并不影響圖片本身的切割。超過的話，會正常的往右邊改變，也就是向右邊緣擠出去，這沒什么意義，如果不是有特殊需求不建議這么干。
Tiled也就是平鋪。如果圖片的拉伸超出sprite本身的大小，那么就會再鏡像一個進行顯示。就像貼同樣的瓷磚一樣。如果我們需要一個同樣花紋的背景，就可以用這種方式。
Filled填充模式，這個是用sprite做一個填充，可以做倒計時效果。比如技能的倒計時，
inspector.png
效果圖.png
Advanced模式，這種模式下，可以手動調(diào)整sprite的四個方向的模式，不過只支持sliced模式跟tiled模式。
再下來就是Sprite的顏色設(shè)置，有兩個，一個是漸變色Gradient，一個是普通的顏色ColorTint。漸變色只支持上線漸變，不支持徑向漸變。顏色則點開可以直接選擇自己需要的。
Widget，這是Sprite大小跟軸點控制參數(shù)的地方。整張圖有九個點，分別是左上、頂部、右上、左中、中點、右中、左下、底部、右下。而privot就可以很好的設(shè)置這九個點。它有六個點分別為左中右上中下，只能點擊兩個，由這選中的兩個對應(yīng)每一個位置。
Depth表示這種Sprite的深度，用以跟其他Sprite進行層級的區(qū)分。Depth越大表示層級越高，也就顯示的越前面。Back表示depth減一，F(xiàn)orward表示depth加一
Size表示這種Sprite的大小。右邊的Snap表示直接重置到原始大小，需要注意的是Sliced模式下點擊Snap沒有作用。Simple模式下只最有用的。Aspect表示 寬高比，F(xiàn)ree的時候，可以只有修改大小，改為Base On Width或者Base On Height的時候，只能調(diào)整Width或者Height，另一個方向則會按照寬高比進行計算并改變。能有效節(jié)約圖片大小的時間。
Anchors用來控制改Sprite的四個邊框跟其他組件的關(guān)聯(lián)關(guān)系
anchors.png
Sprite就是這樣，用的多了就發(fā)現(xiàn)沒有什么神秘的！
