冠军游戏开发商教你打造高效能游戏App

雷亚游戏在2014年的欧特克AU中国大师汇活动中分享游戏制作的过程以及碰到的困难，如游戏角色的效能、游戏场景制作的效率、制作世界地图的流程等。

雷亚游戏在2011年成立，其中第一款且最著名的手机游戏就是Cytus，Cytus是一款音乐游戏，且勇夺全球超过96个国家的音乐游戏冠军。雷亚游戏还有制作几款游戏，如Deemo、Mandora等。而Implosion也将可以在Google的Android TV上体验。

雷亚游戏（Rayark）3D主美术（Lead 3D Artist）林昱廷在活动中分享了雷亚游戏在2015年年初要上市的一款游戏Implosion。林昱廷表示，雷亚游戏希望能够将次世代游戏主机（Next-Gen）的游戏体验搬到手机上，如Sony PS4、微软Xbox One等。同时，雷亚游戏也希望Implosion有华丽的画面，并且在游戏执行过程中，角色的打斗等动作也可以非常流畅。

而雷亚游戏在游戏制作初期，思考着何种游戏是画面最好的的游戏，而林昱廷脑海马上中浮现几个游戏。例如，The Last of Us、Bayunata、God of War（战神）、Injustice等。这些游戏的画面都很精致，而雷亚游戏的目标就是追求这种画面。

首先，雷亚游戏观察这几款游戏画面精致的因素，发现共通点为角色非常细致且真实，而游戏画面写实的关键就在法线贴图（Normal Map）的技术。

而Normal Map就是先制作高面数模型，再做低面数模型，接着再将2个模型叠在一起，且将高面数模型的资讯映射到低面数模型上，最后产出的一张贴图就是Normal Map。

实际运用的情况，在低面数模型上加上Normal Map，模型上布满了Normal Map所挟带的资讯。

（图片来源／雷亚游戏提供）

而且低面数模型加上Normal Map的效果看起来就近似于高面数模型的光影效果。

（图片来源／雷亚游戏提供）

所以雷亚游戏又在更多的角色模型加上Normal Map和骨架，以及动作，再用手机测试，但是画面每秒显示张数（Frames Per Second，FPS）只有3～10。

而一般电视游戏的FPS至少也有30～60，PS的游戏战神（God of War）在画面分辨率720p的情况下，平均FPS也约为30。

于是林昱廷抓着程式人员询问FPS极低的原因，而God of War却可以兼顾画面精致度和流畅度。原来是因为God of War是电视游戏（Console Game），而雷亚游戏制作的则是手机游戏。

手机游戏角色效能问题：角色面数太高、角色骨架太多、Normal Map渲染耗时

程式人员看了角色的设计后就说，1个角色的面数就有有5千多面，10个角色就高达5万面，再加上场景特效，手机执行的效能当然就差。

而造成游戏在手机上执行效能低的原因除了角色面数太高外，角色的骨架也太多，而绑太多骨架且会动作的角色会更消耗效能，且Normal Map渲染花费太多的时间。

要解决角色模型面数太高的问题，但又要尽量保留角色模型的细节，林昱廷认为，关键在于把重要且昂贵的顶点都留给外轮廓来使用，也就是将面数保留给大的外轮廓使用，而轮廓外的小细节，如凹凸感、光影等，则让Normal Map来呈现。另外，减少面数时还要注意角色做的动作会不会因为面数太低而穿帮。
减少面数后，和原模型其实差异不大，光影的细节也都忠实地保留下来。

（图片来源／雷亚游戏提供）

而且从模型的布线图中看出减少面数前后的差异，模型的顶点都尽量使用在外轮廓上，能省则省，在减少面数后，顶点的数量相差高达7倍，而这样的结果也造就了效能的节省。林昱廷表示，这也代表着，原本画一个角色需要1毫秒，减少面数后可能只需要0.2毫秒就可以画好。所以，如果3D美术师花更多时间仔细雕琢模型的面数，在执行效能上可以有很大的回馈。

（图片来源／雷亚游戏提供）

解决了角色模型面数的问题后，接着就要解决角色模型骨架太多的问题，而3D美术师决定要减少骨架则是观察角色动作，将细小末端且不常用到的骨架，或者是影响很小的骨架移除。

举例来说，Implosion中怪物角色的原始骨架，骨架数量是34根。在观察角色动作后，决定删除头部、手指和脚趾的骨架，最后只剩18根骨架。在删减骨架后，将角色模型配合动作来检查模型的品质。林昱廷表示，透过减少角色模型的面数外，又减少角色模型的骨架数量，让游戏执行的效能又更好了些。

（图片来源／雷亚游戏提供）

在角色效能的问题上，还有Normal Map渲染在手机上太耗效能，而雷亚游戏又希望游戏在手机执行的画面上要有10个角色，且FPS至少要高于45。

而要达到目标还有一种做法就是烘焙法线（Baking Normal Map），林昱廷参考了Diablo 3的角色贴图，他发现Diablo的角色头部为最亮的地方，离头部越远，亮度越低。

且林昱廷为了让角色身上的光影产生方向性，所以在角色模型的斜前方和斜后方放置光源，而光源会随着距离逐渐变弱，透过这样的方式来烘焙法线。另外，林昱廷也会调节场景的环境光强度来达到想要的效果。

