查看: 77073|回复: 144

【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

[复制链接]

1

主题

338

帖子

7万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
74666
发表于 2014-11-5 19:47:06 | 显示全部楼层 |阅读模式
5.UI的设计 (1)通用Windows的设计



!!!!!上篇提及的新UI Demo在附件中提供下载!!!!!

Hello, 各位久等了,大家还记得上次的伪投票吗?其实我是假民主,UI真的是一个很难一次说明白的东西,交叉性太大了,经过一个周末的研究,我决还是走心好了,本次直接给出全部所需的代码,因为在设计UI的时候,需要直接挂载好代码,否则返回来在挂的时候,可能有遗漏的部分,所以为了连贯,只有边设计UI边挂在代码了。

【在开始之前,请先下载好附件中的脚本,今天需要用到脚本在附件中提供下载,其他文件夹中的脚本为之前的道具系统的,这里一并整理出来,如有需要亦可重新下载。】

==================咸湿分割线===================

1. 首先,确定你的场景中有如下图所示的三个对象,这都是我们之前设计的东西,并且保证Global_Manager配置正确(若仅在此场景中应用的话,此配置其实非必须)。
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

2. 然后在菜单栏中 NGUI->Create-> 然后选择2D或者3D UI,这里我是选择3D UI的,然后会有如下的景象。【温情提示:挂载在他下面的对象的Layer注意选定为“UI”,否则可能会出问题,一般会自动选择的,但是,安全起见,还是仔细检查一遍好】
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

3. 空荡荡的灰色背景总会感觉容易视觉疲劳,所以,新建一个Sprite作为背景图,美化一下单调的背景吧,使用NGUI的Widget Tool工具,挑选一个好看的图片作为背景吧。
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

然后层级关系如下图,
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

4. 创建一个通用的Windows,便于以后的开发。
通过菜单NGUI->Create->Panel,然后我们可以看见,目前这个对象只挂在了NGUI的UIPanel脚本,我们不需要对这个脚本作出任何的修改。重命名这个对象为Windows,然后我们需要额外挂在一些脚本进去,如下图,
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计


5. UI_Inventory_Manager,
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计
这个类负责背包系统(或且商店之类的关于道具的UI)的操作,例如描述UI的引用,翻页,道具槽的组别,等。下面具体说明每项的作用。

Type,背包的类型。
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

Decription_manager,描述UI管理器,自动根据所选择的道具类型而选择响应的描述UI。
Pages,用于显示当前页的一个UILabel。

Hold_to_move_hole_stack,这里打错字了,就让他一直错吧,这个堆栈操作的修饰键,按住则能对整个堆栈操作,例如买卖或移动一个堆。

Audio_onDrag, 拖动时候的声音,花俏的东西。【可忽略】

Slots,这个UI面板所管理的道具槽们的对象,例如一个面板能显示20个道具槽,没错,然后他就有20个slots的对象了。

6. Tween Position
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计
一个位移的Tween,花俏的东西,但是还是需要挂上,后面的程序肯能会用到。

7. Rigidbody
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计
完全不知道有什么用,貌似NGUI默认都有这个东西,就按这个队形和配置这样弄吧。

8. UIDrag Object
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

拖放时候的效果,Target为自身,如图所示,其他配置随心。【若不想窗口有拖放的功能,禁用这个脚本就可以了

9. UIPlay Sound
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计
点击面板拖放时候的声音。【可忽略】

10. Box Collider
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计
NGUI标准的按钮组件,挂上吧。

好了,至此,作为第一层的配置,已完成了,现在来看看我们的努力,返回到场景中,你会看到,一个背景,然后,没了,嗯,现在我们开始来设计第二层吧。

==================咸湿分割线===================

首先,按照一下的机构,在Windows下,挂如下4个【空的GameObejct】,然后重命名。
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

11. Log Position,下挂载脚本
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

12. Yaw,下挂在脚本
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计
由于这种3D的视觉效果在道具拖放的时候会出现一些比较麻烦的视觉控制的问题,所以茶水这里禁用了,但是作为一个完整的结构,这里还是放出来给大家参考下。

13. Tile,下挂在脚本
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

14. Panel,下挂在组件。。。。。。
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计
这个真的貌似没有什么必要,但是,还是加上吧。

以上的结构和脚本,完全是为了服务视觉效果而已,【完全非必要】,请酌情使用。花俏的东西弄完了,下面开始进入核心部分了。

==================咸湿分割线===================

14. 老规矩,如下图,在Panel下挂一些空的GameObject,
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

15. Background, 这个就是作为面板的背景而存在的,挂在的脚本如下,然后选择一个好看的背景图片吧,
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

效果图,
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

16. Title Bar,其实就是我们Win7中的窗口最顶端的那一和小行,用于显示窗口的名字或一些特殊的按钮的地方,我们这里也是这个用途,挂在如下组件,然后选择一个好看的图片,
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

效果图,
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

17. Windows,这个其实是一个UILabel,用于显示这个背包的名字,
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计
然后这里有个很诡异的东西,Property Binding,这个脚本我只是为了在开发中方便自己知道我在操作那个窗口而已,对实际操作无任何正面作业,所以这里可以忽略这个组件。

效果图,
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计

好了,我们的通用Windows已设计好了,保存成prefabs,供日后扩展使用。OK,又到了测试的时候了,由于我们目前木有其他关联的对象可供操作,随意返回到最顶层的Windows对象,禁用他的UI_Inventory_Manager,
【爆甲英雄传】5.UI的设计 (1)通用Windows的设计
然后运行场景,试下拖放这个Windows,怎么样,是不是很酷呢?

回复

使用道具 举报

ngk02lds78 该用户已被删除
发表于 2014-12-28 02:51:06 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

xbit 该用户已被删除
发表于 2014-12-28 02:51:40 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

woaiwojia6188 该用户已被删除
发表于 2014-12-28 02:52:14 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

0

主题

1220

帖子

3838

积分

vip会员

Rank: 1

积分
3838
发表于 2015-4-10 01:25:32 来自手机 | 显示全部楼层
鼎力支持!!
回复 支持 反对

使用道具 举报

0

主题

1246

帖子

3918

积分

vip会员

Rank: 1

积分
3918
发表于 2015-4-10 17:21:29 来自手机 | 显示全部楼层
顶起顶起顶起
回复 支持 反对

使用道具 举报

海妖 该用户已被删除
发表于 2015-4-10 21:13:55 来自手机 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

0

主题

1271

帖子

3982

积分

vip会员

Rank: 1

积分
3982
发表于 2015-4-10 22:23:23 来自手机 | 显示全部楼层
专业抢沙发的!哈哈
回复 支持 反对

使用道具 举报

濮真 该用户已被删除
发表于 2015-4-12 20:33:16 来自手机 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对

使用道具 举报

0

主题

1254

帖子

3934

积分

vip会员

Rank: 1

积分
3934
发表于 2015-4-13 03:54:49 来自手机 | 显示全部楼层
啊啊啊啊啊啊啊啊啊啊啊
回复 支持 反对

使用道具 举报

*滑块验证:
您需要登录后才可以回帖 登录 | enginedx注册

本版积分规则

 
 



邮件留言:


 
返回顶部