|
5.UI的设计 （1）通用Windows的设计
！！！！！上篇提及的新UI Demo在附件中提供下载！！！！！
Hello, 各位久等了，大家还记得上次的伪投票吗？其实我是假民主，UI真的是一个很难一次说明白的东西，交叉性太大了，经过一个周末的研究，我决还是走心好了，本次直接给出全部所需的代码，因为在设计UI的时候，需要直接挂载好代码，否则返回来在挂的时候，可能有遗漏的部分，所以为了连贯，只有边设计UI边挂在代码了。
【在开始之前，请先下载好附件中的脚本，今天需要用到脚本在附件中提供下载，其他文件夹中的脚本为之前的道具系统的，这里一并整理出来，如有需要亦可重新下载。】
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝咸湿分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
1. 首先，确定你的场景中有如下图所示的三个对象，这都是我们之前设计的东西，并且保证Global_Manager配置正确（若仅在此场景中应用的话，此配置其实非必须）。
2. 然后在菜单栏中 NGUI->Create-> 然后选择2D或者3D UI，这里我是选择3D UI的，然后会有如下的景象。【温情提示：挂载在他下面的对象的Layer注意选定为“UI”，否则可能会出问题，一般会自动选择的，但是，安全起见，还是仔细检查一遍好】
3. 空荡荡的灰色背景总会感觉容易视觉疲劳，所以，新建一个Sprite作为背景图，美化一下单调的背景吧，使用NGUI的Widget Tool工具，挑选一个好看的图片作为背景吧。
然后层级关系如下图，
4. 创建一个通用的Windows，便于以后的开发。 通过菜单NGUI->Create->Panel，然后我们可以看见，目前这个对象只挂在了NGUI的UIPanel脚本，我们不需要对这个脚本作出任何的修改。重命名这个对象为Windows，然后我们需要额外挂在一些脚本进去，如下图，
5. UI_Inventory_Manager, 这个类负责背包系统（或且商店之类的关于道具的UI）的操作，例如描述UI的引用，翻页，道具槽的组别，等。下面具体说明每项的作用。
Type，背包的类型。
Decription_manager，描述UI管理器，自动根据所选择的道具类型而选择响应的描述UI。 Pages，用于显示当前页的一个UILabel。
Hold_to_move_hole_stack，这里打错字了，就让他一直错吧，这个堆栈操作的修饰键，按住则能对整个堆栈操作，例如买卖或移动一个堆。
Audio_onDrag， 拖动时候的声音，花俏的东西。【可忽略】
Slots，这个UI面板所管理的道具槽们的对象，例如一个面板能显示20个道具槽，没错，然后他就有20个slots的对象了。
6. Tween Position 一个位移的Tween，花俏的东西，但是还是需要挂上，后面的程序肯能会用到。
7. Rigidbody 完全不知道有什么用，貌似NGUI默认都有这个东西，就按这个队形和配置这样弄吧。
8. UIDrag Object
拖放时候的效果，Target为自身，如图所示，其他配置随心。【若不想窗口有拖放的功能，禁用这个脚本就可以了】
9. UIPlay Sound 点击面板拖放时候的声音。【可忽略】
10. Box Collider NGUI标准的按钮组件，挂上吧。
好了，至此，作为第一层的配置，已完成了，现在来看看我们的努力，返回到场景中，你会看到，一个背景，然后，没了，嗯，现在我们开始来设计第二层吧。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝咸湿分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
首先，按照一下的机构，在Windows下，挂如下4个【空的GameObejct】，然后重命名。
11. Log Position，下挂载脚本
12. Yaw，下挂在脚本 由于这种3D的视觉效果在道具拖放的时候会出现一些比较麻烦的视觉控制的问题，所以茶水这里禁用了，但是作为一个完整的结构，这里还是放出来给大家参考下。
13. Tile，下挂在脚本
14. Panel，下挂在组件。。。。。。 这个真的貌似没有什么必要，但是，还是加上吧。
以上的结构和脚本，完全是为了服务视觉效果而已，【完全非必要】，请酌情使用。花俏的东西弄完了，下面开始进入核心部分了。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝咸湿分割线＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
14. 老规矩，如下图，在Panel下挂一些空的GameObject，
15. Background, 这个就是作为面板的背景而存在的，挂在的脚本如下，然后选择一个好看的背景图片吧，
效果图，
16. Title Bar，其实就是我们Win7中的窗口最顶端的那一和小行，用于显示窗口的名字或一些特殊的按钮的地方，我们这里也是这个用途，挂在如下组件，然后选择一个好看的图片，
效果图，
17. Windows，这个其实是一个UILabel，用于显示这个背包的名字, 然后这里有个很诡异的东西，Property Binding，这个脚本我只是为了在开发中方便自己知道我在操作那个窗口而已，对实际操作无任何正面作业，所以这里可以忽略这个组件。
效果图，
好了，我们的通用Windows已设计好了，保存成prefabs，供日后扩展使用。OK，又到了测试的时候了，由于我们目前木有其他关联的对象可供操作，随意返回到最顶层的Windows对象，禁用他的UI_Inventory_Manager， 然后运行场景，试下拖放这个Windows，怎么样，是不是很酷呢？
=================================================================
| 
发表于 2014-11-5 19:47:06
发表于 2014-12-28 02:51:06
