unuty3D之道具检视

   我又来了。这章比较复杂，我尽量慢慢说明白，我们先看看UI的布局图，1

 

   不要在意字体不够清晰，在真机上面可是贼清晰的。其他奇怪的白色不要在意，完全没有影响的，只是纹理丢失而已，不碍事。

这章主要介绍道具检视场景的设计，这个场景的属于debug场景，主要用于通过可视化的UI来检测。

   这个场景中，我们主要设计了3个面板，分别是，ItemsViewer（左，道具列表），Describe 1（右，上图显示的，道具描述面板）和 Describe Recipe（右，目前隐藏，合成列表），最后还有一个左上角的返回按钮，这个不在多说了，按照以前的配置方法就好了。

   当然，记得新建一个空的GameObject，然后挂上ItemViewer_MainObejct.cs这个组件。好了。

   首先我们分别看看各个面板的树状结构吧。

   ItemsViewer，2

 

   Items，道具槽的群组，下面一群道具槽对象。

   Next，Prev，2个翻页按钮而已。

   Page，用于显示页数信息的Text。

   Describe 1，3

 

   Frame，边框的纹理。

   TATO，一些用于装饰的纹理，例如那条背景龙。

   ItemSlot，就是左上角的那个道具槽，用于显示道具的图表，还有提供一些交互功能。

   Item Name，显示道具名字的Text。

   Item Comment，显示道具描述的Text。

   Describe Recipe，4，5

 

 

   Frame，边框的纹理。

   RawImage X2，其实就是那两个箭头向下的纹理，用于装饰而已。

   Image，就是文字【合成列表】的左右用于装饰的纹理。

   Text，合成列表

   ItemSlot Main，中间最大的那个道具槽，作为主要道具，即当前合成列表显示的道具，其上面的道具是他的合成素材，下面的道具是他能作为其他道具的合成素材。

   ItemSlot Parts X，合成所需要的素材道具。

   ItemSlot Product X，能合成的道具。

   Prev，Next，Page，翻页操作

   TATO，装饰纹理，又是那条龙。

   好了基本上，他们的结构就大致是这样了，虽然，他们在UI布局上，是属于同级关系，如图，6

 

但是，在逻辑关系上，却是有主从关系的。

itemsViewer > Describe 1 > Describe Recipe ，左边的面板是右边面板的父级，也可以说是左边面板是右边面版的管理器。

   好了，关系图说好，下面就来开始设计UI了。

   首先，茶水不是很熟悉UGUI，所以在自适应上面目前也不太懂，所以以下的参数，只是匹配iPhone5s的真机而已，其他平台无测试条件。

   所以，看看Canvas的配置，7

 

   如图，8

 

   没什么好看的，看看树状结构吧，9

 

   然后看看ItemSlot的配置吧，10

 

   标准的按钮，挂在一个UI_Item_Slot.cs组件，然后在OnClick配置好他的事件。（关于代码的设计和实现，以后的章节中会提及到，现在吧主要架构说明一下。）

   BackGround，背景图，11

 

   就一个Image，他的纹理是这样的，12

 

   就是一个背景而已，就这么人性。

   mask，遮罩，13

 

   其实和背景的纹理一样，注意纹理需要的是png透明的，注意4角的透明，当然，如果不介意奇怪的造型的画，mask也是可以不适用的。

   Icon，14

 

   没什么好说的，Texture留空即可。

   Cover，用于显示道具等级颜色的一个边框，选个好看的纹理呗，15

 

   Top，顶层边框，其实就是遮罩的改进版，挖空了中间黑色的地方，16

 

   Mak1，Mark2，就是两个特殊的标记而已，类似于手游刀塔传奇中碎片的标记，差不多这个意思，17

 

   最后Number，就是用于显示道具数量的一个Text而已。

   至于各个UI的Size，大家可以根据自己的需求自行调整，这里就不在浪费面板贴上来了，或则也可以参考茶水本次提供的源文件，附件中提供。

   保存成prefab，名为 Itemslot。

   首先请看UI布局，18

 

   然后请看树状结构，19

 

   组件中又一个Image，作为背景图像，然后挂载组件 UI_ItemViewer.cs，配置如上图和下图。20

 

   Items，是一个空的对象，下面是一组道具槽对象，按顺序命名好，方便配置。

   Next，prev，Page，翻页的组件。记得配置好其OnClick事件。（UI_ItemViewer.cs内提供其对应的方法）

   好了，这就是ItemsViewer的UI配置了。（代码部分后续的章节会做说明。）

   道具的描述面板，请不要纠结于这个名字，确实有点奇怪，21

 

   树状结构，22

 

   Describe 1,23

 

   组件Image就是一个背景纹理，然后挂载UI_Describe.cs，配置如图。

   然后，剩余的组件都没有什么特别之处，这里不再做说明了。（代码部分后续的章节会做说明。）

   PS: Item_id这个属性，只是用于调试作用，这里并无实际作用，可以忽略之。

   请先看UI布局。24

 

   大家这里可以看到，上面组和下面组的道具槽都是小一号的，大家只要修改原版的ItemSlot，将他的size适当改小便可，同事还有吧那个用于显示道具数量的Text适当改大一点，以便显示更多的信息，总之就酌情修改一改吧，然后保存成prefab，名为 ItemSlot 2吧。

   然后看看树状结构，25

 

   Describe Recipe，26

 

   呃，至此，相比大家都懂了吧，那我就不多说了。

   记得配置好 Prev，Next这两个按钮的OnClick事件。

   好了，本场景的UI已经配置完成了，这么多的内容，茶水也很难保证没有说明上的遗漏，所以本次附上完整的项目及其资源，其中设计部分收费插件和素材，全部免费下载，好也～～～。大家可以下载整个项目，然后打开项目跟着茶水走一次，应该就会有一个比较清晰的概念了。

   最后当然又是到了发牢骚的时间了。我们到目前为止，一直都是放出全部代码然后讲UI的配置步骤，完全没有系统说过关于代码的那些事，想必相对于UI，大家更关心代码。同时，本系列作为实战，茶水也是边做边发文，所以，往后的更新会比较慢或且内容较少。所以，以后的文章中，我会回头来抽取一些比较重要的脚本或代码来加以说明，也可顺便分享一下茶水的设计意图和心得，亦可当作是一个信息的补全吧。

   首先，我们来看看项目的文件结构，27

 

   我们主要的工作目录只有2个_My Project，主要存档我们的成果，Prefabs存放预设，Scripts存放脚本，Stages存放各种场景，

Resources，存放资源啦，Icons1存放图标，Items存放道具的数据文本。

   另外，更新了各MainObject的脚本，现在在任何场景中点击测试，都是自动跳到DownLoadFirst了，不需要手动切换了，提高了测试效率，文章出处【狗刨学习网】