108km创始人梁伟国:Unity3D游戏UI开发经验谈

6月29日,由9Tech社区、51CTO、开源中国社区、SegmentFault主办的2013中国开发者大会于在广州白云国际会议中心隆重召开,本次大会围绕“移动·游戏·2013”展开。此外,还设有HTML5、Android、iOS、Unity、Cocos2d、Flash六大技术分会场。大会历时1天,邀请到全国IT领域专家40余位,内容涵盖当前最热门的移动、游戏开发技术及相关工具和平台的使用经验分享,是当下不容小视,首屈一指的技术盛宴。开发者将在此了解当下IT行业发展动态、技术发展趋势及技术专家们的经验分享。

在Unity专场上,108km创始人梁伟国发表了《Unity3D游戏UI开发经验谈》主题演讲。他以公司团队为案例,从流程方面介绍了从UI制作、设计到编程,并展示了UI布局和美术制作框图。他强调做技术产品一定要考虑开发和研发的区别。

108km创始人 梁伟国

以下是文字实录:

各位广州的朋友大家好!我是梁伟国,今天由我给大家讲讲Unity3D游戏UI开发。我之前是做Web的,是程序员出身,做过游戏设计师,现在是一家创业公司的创始人。从2006年到2009年,我在IBM公司工作。09年后自己做过一段时间的自由职业者,到最后才做Unity3D。从2006年后就跟朋友做了一个工作室,我最长的工作时候是在IBM,在IBM里技术方面不一定提高很多。但在同事聚会时,在里面学到最大的收获是流程和标准化的管理,500强公司的流程很严谨。之后我自己出来开公司,发现自己的工作室流程很混乱,所以今天很多是从流程方面跟大家探讨UI的经验。

首先跟大家简单介绍一下UI展示终端。最直观的是屏幕不一样,拿iPhone4、iPhone4s、iPhone5就代表了三个不同的屏幕,iPad1和iPad2也是两种不同的屏幕。跨平台第一直观就是多分辨率。

今天跟大家分享的是从UI制作、设计到编程。从设计角度开始,首先我们会考虑应该怎么做,怎样使成本降低。

UI设计三大原则

第一个设计的原则是居中布局,在2002 年、2003年像网易、新浪的网站是全屏铺满,从2005年开始就是居中,为何会有这种变化呢?是因为宽屏普及率很高,所以就会变成居中。在屏幕千变万化的情况下,我们考虑居中布局。

它大部分的功能都是通过居中的对话框来实现。因为要考虑到多分辨率,就得考虑UI的背景。如果用居中,UI的背景可以选择是否使用3D背景。大家如果玩过这个游戏,他们居中就是这个区域。

第二个原则九宫格浮动布局,这种情况下我们做了UI后就是为了在不同的分辨率上,这种九宫格的布局使用功能按钮、图表、血条等。这种浮动设计是任凭屏幕变化多大,都始终保持相对合理的位置。

第三个原则自适应尺寸,刚才两种布局是不能完全解决我们的需求,对话框按钮就是要根据屏幕拉伸。顺便提一下,Unity并没有区别iPhone、Android,全部都是自适应尺寸。

UI美术制作

上面三种方式就是UI的原则。设计的思路定下来后,就要开始美术制作,现在分享一下我做的美术框图。美术制作由草图再变成一个框图,我们游戏的框图用了AI,我可以告诉大家用AI更简单,好处更多。因为它很容易上手,任何一个策划用一天时间就能掌握基本操作。

我们在画框图时,就能很明确知道界面能够知道放下多少个按钮。画完草图后,让美术根据草图、尺寸做美术效果图,UI成品图也是在AI制作,PS也是挺好,国内的美术更喜欢用PS,画起来很简单,也很直观,国内AI高手没有那么多,游戏用AI用得不多。我们之所以用AI不用PS主要是AI是矢量,PS每个按钮还得画一次,效率太低了。整个游戏从开始到进入地图到对话框等,每一个都是可以用不同的画板、不同的分辨率,还有一个优点是导出图片很方便,用PS的话很可能一个按钮十几个图层,光选择十几个图层就很费劲。现在显示的图大概花费了两周不到,很方便。

下一步就是导出UI效果图,以前搞房地产、建筑之前,房子还没有盖,就找人喷一些效果图,让大家有直观的感觉,知道房子做出来是怎样,美术也是一样,当把AI画出来后,都有一个效果图,效果图出来后有很大意义。我们要求每一个UI页面导出效果图,存放到Unity项目文件夹,这是我们团队的规范,必须要保存到规定的文件夹里。

UI程序的实现

一个游戏的一线员工主要是策划、美术、程序三种工种组成,刚才的流程里为何要有草图和效果图,原因是草图是策划和美术之间沟通,之后用程序与美术用效果图沟通,让程序在Unity在程序中摆放。我们定了这个流程是减少策划、美术、程序之间的沟通成本,策划把草图交给美术,美术跟草图沟通好,然后程序跟美术就不会有什么纠纷。关于导出产品图,UI分了四种图片分类,普通切片、九宫格切片和填充整个区域的切片。

最后一项是讲程序,程序员拿到成品导出后,按照我们团队,就由程序员去摆放。我们程序员跟我们讲希望美术摆好再给他,但尝试过之后更麻烦。之后导出UI效果图,分层次、分组,用00_、 01_、02_序列号命名,这样会看得比较舒服,虽然这时命名多花一点时间,但是以后能节省很多工夫。接下来很重要的是程序放在哪里。整个UI对象有时比场景还多,要是自己写的程序把一段程序放在其中一个对象里,这时项目交给另一个人,他根本就不知道在哪里。我们专门用一个对象控制菜单的主逻辑,就把菜单 主逻辑绑到他身上。有时候有一些UI迫不得已还是需要那种单独把一个代码绑定在一个特定的UI对象。关于UI的布局摆放,只能靠场景组合来摆。

UI自动缩放

关于UI自动缩放程序,在这种情况下我们要设计一个UI自动缩放,我们是以iPhone4为基准,iPhone4是最中间的比例,变成iPad就会竖向拉长,iPhone5就横向拉长,实践之后效果不好,我们就按照iPhone4的长宽比来做。我们的对话框主要是以iPad的框来做,经过程序进行缩放按照比例,保证在iPhone4、iPhone5里都看得很束缚。

创业团队只需开发


关于性能问题,就是耗内存。如果确实占很大内存,可以使用动态加载、动态销毁。将独立的UI对话框制作成prefab。我作为过来人,大家做技术产品一定要考虑开发和研发的区别,特别是创业,研发是没有时间保障,开发是有明确的时间及产量保证,我们要做一个产品,产品用多少时间做是要有明确的。在北京,很多同行、团队用18个月、22个月开发一个开品,他们就是没有搞清楚开发和研发的区别。我们团队就是不太愿意要技术员研发很多时间,虽然很有帮助。但是考虑时间,目前的准则,做一款新产品研发的比例在30%以下,这样就保证了70%的工作是有时间保证。

你可能感兴趣的:(NGUI)