制作精靈(UI Sprite)


怎樣判斷是否應該使用精靈

  在一套UI中,精靈是一種非常常見的元件。當制作UI時,如果需要顯示一張圖片,需要先判斷這個圖片是否應該制作到圖集里去,然后用精靈的方式去使用它,一般來說,可以遵循以下規律。

  1.首先說明一點,精靈是一個很基礎的UI元件,經常不會獨立使用,很多其他控件都會用到精靈。所以,精靈有的時候並不用獨立使用的。

  2.對於一些展示型的圖片,不會變化,只是起一個展示作用,如果它不大,它一般都是以精靈的方式去制作。

  3.如果要顯示一個圖片,它形狀不規則,長寬不是2的N次方,那么一定要使用精靈。因為Unity對非2的N次方的圖片處理要慢很多。

  4.如果這個UI元件經常性地出現,那么最好使用精靈,因為,這樣它就可以和圖集一起被載入內存,並不用新增一個DrawCall去渲染它。

 

創建精靈

  1.第一種創建方式

  單擊Unity頂部菜單中的NGUI菜單,選擇Create->Sprite。會自動創建出一個帶Sprite組件的物體,這就算創建成功了。

  特別說明一下,NGUI創建物體時會在選中的那個UI物體(可視為一個節點)下進行創建,如果沒有選中任何的UI節點,它會默認在UI Root下創建。創建出的UI控件的本地坐標都為0(相當於Reset了一下,和父節點的位置保持一樣),所以,使用3D UI的時候要注意,不要在UI Root所附帶的Camera下面創建UI元件,否則會導致UI和相機在一個位置,導致相機看不到。

  2.第二種創建方式

  使用舊版本的創建方式,在Unity頂部菜單中選擇NGUI菜單,選擇Open->Widget(Wizard(Legacy))。

  打開后,其中選擇想要創建的精靈所在的Atlas,然后再Template中選擇Sprite,在Sprite欄單擊會彈出你所設置的圖集中的所有精靈,從中選擇要創建的精靈,Pivot是精靈的錨點(中心點的位置,默認在圖片中心點)。AddTo是選擇要在哪一個UI節點下機型創建(額可以通過拖動的方式將UI節點物體拖到這里來),這個AddTo的默認值是在打開這個菜單之前所選中的UI節點物體。然后單擊AddTo按鈕,即可完成創建。

  3.第三種創建方式(不推薦)

  這種方式是不用NGUI的菜單來創建,通過Unity的空物體,然后為其附加相應組件來自制UI控件。

  首先在Unity頂部菜單中選擇GameObject,然后選擇CreateEmpty,這樣就在場景中創建了一個空物體,再將這個空物體拖動到UI Root下,使它成為UI Root下的一個子物體,將這個空物體的transform組件Reset一下,這樣這個物體就和UI Root根節點保持一樣的位置了。然后將這個空物體的Layer改為和UI Roote的Layer一樣,否則UI攝像機將無法渲染它。在這個空物體的Inspector面板中,單擊Add Component按鈕,選擇NGUI,選擇UI,再選擇NGUI Sprite,就為這個空物體附上了Sprite組件。

  在這個Sprite組件中單擊第一行的Atlas按鈕,選擇要創建的精靈所在的圖集,然后單擊第二行的Sprite按鈕,會彈出這個圖集所有的精靈預覽界面,從中選擇所要的精靈。精靈就自制完成了。

 

Sprite組件的設置

  在Sprite組件面板中,可以設置如下的一些參數。

  1.Atlas。單擊Atlas按鈕將會彈出圖集選擇界面,可以選擇要使用哪一個圖集(如果彈出的圖集選擇界面沒有我們要的圖集,記得單擊該面板中的ShowAll按鈕)。

  2.Sprite。單擊Sprite按鈕,將會彈出該圖集所擁有的精靈的預覽界面,只需要在其中找到需要的精靈,然后雙擊,就完成了設置。

  3.Type和Flip。這里Type有5個選項:Simple(普通類型)、Sliced(切片類型)、Tiled(平鋪類型)、Filled(填滿類型)、Advanced(高級類型)。Flip選項是翻轉選項,相應的Type下有不同的設置。

    Simple:這種類型下,圖片會正常顯示出來,圖片是什么樣它就是什么樣顯示。當將一個精靈的尺寸拉大時,它會以原圖拉伸(可能會導致原圖發生形變)的方式來完成,將精靈的大小通過拉動四周的藍色錨點拉大,精靈就被拉伸了。

      在這種類型下,Flip有幾個選項,分別是:Noting(不翻轉)、Horizontally(水平翻轉)、Vertically(豎直翻轉)、Both(既水平又豎直翻轉)。

      這里的翻轉和Photoshop中的圖片翻轉式一個意思。

    Tiled:平鋪類型,選擇了之后,精靈尺寸會保持原來的尺寸不變,然后將精靈的尺寸拉大時,精靈會以平鋪的方式來填充,並不會以拉伸的方式來填充。

    Filled:填滿模式,這種模式可以設置圖片填充一塊區域的方式

      在Filled模式下,會多出Fill Dir、Fill Amount、Invert Fill 3個設置項。其中FillDir是指選擇填充的方式,默認為360度填充。Fill Amount可以設置填充的比例,默認為1全部填充。InvertFill是設置填充的方向,不勾選是正方向,勾選是反方向。

  4.Widget模塊。Widget模塊是NGUI的控件組件都具有的一個模塊。該模塊的參數設置如下:

    Color:通過這里可以整體改變控件的顏色和透明度,改變顏色的規則為:原色值乘以這里設置的色值(Unity中,會把RGB色值從0~255轉變為0~1的一個浮點數)。

      單擊這個白色區域會彈出調色板,可以隨意地在這里設置空間的顏色值和透明度。

      值得注意的是,如果通過這個控件改變了透明度,那么這個物體的自物體的控件透明度也會跟着被改變。

    Pivot:錨點設置,默認為中心點。通過這一排按鈕可以設置出左上、頂中、右上、中左、中心、中右、左下、低中、右下一共9個點。

      這個錨點設置,改變的是圖片的中心點位置,這個UI控件和其他UI控件之間的相對位置就是以這個點作為標准的。

    Depth:深度設置。可以通過單擊Back和Forward來減1和加1,也可以直接輸入一個深度數字來完成設置。

    Dimensions:尺寸,這里指的是控件的像素尺寸。單擊Snap可以將圖片的像素尺寸直接設置為原大小(這個圖片被改成圖集之前的圖片大小)。

    AspectRatio:寬高比,AspectRatio后面的數字為當前該控件的寬高尺寸比例,后面有一個模式選擇按鈕,默認為Free,可為圖片隨意設置高和寬。這里除了Free以外,還有兩個模式:以寬為基礎、以高為基礎。如果選擇以寬為基礎,那么圖片的高度設置不論怎么設置都無效,都會以寬度和當前的寬高比計算得出。同理,如果選擇了以高為基礎,那么圖片的寬度就無法被設置,它的寬度都會以高度和當前的寬高比計算得出。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM