每到过年，在外的游子都会远万里与亲人团聚，这是一种中国独有的特色，是一种别样的年味。我们期望在春节上线一款游戏，玩感知到这种年味，《穿越福城》应运。游戏的玩法以搭板子的方式，让玩家穿越36中主标建筑，意穿越中，走亲访友，十足。
△ 点击查看线游戏录屏
历时1个月的班点，《穿越福城》终于和大见面了。作为3D游戏界的萌新，设过程中我们遇到了非常多的困难，我们希望通过复盘与思考，能把项目中的问题与验总结出，所沉淀，同时也希望能抛砖引玉，对家能一些帮启发。
由于游戏将线于春节档，如何让家享受游戏的同时感受到「」，我们首的设目标。与此同时，游戏还肩负起推广手Q小游戏的使命，如何手Q平台的框架下，到轻化，也我们另一必须考虑的问题。基于以两点思考，我们项目了的探索。
通过收集「」相关资料分析对比，我们决以「剪纸」这种载体作游戏的主风格，这里主以下几点思考：
- 国有常多年俗文化与纸相关，比如剪纸，贴联，贴窗花，年画，挂灯笼等等，纸运用能增添年味。
- 剪纸具广泛的群众基础，人民众喜闻乐见的形式，能够产感共鸣。
- 时间上，短短2周时间，要成36个要地标城的全3D建模，还包括背景，元素等等，剪纸格表达更效。
- 能上，纸模型更轻量化，让用户在手Q平台上也能获得端游般的极致验。
基于上一些因素，我们做了大量格尝试。
同时，我们也试了多种配色方案，以找到合的游戏氛围，提升游戏的视觉体验。
通过这些设试，终我们确的设方案：
与此同时，我们还试把设流程标准化，提高设效率。
确了设风格流程后，接下需考虑的问题：如何短短2周时间内，保证执行的效率一致性。此，我们主了2件事：
容形式标准。定义了一套可快速执行的组合规范。这套规范包括了2个方面：构图原则和组成元素。为了突建筑，我们决定采角形构图并将构图元素进行拆分。
协作方式独立。每位设计师独立负责某个类别的元素设计，保证效率和统一。
△ 城设计
△ 背景设计
△ 元素
经过前面两个步骤，设计上的难点已经基本得到解决，此时我们担心的问题是开发还原到么程。由于时间紧任务重，我们计划兵分两路，设计和开发同时并行，降低险。在输了第一个模之后，我们就赶紧开发进行效果联调。由于是第一次做这种WebGL游戏，在对接过程中我们遇到了非多的麻烦。
还原的第一步就是要搭建游戏的大环境，这包括：摄像机，灯光，背景，模位置，变的视角等等。可是气大好，我们几乎每一处都遇到了困难。
坐标系
与开发联调发现，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：程序打光。考虑节省时间的办法，可能还通过场景里直接打光。虽然效果会差一些，但也不失一折中的方案。但实际测试中发，当投影右侧时，由于环境光方向固，投影会因模型的特殊角度几乎连一条直线。
几经波折，最终我们定来的方案是只给元素投影，原因是一方面可突游戏流程，另一方面是综合性的考虑。
经过前面的努，总算调整好了模和场景，但接来又有一个的问题摆在我们面前，模如此之多，应该建立怎样的输标准，才保证后续的资源够效输。
经常不断试，我们现在3D场中，要证一个物正确显示，需要明确几个点：
整个景的轴中心点需要在（0，0，0），代码会根据这个坐标点为基准进行定位，缩放和旋转。
需要统一景的中心点。这个第一条不同的地方在于，轴心点是容易修改统一的，但是物体的中心点却不一，因为每个景有大有，素也是有多有少。
后我们想了个办法，以调试好模型「上海」为模板，把所有场景主筑以东明珠为基准，体移动场景并与东明珠合，在游戏场景看到模型度和大小会是致。
轴决定场景朝，这不仅括模型体轴要正确，模型个独立 Mesh 也需要轴正确，误轴放在场景会被代码自动将其归正，导致误。
△ 误轴
模型的面法线顶点法线必须朝向显示面。
如果法线方向不对，会影响光的反射角度，导致体场景中变黑。
△ 确的法线方向
由于手Q平台线，基于WebGL引擎，性能非常高的求。了让游戏各档次的手机都能很好的游戏体验，我们设侧主了以下几件事。
模型减面
初的模型面数非常可怕的，对性能的影响非常。
减面，模型的面数多达10000+，327kb。
减面后，模型面数减少到791，69kb。
对于减面，我们摸索了自己的一套方法：在C4D中，导入Ai路径件后，先优点模式为细分，再把等参细分和细分数调到最低，然后再将有面进行角，最后在改变模的基础前，删除多余的面。
极限减面
在做了第一步的减面后，性已经有了非大的改善，整体的件大小相对之前已经减了80%，在开投影的前，已经可较流畅的在各类手机上行。但在某些低端机上，仍然会有卡顿，我们又进行了一轮极限减面，尽最大可改善游戏体验。因为在等角视图游戏场景中看到的面是固定的，极限减面要做的是删减那些可见的面，得到更面的模。
合并相同质Mesh
了减少程序渲染提交次数，一提升性能，我们对于模型中相同 Material 的 Mesh 也行了合并处理（如果Material不同，合并意义）。
减少纹理贴图
设计初，为了强化纸质感，在模型材质加入了些纸质贴图，为了进步提升性能，我们选择去掉这个贴图，而是在 UI层上设计了个噪遮罩，以实现纸质纹理效，最大程度保证性能和体验平衡。
关闭投
在做了前面那些优化工作后，性能已经有了非常大的改观。但经过测反馈，在某些机型上开投，还是有些许卡顿。不得已，只能将景投选择关闭。
其他
另外，我们还总结一能优化规律，包括：
- 将模的面数控制在1000。
- 减少Material 数量，尽能将贴图拼成一贴图，个模型共享一个Material。
- 尽可能压缩贴图，将贴图置为16位，大尺寸2的N次方，最大不超过1024。
- Fog（雾）性能造成影响较大。
为提升游戏验，并融QQ品牌基因，我们对角的设计也进行次的尝试，并最终选择将pupu鹅为游戏的主角。在角设计上，我们也遇到不少的问题。
本次动效制作过程的问题就关于引擎3D的结合。提到发环境的左手坐标与右手坐标的问题，于c4d，3dsmaxmaya 中行挑选。刚好 maya 的坐标系统与 three.js 的坐标一致，于动画特效主以 maya 制作主。
由于pupu鹅会始终出现在游戏中，所以对pupu鹅模型面数的控制变得至关重要。而且要对pupu鹅进行灵活的控制，必须要进行骨骼的绑定，并且骨骼的数量一定要少。
如用球形基本模型去简化，会出现各问题，比如两端三，绑上骨骼可能会出现意想不到问题。
于是考虑从正形开始细化到球体，而数也好控制。
并过程做好了高低三模型准备，来满足性能调试。
贴图烘焙时，由于想保留场景天，hdri，反射折射照效，于是用到了高级渲染，maya，c4d，3dsmax烘焙在 uv 接缝都出现两个像素黑边。
原来是贴图在烘焙后会有三个像素过渡边造成，经过研究发现需要用到 nuke 预除来把边缘扩充原出来。
骨骼绑定时预先考虑了一pupu鹅在游戏中会现的作，然后再进行分析如何合的骨骼数量和各自的功。
最终决定3根骨骼来控制，1来控制全身的要位移和自身旋转，2来控制身体的弹性，3来控制上半身上左右的扭和移。
本着到最佳效目，先做出demo来看效然后再决定实现法。
特效这块由于引擎粒子系统不友善算是麻烦比较大。以前熟悉uv动画，材质，粒子，序列图都不太好使。
一尘的特效，后每一球体都单独用动画手动K帧实，于出了一这样丽的动画曲线树。
考虑游戏的营收，在游戏中也加入了广告计。那如何让玩家在快速进行游戏的同，让广告可以得聚焦，并产生有效的阅读，是广告计的目标。
最开始想法是使用纯色底+logo形去规范广告素材输出，为在快速游戏时，单纯表现可以更有利于吸引玩家注意。其实有心学会发现高速广告，公交广告这类需要快速引起们注意，让用户快速阅读广告形，大多都是用这处理手法。
在制定第稿规范时候过于追求广告素材特异性，添加了很多装饰细节，线上实现时候发现为细节太多，广告主想展示内容反而没有到强化和突出，广告阅读效率常低。
为了加强广告聚焦性与快速阅读效率，并满足各类广告主诉求，我们把原来柱子单展示logo，改成双展示，这样好处是客户既能曝自己品Logo，时也能带出客户主品或代言，帮助客户曝自己品。在输出规范时候根据Logo，代言，品这三个维度做了详细规范。
即便是小游戏，我们也希望用户在游戏的程中有更更沉浸的验。所以我们不光在视表现、动效设计和互震动反馈上力，我们还希望在游戏音效和BGM上下文章，力求达到用户在我们的游戏中有一个完整的验。
根据游戏的玩法，绘制了游戏中的用户体验流程图，将各个在游戏中可能出现的情况进行罗列，标注触发点。然后在触发点中加入能增该触发点游戏体验和沉浸的音效。另一方面，根据整个游戏的视觉表现和春节的殊氛围，来拟定整套游戏音效和BGM的风格。
在套音效用到乐、音色和节奏都经过反复尝试和选择，新音效出后都接放入游戏去边玩边听，以求到最符合用户场景体验。
彩蛋设计
为了进一步提升游戏体验，丰年味，在游戏中也加入了一些中国素的彩蛋计，比如殊墩的计，当玩家在游戏中遇殊墩，会听殊的音效并获得额外加。
比如在遇殊广告能产生无敌飞跃的效果。
更多的彩蛋，也期待各位游戏中去发现。
游戏一经上线，就在网络上被刷屏，不少用户提的关键词有：「年味」、「可爱了」、「好玩」、「魔性」、「有过年的feel」，而这些觉正是想要给用户所传达的情。来用户的好评才是对项目最大的肯定。
以下是用户评价截图：
初次探索3D游戏，虽然遇了不少困难，但也算是收获。对来说有点体会：
在开发跟进过程中，作为初次接触3D游戏的萌，流程的熟悉，导致了很多必要的返工，无形中浪了宝贵的时间。我记得，有一次输18个模，连续返工了次。过，正是走过了这些弯路，才我们对于3D游戏的设计流程有了一个深刻的认识，因此总结了一套游戏设计流程。
一开始，我们在模型中做很的细节，做很的装饰，以期在场中给用户最佳的验。但是随着项目的深，很效果只能不断的做出取舍。为证游戏验，我们放弃投影，优化模型的面数，减少装饰，优化模型的局，努力平衡能和验。
刚接到这项目时，由于验，我们里特别底。
担心没经验影响进，我们就向手取经，边边做，摸索了自己的一套方法。
担心36个市模型做不完，就加班加点抢时间，并转变思，也顺完成模型设计。
担心还效果，就主动抓起代码，调，也先后解决了背景颜色问题，镜头问题，模型问题，摄像机问题等等。
我们发现，办法比困难多。
显然《穿越福城》还很多需提升的方，诸多条件限制下，很遗憾太多的效果不得不取舍。这次的游戏设已告一段落，但未的刚刚始，如果未游戏常规化运营，我们还很多事可以去。
最后，附上《穿越福城》游戏二维码，大扫码体验。希望这款游戏够给大带来乐！
浙公网安备33011002017549号