烘焙前，是Normal Map效果的（图右），烘焙后是没有Notmal Map效果（图左）。

（图片来源／雷亚游戏提供）

为了要更接近Normal Map的效果，林昱廷还会做反射光（Specular）的后处理。图中，左边是光源在角色的左上方，右边是光源在角色的右上方。而Normal Map的特征就是当灯光移动时，会在物体凸起处形成高光，林昱廷表示，经过反射光的后处理，可以让模型没有使用Normal Map也可以达到相似的效果。

（图片来源／雷亚游戏提供）

所以林昱廷反射光的处理方式为，使用Photoshop将Normal Map的红色通道（R Channel）也就是X轴，以及绿色通道（G Channel）也就是Y轴的渐层作曲线调整，原本的中间色改为最亮色，原本的最亮色改为暗色，就可以得到一张贴图，而贴图的最亮面就是模型最凸出的地方。

接着利用这张贴图混合原本美术做出来的高光贴图，让原本的高光贴图也受到Normal Map调整出来的贴图影响，最后会得到类似Normal Map高光的效果。

林昱廷表示，Implosion这款游戏都是由45度角俯瞰，所以光源和摄影机会在同一个地方，所以可以烘焙（Bake）摄影机的方向。

烘焙前和烘焙后的差异，烘焙后的贴图会比较有立体感。而在烘焙时要注意，角色模型要用玩家最常看到的角度与姿势来验证。

（图片来源／雷亚游戏提供）

林昱廷说，解决了以上的角色效能问题后，在手机上执行游戏时就可以呈现10个角色，且每个角色都有类似Normal Map精致且立体的效果，FPS也达到45以上。

整体来说，Implosion角色效能优化的重点在于，角色模型的面数不超过1,500面，且角色模型的骨架不超过18根，以及烘焙法线到贴图上。

（图片来源／雷亚游戏提供）

手机游戏的场景制作效率问题

一个游戏的组成元素除了角色外，还需要场景，林昱廷表示，Implosion这款游戏中计划场景的数量有32关，可以让玩家尽情地游玩。

不过在一开始，雷亚游戏团队在3ds Max中尝试制作场景，但没想到一名美术人员必须要花费3个月才能完成。也就是说，32关就必须要花费8年。

林昱廷表示，雷亚游戏团队有2名场景美术人员，所以游戏的场景制作最快也要4年才能完成，这4年的时间还不包含游戏测试和场景修改的时间。

为了解决这个问题，雷亚游戏团队采用模组化制作来缩短制作时间。而制作的方式则是做出能够随意拼接的地板、墙壁和梁柱，所以这些物件会有共通的格式，例如，地板大小都是2平方米，以这个尺寸作为游戏场景制作的基准。

依照基准再制作地板连接墙壁的部分，而这部分会环绕着基础大小的地板生长。接着再做出墙壁和屋顶的部分。最后加上梁柱，让场景整体有支撑物。

（图片来源／雷亚游戏提供）

上述的模组制作完成后，再加上一点假光晕效果（Glow），让场景更加明亮。在模组完成后，利用这些模组组合出各式各样的房间，无论尺寸大小都可以组合出来。

（图片来源／雷亚游戏提供）

不过，这样只有一种风格的场景基本模组，为了丰富玩家玩游戏的视觉感受，就得增加场景的风格种类。可以利用不同的物件产生出另一种风格的基本模组。

且在基本场景制作完成后，还需要加入场景物件来装饰。接着将物件摆入基本场景模组中，增加场景的丰富性，林昱廷表示，采用模组化的方式制作场景，一个人制作一个场景的时间从3个月缩短为约2个星期，而一个人制作一关的时间从8年缩短为1.5年。

（图片来源／雷亚游戏提供）

手机游戏的世界地图制作流程

一个游戏中除了角色与场景外，也需要世界地图，提供玩家选择想游玩的关卡，也可以呈现游戏的世界观。

林昱廷表示，在Implosion的故事设定中有废弃都市、高科技城市等世界地图的设定。而制作的方法有2种，一是使用游戏的模组来拼出世界地图，二是制作新的模组来制作世界地图。但是在经过测试后，发现第一种方法做出来的世界地图过于死板，所以在Implosion的世界地图制作采用了第二种方法。

首先从制作出来的模组中挑选所需，接着使用这些模组组合出废弃都市的样貌。

（图片来源／雷亚游戏提供）

在确认废弃都市的整体格局后，使用3ds Max渲染出基本光影。

（图片来源／雷亚游戏提供）

接着再使用Photoshop中加上颜色、材质等，就完成了废弃都市的世界地图。林昱廷表示，使用几个模组组合可以快速制作出一张世界地图。

（图片来源／雷亚游戏提供）

在完成废弃都市的世界地图后，重复使用废弃都市的模组，再增加一个新的模型，来制作高科技城市。

（图片来源／雷亚游戏提供）

接着利用这些模组组合出高科技城市大略的样貌，并且考量关卡散布的位置。

（图片来源／雷亚游戏提供）

在组合完成后，要透过渲染来制造高科技城市的效果，在林昱廷想像中，高科技城市模型的线框非常明显，且带点半透明的感觉。

（图片来源／雷亚游戏提供）

最后再用Photoshop合成，就完成了高科技城市的世界地图。林昱廷表示，可以透过一些基础元件快速组合出不同风格的世界地图。

（图片来源／雷亚游戏提供）