文章目录
1. 前言
之前和师兄合作了一个2D像素风的游戏,笔者主要负责UI的设计部分,在这中间学到了很多知识,写此博客记录一下。
2. 主界面设计
2.1. 经过
完成这个任务时,参考了一个较完善的项目。并在复刻它技术的同时完成了初版主界面的设计。用到的几个点:
2.1.1. 按钮的设计
- 按钮的状态:
- 有未选中、选中和点击三个状态。
- 进入一个状态时会播放相应动画。
- 动画的播放和子物体的活跃状态由animator控制。
- 事件控制由eventtrigger来控制。注意eventtrigger只能用于控制UI事件。
- 事件发生时会调用脚本控制状态的改变。
- 按钮的排版:
- 这里用了vertical layout group组件,这可以自动把其下的子物体像列表一样规划起来。注意它还有对应的水平排版组件。
- 点击事件的管理
- 我个人倾向于的方法是在管理整个按钮组的物体上加一个脚本。
- 脚本中编写所有点击事件方法。
- 然后将点击事件绑定到对应按钮的eventtrigger中去。
- 或者绑定到点击动画结束的帧上去,不过这样不好维护,因为找哪个函数在哪里会变得很不直观。
2.1.2. 界面切换
- 多种UI界面的切换
- 比如设置界面和主界面的切换。
- 这里我直接用animator来实现了,把设置表单和主表单放在一个父物体下,触发点击事件后隐藏一个显示一个。
- 场景的切换
- 当时做的很赶,所以写的场景切换相当应付(索性最后也能用)。
- 因为场景是关卡式的,所以加载场景就用线式的了(没错用场景id累加加载[捂脸])——这里千万不要这么学。现在个人还是倾向于把场景保存为scriptObject,场景管理器提供复用性好的加载端口的方法。
- 异步加载的方案,这个应该是公认的。
- 切换界面
- 这个的话,需要单独一个dontdestory的物体来维护,fade的画面就用animator来控制。
- 这应该是比较公认的解决方案,当然我们的加载方案中还加入了随机文本和小动画。
2.2. 结果
- 因为各种原因最后的功能大部分的阉掉了。
- 最后主界面就只剩一个大标题和跳动的任意键继续:)
3. UI设计模式
主要讲讲怎么协调UI的操控(和解耦)。
3.1. UIManager
首先有一个UIManager来管理各个UI组件(非常稚嫩的理念):
- 我一开始想到UI的控制不只是鼠标,应该还包括像:P、esc、enter这样的按键控制。所以我在UIManger里控制按键。
- 为了解耦使用了UnityEvent。
- 使用按键需要UI组件自己来绑定,默认初始时manager并不知道其他组件的存在。
- 后来,我又发现一个按键可以控制多个组件很奇怪,就改成了类似栈的模式,只有栈顶的组件可以调用按键。
- 其实这样也不是很成熟,但后面确实没时间在这块继续磕了。
- Manager是一个单例
3.2. 设计模式
组件的设计借鉴了MVC的模式,做了一个四不像。。
- 每个组件由两个部分:
- view脚本只接受数据,负责ui的显示,其他一概不管。它记录了用于显示的子部件(滑条、image、text等)
- context处理逻辑、数据和状态,也负责在UIManager中申请权限。
- view和context都有它的基类提供一些公有的方法。UIManager中记录的是context的基类,按键对应方法也是基类中的虚方法。
- UI的处理全是触发式的,也就是所有UI中都没有update族函数。
4. 新手引导
这个比较简单
- 一个是帮助文本的显示
- 利用了Horizontal Layout Group来排列。
- 本文的切换和引导用的道具都是用animator来实现的。
- 具体方法就是把所有东西塞在一个父物体下,然后用animator控制各个物体的active。注意所有物体一开始均设为false。
5. 总结
总之学到了很多
特别是利用Animator可以少些很多代码