Unity 2D 終結手冊 (3) - 精靈編輯_Unity3d 開發技術

Unity 2D 終結手冊 (3) - 精靈編輯_Unity3d 開發技術

文/宋小波啊(作者)


Unity 2D 終結手冊 (1) - 2D 項目
Unity 2D 終結手冊 (2) - 精靈
Unity 2D 終結手冊 (3) - 精靈編輯

 

有時,一個精靈紋理(Texture只包含一個精靈元素(Element,但是更常見的是,在一張圖像中包含多個相關的精靈元素,這樣使用起來會更方便。例如,在一張圖像中可以包含一個角色身上的所有部位,或者包含一輛車的車輪、車身等。對於這樣的圖像資源,Unity提供了一個方便的工具,能夠快速地提取出裏面的元素並讓我們進行編輯,這就是精靈編輯器(Sprite Editor

通過以下兩個步驟打開精靈編輯器(Sprite Editor

1、從項目視圖(Project)中選中我們想要進行編輯的精靈,在場景中是不能對精靈進行編輯的;

2、在檢視視圖(Inspector)裏導入設置中,點擊Sprite Editor按鈕打開精靈編輯器(Sprite Editor)。


(圖 1)項目視圖

只有當我們把圖像的紋理類型(Texture Type設置爲Sprite2D and UI時才能夠看到Sprite Editor按鈕;


(圖 2)精靈圖像的導入設置

如果我們的圖片中存在多個精靈元素,我們還需要將精靈模式(Sprite Mode修改爲多精靈模式(Multiple

(圖 3)精靈編輯器

在精靈編輯器(Sprite Editor視圖的頂部,有一行工具條,裏面有很多控制工具。其中右上角的滑桿控制紋理像素化(Pixelation,向左移動滑塊會減少紋理的分辨率。再往左那個滑桿,控制視圖的縮放。再往左有一個類似彩條的圖標,這個是查看圖像的Alpha等級(透明度)

最重要的按鈕都在工具條的左側,其中的切片(Slice菜單能夠根據我們的設置,將紋理中的精靈自動分割出來。最後修改完畢,我們別忘了點擊應用(Apply按鈕來保存我們的修改,或者點擊放棄(Revert按鈕放棄本次修改。

使用精靈編輯器(Sprite Editor最直接的方法,就是手動標記精靈元素。我們點擊圖片後,就會出現一個矩形選擇區域,並且四個角都有控制點。我們可以拖動控制點或矩形邊緣,來框選出一個精靈元素。我們在矩形選擇區外拖拽時,會生成一塊新的矩形選擇區域,這樣最終能夠框選出多個精靈。當我們選中某個矩形選擇區時,會出現一個新的視圖:

(圖 4)精靈屬性面板

在這個精靈屬性面板中,我們可以調整精靈的名字。位置(Position屬性用來設置矩形選擇區的位置(XY和寬(WWidth、高(HHeight。邊框(Biorder屬性用來設置精靈邊框的上(TTop、下(BBottom、左(LLeft、右(RRight的大小,邊框只在UI系統中有效,對於精靈渲染器(Sprite Renderer無效。

在這裏也可以設置精靈的樞軸(Pivot,樞軸是Unity中圖形座標系中的原點,也是主要的錨點(Anchor Point。我們可以選擇一些默認的相對位置作爲樞軸(Pivot,比如中心點(Center、右上角(Top Right等,也可以自己定義樞軸(Pivot的位置。

回到工具條最左側,在切片(Slice菜單後面是整理(Trim按鈕。點擊之後精靈元素會重新計算自己的矩形選擇區大小,並進行調整,使之剛好包圍元素邊界,這些自動調整是根據圖像的透明度計算出來的。

除了可以手動分割精靈外,Unity也能夠根據圖形元素自動分割精靈,這樣可以節省我們的時間。當我們點擊了工具條上的切片(Slice菜單後能夠看到:

(圖 5)切片菜單

第一個類型(Type屬性表示切割類型,我們可以把它設置爲自動切割(Automatic,這時編輯器會根據不透明度(Alpha來計算出精靈的邊界。我們也可以設置每個精靈默認的樞軸(Pivot位置。而方法(Method屬性能夠讓我們選擇如何處理當前窗口中已分割好的精靈。

刪除存在的(Delete Existing)選項會清除當前已經分割好的精靈,重新進行自動分割;

智能(Smart)選項也能自動分割出新的精靈,但是對於已經分割出來的精靈會嘗試着保留或進行調整;

安全(safe)選項會自動分割出新的精靈,而且不會對已經分割好的精靈做出任何改變。

除了自動切割(Automatic以外,還有兩種類型,根據元素大小進行網格分割(Grid By Cell Size和根據元素數量進行網格分割(Grid By Cell Count。如果我們的精靈在創建時就以規律的方式進行佈局,我們就可以用這兩種分割類型。

(圖 6)網格分割

在根據元素大小進行網格分割(Grid By Cell Size中,像素大小(Pixel Size用來設置每個精靈元素的寬度和高度。如果我們使用的是根據元素數量進行網格分割(Grid By Cell Count,那麼我們可以指定切割完畢後精靈元素的列數和行數。設置偏移量(Offset屬性可以設置精靈元素相對於左上角的位移,設置填充(Padding屬性則可以讓矩形區域之間留出一定的距離。最後一個樞軸(Pivot屬性可以給每個切割出來的精靈元素設置默認的樞軸位置。

我們通過自動切割產生的精靈元素,還可以自己手動進行調整,這樣,我們可以先使用自動切割,切出大概的精靈,然後需要的話再通過手動進行微調。

在圖像的導入設置中,我們將紋理類型(Texture Type設置爲Sprite2D and UI,然後下面的精靈模式(Sprite Mode除了多精靈模式(Multiple外,還有一個多邊形模式(Polygon。在此模式下每個圖像都只被分割成一個精靈元素,而且我們可以指定分割多邊形的形狀、大小、樞軸等。

(圖 7)多邊形精靈

點擊左上角的改變形狀(Change Shape菜單,輸入多邊形的邊數,在點擊Change按鈕,就能夠編輯不同形狀的多邊形。

(圖 8)修改多邊形的邊框和樞軸點

要想改變多邊形的大小,先選中多邊形精靈,會出現綠色的邊框線和信息面板。點擊並拖拽綠線就能夠修改邊框的大小,同時信息面板中的Border的值也會隨之變化。但不能夠直接在信息面板中修改邊框的值。

如果要想改變樞軸點的位置,先選中多邊形精靈,然後在信息面板中點擊Pivot按鈕,會彈出下拉框選項,可以自己選擇樞軸點的位置。如果我們需要一個特殊的樞軸點位置,可以把Pivot屬性設置爲Custom,然後再在精靈多邊形中點擊拖動藍色的樞軸點,就可以放置在任意位置。但是Custom樞軸點的位置,不能夠直接在信息面板中輸入。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章