unuty3D之道具檢視VIP

1、unuty3D之道具檢視 我又來了。這章比較復(fù)雜，我盡量慢慢說明白，我們先看看UI的布局圖，1    不要在意字體不夠清晰，在真機(jī)上面可是賊清晰的。其他奇怪的白色不要在意，完全沒有影響的，只是紋理丟失而已，不礙事。這章主要介紹道具檢視場(chǎng)景的設(shè)計(jì)，這個(gè)場(chǎng)景的屬于debug場(chǎng)景，主要用于通過可視化的UI來檢測(cè)。   這個(gè)場(chǎng)景中，我們主要設(shè)計(jì)了3個(gè)面板，分別是，ItemsViewer（左，道具列表），Describe 1（右，上圖顯示的，道具描述面板）和 Describe Recipe（右，目前隱藏，合成列表），最后還有一個(gè)左上角的返回按鈕，這個(gè)不在

2、多說了，按照以前的配置方法就好了。   當(dāng)然，記得新建一個(gè)空的GameObject，然后掛上ItemViewer_MainObejct.cs這個(gè)組件。好了。    Items，道具槽的群組，下面一群道具槽對(duì)象。   Next，Prev，2個(gè)翻頁按鈕而已。   Page，用于顯示頁數(shù)信息的Text。   Describe 1，3    Frame，邊框的紋理。   TATO，一些用于裝飾的紋理，例如那條背景龍。   ItemSl

3、ot，就是左上角的那個(gè)道具槽，用于顯示道具的圖表，還有提供一些交互功能。   Item Name，顯示道具名字的Text。   Item Comment，顯示道具描述的Text。   Describe Recipe，4，5     Frame，邊框的紋理。   RawImage X2，其實(shí)就是那兩個(gè)箭頭向下的紋理，用于裝飾而已。   Image，就是文字【合成列表】的左右用于裝飾的紋理。   Text，合成列表   

4、ItemSlot Main，中間最大的那個(gè)道具槽，作為主要道具，即當(dāng)前合成列表顯示的道具，其上面的道具是他的合成素材，下面的道具是他能作為其他道具的合成素材。   ItemSlot Parts X，合成所需要的素材道具。   ItemSlot Product X，能合成的道具。   Prev，Next，Page，翻頁操作   TATO，裝飾紋理，又是那條龍。   好了基本上，他們的結(jié)構(gòu)就大致是這樣了，雖然，他們?cè)赨I布局上，是屬于同級(jí)關(guān)系，如圖，6 但是，在邏輯關(guān)系上，卻是有主從關(guān)系的

5、。itemsViewer > Describe 1 > Describe Recipe ，左邊的面板是右邊面板的父級(jí)，也可以說是左邊面板是右邊面版的管理器。   好了，關(guān)系圖說好，下面就來開始設(shè)計(jì)UI了。   首先，茶水不是很熟悉UGUI，所以在自適應(yīng)上面目前也不太懂，所以以下的參數(shù)，只是匹配iPhone5s的真機(jī)而已，其他平臺(tái)無測(cè)試條件。   所以，看看Canvas的配置，7    如圖，8    沒什么好看的，看看樹狀結(jié)構(gòu)吧，9  

6、60;然后看看ItemSlot的配置吧，10    標(biāo)準(zhǔn)的按鈕，掛在一個(gè)UI_Item_Slot.cs組件，然后在OnClick配置好他的事件。（關(guān)于代碼的設(shè)計(jì)和實(shí)現(xiàn)，以后的章節(jié)中會(huì)提及到，現(xiàn)在吧主要架構(gòu)說明一下。）   BackGround，背景圖，11    就一個(gè)Image，他的紋理是這樣的，12    就是一個(gè)背景而已，就這么人性。   mask，遮罩，13    其實(shí)和背景的紋理一樣，注意紋理需要的是png透明的，注意4角的透

