腾讯在春节上线的这款3D 游戏,是如何设计出来的? - www.looksinfo.com网 - UISDC

腾讯在春节上线的这款3D 游戏,是如何设计出来的?

2019/02/10 10304评论 8

每到过年,在外的游子都会不远万里回家与亲人团聚,这是一种中国独有的特色,也是一种别样的年味。我们期望在春节上线一款游戏,让玩家感知到这种年味,《穿越福城》应运而生。游戏的玩法是以搭板子的方式,让玩家穿越36个中国主要地标建筑,寓意穿越中国,走亲访友,年味十足。

点击查看线上游戏录屏

历时1个月的加班加点,《穿越福城》终于和大家见面了。作为3D游戏界的萌新,设计过程中我们遇到了非常多的困难,我们希望通过复盘与思考,能把项目中的问题与经验总结出来,有所沉淀,同时也希望能抛砖引玉,对大家能有一些帮助和启发。

风格探索

由于游戏将上线于春节档,如何让大家在享受游戏的同时感受到「年味」,成为我们首要的设计目标。与此同时,游戏还肩负起推广手Q小游戏的使命,如何在手Q平台大的框架下,做到轻量化,也是我们另一个必须要考虑的问题。基于以上两点思考,我们在项目前期做了大量的探索。

通过收集「年味」相关资料分析对比,我们决定以「剪纸」这种艺术载体作为游戏的主风格,这里主要有以下几点思考:

  • 中国人有非常多的年俗文化与纸相关,比如剪纸,贴春联,贴窗花,年画,挂灯笼等等,纸的运用能增添年味。
  • 剪纸具有广泛的群众基础,是人民大众喜闻乐见的艺术形式,能够产生情感共鸣。
  • 时间上,短短2周时间,要完成36个主要地标城市的全3D建模,还包括背景,装饰元素等等,剪纸风格表达更加高效。
  • 性能上,纸片模型更轻量化,让用户在手Q平台上也能获得端游般的极致体验。

基于以上一些因素,我们做了大量风格尝试。

同时,我们也尝试了多种配色方案,以期找到最合适的游戏氛围,提升游戏的视觉体验。

通过这些设计尝试,最终我们确定的设计方案是:

与此同时,我们还尝试把设计流程标准化,提高设计效率。

设计执行

确定了设计风格和流程后,接下来需要考虑的问题是:如何在短短2周时间内,保证执行的效率和一致性。为此,我们主要做了2件事:

内容形式标准化。定义了一套可快速执行的组合规范。这套规范包括了2个方面:构图原则和组成元素。为了能突出主建筑,我们决定采用三角形构图并将构图元素进行拆分。

协作方式独立化。每位设计师独立负责某个类别的元素设计,保证效率和统一。

△ 城市设计

△ 背景设计

△ 装饰元素

设计还原

经过前面两个步骤,设计上的难点已经基本得到解决,此时我们担心的问题是开发能还原到什么程度。由于时间紧任务重,我们计划兵分两路,设计和开发同时并行,降低风险。在输出了第一个模型之后,我们就赶紧找开发进行效果联调。由于是第一次做这种WebGL游戏,在对接过程中我们遇到了非常多的麻烦。

  1. 3D场景搭建

还原的第一步就是要搭建出游戏的大环境,这包括:摄像机,灯光,背景,模型位置,变动的视角等等。可能是运气不大好,我们几乎每一处都遇到了困难。

坐标系