7、明，當(dāng)然，如果不介意奇怪的造型的畫，mask也是可以不適用的。   Icon，14    沒什么好說的，Texture留空即可。   Cover，用于顯示道具等級(jí)顏色的一個(gè)邊框，選個(gè)好看的紋理唄，15    Top，頂層邊框，其實(shí)就是遮罩的改進(jìn)版，挖空了中間黑色的地方，16    Mak1，Mark2，就是兩個(gè)特殊的標(biāo)記而已，類似于手游刀塔傳奇中碎片的標(biāo)記，差不多這個(gè)意思，17    最后Number，就是用于顯示道具數(shù)量的一個(gè)Text

8、而已。   至于各個(gè)UI的Size，大家可以根據(jù)自己的需求自行調(diào)整，這里就不在浪費(fèi)面板貼上來了，或則也可以參考茶水本次提供的源文件，附件中提供。   保存成prefab，名為 Itemslot。   首先請(qǐng)看UI布局，18    然后請(qǐng)看樹狀結(jié)構(gòu)，19    組件中又一個(gè)Image，作為背景圖像，然后掛載組件 UI_ItemViewer.cs，配置如上圖和下圖。20    Items，是一個(gè)空的對(duì)象，下面是一組道具槽對(duì)象，按順序命名好，方便配置。

9、   Next，prev，Page，翻頁的組件。記得配置好其OnClick事件。（UI_ItemViewer.cs內(nèi)提供其對(duì)應(yīng)的方法）   好了，這就是ItemsViewer的UI配置了。（代碼部分后續(xù)的章節(jié)會(huì)做說明。）   道具的描述面板，請(qǐng)不要糾結(jié)于這個(gè)名字，確實(shí)有點(diǎn)奇怪，21    樹狀結(jié)構(gòu)，22    Describe 1,23    組件Image就是一個(gè)背景紋理，然后掛載UI_Describe.cs，配置如圖。   

10、;然后，剩余的組件都沒有什么特別之處，這里不再做說明了。（代碼部分后續(xù)的章節(jié)會(huì)做說明。）   PS: Item_id這個(gè)屬性，只是用于調(diào)試作用，這里并無實(shí)際作用，可以忽略之。   請(qǐng)先看UI布局。24    大家這里可以看到，上面組和下面組的道具槽都是小一號(hào)的，大家只要修改原版的ItemSlot，將他的size適當(dāng)改小便可，同事還有吧那個(gè)用于顯示道具數(shù)量的Text適當(dāng)改大一點(diǎn)，以便顯示更多的信息，總之就酌情修改一改吧，然后保存成prefab，名為 ItemSlot 2吧。   然后看看樹狀結(jié)構(gòu)，25

11、60;   Describe Recipe，26    呃，至此，相比大家都懂了吧，那我就不多說了。   記得配置好 Prev，Next這兩個(gè)按鈕的OnClick事件。   好了，本場(chǎng)景的UI已經(jīng)配置完成了，這么多的內(nèi)容，茶水也很難保證沒有說明上的遺漏，所以本次附上完整的項(xiàng)目及其資源，其中設(shè)計(jì)部分收費(fèi)插件和素材，全部免費(fèi)下載，好也。大家可以下載整個(gè)項(xiàng)目，然后打開項(xiàng)目跟著茶水走一次，應(yīng)該就會(huì)有一個(gè)比較清晰的概念了。   最后當(dāng)然又是到了發(fā)牢騷的時(shí)間了。我們到目前為止，一直都是放出全部代碼然后講UI的配置步驟，完全沒有系統(tǒng)說過關(guān)于代碼的那些事，想必相對(duì)于UI，大家更關(guān)心代碼。同時(shí)，本系列作為實(shí)戰(zhàn)，茶水也是邊做邊發(fā)文，所以，往后的更新會(huì)比較慢或且內(nèi)容較少。所以，以后的文章中，我會(huì)回頭來抽取一些比較重要的腳本或代碼來加以說明，也可順便分享一下茶水的設(shè)計(jì)意圖和心得，亦可當(dāng)作是一個(gè)信息的補(bǔ)全吧。   首先，我們來看看項(xiàng)目的文件結(jié)構(gòu)，27    我們主要的工作目錄只有2個(gè)_My Project，