与开发联调发现,C4D中的坐标系是左手坐标系,而游戏引擎中的坐标系却是右手坐标系,两个完全不同的坐标体系,在有旋转的情况下,存在一个矩阵变换的过程,无法通过简单的运算得到想要的参数。(ps:有关左右手坐标系资料,感兴趣的可以去https://www.cnblogs.com/mythou/p/3327046.html查看,这里就不展开了。)

坐标系的不同会引发什么样的问题呢?最直接的问题就是无法复用软件中设置好的参数,那如何对场景进行精确还原,这在当时是一个非常头疼的问题。而在代码中的参数设置并不是单一变量,而是多个参数的组合效果,所以其实能调成什么样,最开始只能靠碰运气。为了更快更好的调出想要的效果,我们让开发抽象出一个demo实例,由设计师进行调整。

摄像机和城市位置

点击查看游戏场景调整

在调参的过程中,发现不管怎么调整摄像机,始终都无法让角色在行进过程中,保持以相同的大小和角度看墩子和木板。一开始,我们想当然的把3D游戏理解为是有透视的,但其实我们做的是一个等角视图游戏,它并没有透视。在修改了视图后,总算看到了希望。

一波未平,一波又起,我们发现城市模型在场景中的位置和缩放比例非常难确定。这里有2个问题需要解决,一个是模型在场景里出生的位置,另一个是模型与墩子之间的相对位置。

一开始的策略是先调整好城市模型的位置,然后保持这个位置固定不变,但没考虑到与墩子之间的相对位置,结果发现在游戏过程中,镜头随着墩子放大缩小,场景被拉伸变形非常大,很不协调。

之后,我们将场景与墩子的出生位置和行进中的相对位置进行固定,经过反复调试,最终才有了现在大家看到的效果。

灯光

调整好了模型位置和摄像机参数,当注意到游戏画面时,我们的内心是崩溃的。

由于游戏引擎和3D软件的渲染算法不一样,不能直接将软件中的颜色,灯光信息直接复用,所以在这里我们也只能在代码中进行调试。

点击查看游戏灯光调整

投影

对于投影,起初并没有引起我们多少注意,我们认为和3D软件中的投影一样,只需要把场景中的颜色和灯光打好,投影自然就没问题了,却不曾想投影居然会是一个大麻烦。

我们发现,场景光直接打出来的投影效果很差,对性能的影响也极大。针对这2个问题,我们在设计上也尝试了一些优化方案。

方案1:烘焙贴图。指的是让场景中的模型不直接通过环境光产生投影,而是把投影提前渲染好,再以 UV 的形式精确的贴回场景。这个方案有2个难点:

  • C4D 对于 UV 的编辑很不友好,耗时费力;
  • 对接流程不熟悉,与开发配合不够流畅。

我们边做边测试,花了一天时间,跟开发不断联调尝试,才勉强完成了墩子的模型烘焙,UV编辑和贴图。简单的模型困难尚且如此,对于城市这么复杂的模型来说,烘焙的方案耗费的时间不敢想象。我们担心是不是没有找到高效的设计方法,也专程请教了火影手游项目组的同事,确认了这块的工作量。虽然烘焙的方式能够将投影还原到最佳,但是考虑到整体项目进度,我们不得不放弃这套方案。

方案2:PS画出投影。既然烘焙太费时间,那我们退而求其次,降低投影精度,通过 PS 画出大致投影,再贴UV。经过尝试,发现时间的问题依然存在,这个方案只是省了一个烘焙的过程,编辑UV 和贴UV 的步骤依然非常麻烦,考虑再三只能作罢。

方案3:程序打光。考虑最节省时间的办法,可能还是要通过在场景里直接打光。虽然效果会差一些,但也不失为一个折中的方案。但在实际测试中发现,当投影在右侧时,由于环境光方向固定,投影会因为模型的特殊角度而几乎连成一条直线。

几经波折,最终我们定下来的方案是只给主元素加投影,原因是一方面可以突出游戏主流程,另一方面也是综合性能的考虑。

  2. 模型资源

经过前面的努力,总算调整好了模型和场景,但接下来又有一个新的问题摆在我们面前,模型如此之多,应该建立怎样的输出标准,才能保证后续的资源能够高效输出。

经常不断调试,我们发现在3D场景中,要保证一个物体正确显示,需要明确几个点:

整个场景的轴中心点需要在(0,0,0),代码会根据这个坐标原点为基准进行定位,缩放和旋转。

需要统一场景的中心点。这个与第一条不同的地方在于,轴心点是很容易修改统一的,但是物体的中心点却不一样,因为每个场景有大有小,元素也是有多有少。

后面我们想了一个办法,以调试好的模型「上海」为模板,把所有场景中的主建筑以东方明珠为基准,整体移动场景并与东方明珠重合,在游戏场景中看到模型的角度和大小就会是一致的。

轴向决定场景的朝向,这不仅包括模型整体轴向要正确,模型中每一个独立的 Mesh 也需要轴向正确,错误的轴向放在场景中会被代码自动将其归正,导致方向错误。

△ 错误的轴向

模型的面法线和顶点法线必须朝向显示面。

如果法线方向不对,会影响光的反射角度,导致物体在场景中变黑。

△ 正确的法线方向

  3. 性能

由于是在手Q平台上线,基于WebGL引擎,在性能上有非常高的要求。为了让游戏在各个档次的手机都能有很好的游戏体验,我们设计侧主要做了以下几件事。

模型减面

最初的模型面数是非常可怕的,对性能的影响非常大。

在减面前,模型的面数多达10000+,327kb。

在做减面后,模型面数减少到791,69kb。

对于减面,我们也摸索出了自己的一套方法:在C4D中,导入Ai路径文件后,先优化点模式为细分,再把等参细分和细分数调到最低,然后再将所有面进行三角化,最后在不改变模型的基础型前提下,删除多余的面。

极限减面

在做了第一步的减面后,性能已经有了非常大的改善,整体的文件大小相对之前已经减少了80%,在不开投影的前提下,已经可以比较流畅的在各类手机上运行。但在某些低端机型上,仍然会有不少卡顿,所以我们又进行了一轮极限减面,尽最大可能去改善游戏体验。因为在等角视图游戏场景中能看到的面是固定的,所以极限减面要做的是删减那些不可见的面,以得到更少面的模型。

合并相同材质Mesh

为了减少程序渲染提交次数,进一步提升性能,我们对于模型中相同 Material 的 Mesh 也进行了合并处理(如果Material不同,合并没有意义)。

减少纹理贴图

设计之初,为了强化纸的质感,在模型的材质中加入了一些纸质贴图,为了进一步提升性能,我们选择去掉这个贴图,而是在 UI层上设计了一个噪点遮罩,以实现纸质纹理效果,最大程度保证性能和体验之间的平衡。

关闭投影

在做了前面那些优化工作后,性能已经有了非常大的改观。但经过测试反馈,在某些机型上开投影,还是有些许卡顿。不得已,我们只能将场景投影选择关闭。

其他

另外,我们还总结了一些性能优化规律,包括:

  • 将模型的面数控制在1000以内。
  • 减少Material 数量,尽可能将多张贴图拼成一张贴图,多个模型共享一个Material。
  • 尽可能压缩贴图,将贴图设置为16位,大小尺寸2的N次方,最大不超过1024。
  • Fog(雾)对性能造成的影响较大。

角色设计

为了提升游戏体验,并融入QQ品牌基因,我们对角色的设计也进行多次的尝试,并最终选择将pupu鹅作为游戏的主角色。在角色设计上,我们也遇到了不少的问题。

  1. 软件的选择

本次动效制作过程最大的问题就是关于引擎和3D的结合。在前期有提到开发环境的左手坐标与右手坐标的问题,于是在c4d,3dsmax和maya 中进行挑选。刚好 maya 的坐标系统与 three.js 的坐标一致,于是动画和特效主要以 maya 制作为主。

  2. 模型和贴图烘焙

由于pupu鹅会自始自终出现在游戏中,所以对pupu鹅模型面数的控制变得至关重要。而且要对pupu鹅进行灵活的控制,必须要进行骨骼的绑定,并且骨骼的数量一定要少。

如果用球形基本模型去简化,会出现各种问题,比如两端的三角面,绑上骨骼可能会出现意想不到的问题。

于是考虑从正方形开始细化到球体,而且面数也好控制。

并且过程中做好了高中低三种模型的准备,来满足性能的调试。

贴图烘焙时,由于想保留场景中天光,hdri,反射折射的光照效果,于是用到了高级渲染器,maya,c4d,3dsmax中的烘焙在 uv 的接缝都出现一两个像素的黑边。

原来是贴图在烘焙之后会有三个像素的过渡边造成的,经过研究发现需要用到 nuke 的预除来把边缘扩充还原出来。

  3. 骨骼绑定和动画

骨骼绑定时预先考虑了一下pupu鹅在游戏中会出现的动作,然后再进行分析如何合理的安排骨骼数量和各自的功能。

最终决定以3根骨骼来控制,1用来控制全身的主要位移和自身旋转,2用来控制身体的弹性,3用来控制上半身上下左右的扭动和移动。

  4. 特效

本着达到最佳效果的目的,先做出demo来看效果然后再决定实现方法。

特效这一块由于引擎粒子系统的不友善算是麻烦比较大的。以前熟悉的uv动画,点材质,粒子,序列图都不太好使。

一个烟尘的特效,最后是每一个球体都单独用动画手动K帧来实现,于是出现了一个这样美丽的动画曲线树。

广告设计

考虑到游戏的营收,我们在游戏中也加入了广告设计。那如何让玩家在快速进行游戏的同时,让广告可以得到聚焦,并产生有效的阅读,是我们广告设计的目标。

最开始的想法是使用纯色底+logo的形式去规范广告素材的输出,因为在快速游戏时,单纯的表现可以更有利于吸引玩家的注意。其实有心的同学会发现高速广告牌,公交车广告这类需要快速引起人们注意,让用户快速阅读的广告形式,大多都是用这一处理手法。

在制定第一稿规范的时候过于追求广告素材的特异性,添加了很多装饰细节,线上实现的时候发现因为细节太多,广告主想展示的内容反而没有得到强化和突出,广告的阅读效率非常低。

为了加强广告的聚焦性与快速阅读的效率,并满足各类广告主的诉求,我们把原来柱子只单面展示logo,改成双面展示,这样的好处是客户既能曝光自己的品牌Logo,同时也能带出客户主推的产品或代言人,帮助客户曝光自己的品牌。在输出规范的时候根据Logo,代言人,产品这三个维度做了详细的规范。

音效设计

即便是小游戏,我们也希望用户在游戏的过程中有更好更沉浸的体验。所以我们不光在视觉表现、动效设计和交互震动反馈上发力,我们还希望在游戏音效和BGM上下文章,力求达到用户在我们的游戏中有一个完整的体验。

我们根据游戏的玩法,绘制了游戏中的用户体验流程图,将各个在游戏中可能出现的情况进行罗列,标注触发点。然后在触发点中加入能增强该触发点游戏体验和沉浸感的音效。另一方面,我们根据整个游戏的视觉表现和春节的特殊氛围,来拟定整套游戏音效和BGM的风格。

在整套音效中用到的乐器、音色和节奏都经过反复尝试和选择,每一次新的音效产出后都直接放入游戏去边玩边听,以求达到最符合用户场景的体验。

彩蛋设计

为了进一步提升游戏体验,丰富年味,我们在游戏中也加入了一些中国元素的彩蛋设计,比如特殊墩子的设计,当玩家在游戏中遇到特殊墩子时,会听到特殊的音效并获得额外加分。

又比如在遇到特殊广告时能产生无敌飞跃的效果。

更多的彩蛋,也期待各位到游戏中自己去发现。

用户反馈

游戏一经上线,就在网络上被刷屏,不少用户提到的关键词有:「年味」、「太可爱了」、「好玩」、「魔性」、「有过年的feel」,而这些感觉正是我们想要给用户所传达的情感。来自用户的好评才是对项目最大的肯定。

以下是用户评价截图:

总结和感悟

初次探索3D游戏,虽然遇到了不少困难,但也算是收获满满。对我来说有几点体会:

  1. 专业的流程非常重要

在开发跟进过程中,作为初次接触3D游戏的萌新,流程的不熟悉,导致了很多不必要的返工,无形中浪费了不少宝贵的时间。我记得,有一次输出18个模型,连续返工了三次。不过,也正是走过了这些弯路,才让我们对于3D游戏的设计流程有了一个深刻的认识,也因此总结出了一套游戏设计流程。

  2. 现实就是一个不断取舍的过程

一开始,我们在模型中做了很多的细节,做了很多的装饰,以期在场景中给用户最佳的体验。但是随着项目的深入,很多效果只能不断的做出取舍。为了保证游戏体验,我们放弃了投影,优化了模型的面数,减少了装饰,优化了模型的布局,努力平衡性能和体验。

  3. 用心做事,总有办法

刚接到这个项目时,由于没有经验,我们心里特别没底。

担心没经验影响进度,我们就向高手取经,边学边做,也摸索出了自己的一套方法。

担心36个城市模型做不完,就加班加点抢时间,并转变思维,也顺利完成了模型设计。

担心还原效果,就自己主动抓起代码,自己调试,也先后解决了背景颜色问题,镜头问题,模型问题,摄像机问题等等。

我们发现,办法总比困难多。

显然《穿越福城》还有很多需要提升的地方,在诸多条件限制下,很遗憾有太多的效果不得不做取舍。这次的游戏设计已经告一段落,但未来的路才刚刚开始,如果未来游戏常规化运营,我们还有很多事可以去做。

最后,附上《穿越福城》游戏二维码,欢迎大家扫码体验。希望这款游戏能够给大家带来欢乐!

www.looksinfo.com大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:/tencent-3d-game-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

www.looksinfo.com专访 转场动效 设计师 扁平化设计 www.looksinfo.com大课堂 交互设计师 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 平面设计 AI教程 设计理论 神器下载 用户体验设计 字体下载 设计趋势 海报设计 psd下载 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 用户体验 酷站 PS教程 网页设计 经验分享

您还没有登录

www.looksinfo.com启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!www.looksinfo.com网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 www.looksinfo.com网 在这里

首页百度一下360搜索 搜狗搜索 神马搜索"