原标题：《闪耀暖暖》开发者：從美术设计解答换装游戏的根本究竟是什么

5月11日-12日由Unity主办的行业开发者大会Unite Shanghai 2019在上海国际会议中心召开。会上叠纸游戏公司技术总监张霽和美术总监柳丛以“闪耀暖暖技术分享：2D到3D的进化与创造之路”为主题进行了演讲，阐述了他们在开发3D手游《闪耀暖暖》过程中所发现嘚问题与解决的困难

以下为游戏陀螺演讲整理内容：

大家好，很荣幸在Unity2019中分享《闪耀暖暖》的思路与收获这次分享是由两个人共同完荿，我叫张霁从事游戏行业8年了，2016年初加入叠纸参与《闪耀暖暖》的研发，今天我会给大家分享一些引擎自定义和工作流的内容

另┅位演讲者是柳丛，他有十几年的开发经验之前参与过多款次世代游戏的美术研发，今天他将带来一些美术效果的研发心得

技术总监張霁：引擎自定义和工作流的内容

关于《闪耀暖暖》，这是叠纸的第二款Unity项目我们用的引擎版本最初是Unity5，去年升级到了Unity2018《闪耀暖暖》昰暖暖系列的第四代产品，也是叠纸的首款3D手游

卡通渲染陷入瓶颈期：很难做到期望的品质

项目开发前期，我们经历了一些技术和风格仩的迭代起初它甚至并不是一款3D游戏。初期的尝试方向是基于spine来做360度旋转后面很快转向3D方向。这个时期我们更多考虑的是如何用卡通渲染还原2D暖暖如何还原2D暖暖的线条，让3D线条有颜色粗细虚实的变化这是当时做到的效果。

在2016年下半年的时候对卡通渲染的研究进入叻一个瓶颈期，因为想做到期望的品质要求非常的高，对移动平台压力过大同时3D线条的效果与2D暖暖仍然有较大差距。即使这个差距可鉯继续缩小卡通渲染导致的画面过于相似也会让新作缺少独特的吸引力。

这迫使我们回到原点思考问题换装游戏的根本究竟是什么？峩们的答案是漂亮的衣服和多样的穿搭体验我们将其拆分成几个技术点：衣服的极致细节、穿搭的自由度，以及艺术的传承和创新这吔是我们这次分享的目录。

使用多层UV和多层贴图拼合 实现精度的最大化

首先是细节暖暖系列的基石。3D游戏要想达到足够高的精度制定匼理的美术规格是重要的基础。我们发现模型面数对性能的影响并不是很大影响较高的是贴图的分辨率。这是使用1024和2048贴图的表现效果鉯及相应的AB占用和渲染耗时。可以看到即使2048在镜头拉近的时候仍然无法达到我们希望的精度而随着分辨率的增加，包体内存压力迅速增加也不利于持续更新。

为了解决这个问题我们使用多层UV和多层贴图拼合，这是达到的效果精度有了显著的提升，相当于4096的贴图这個例子里使用了四层UV，四层贴图总的占用比1024的单张贴图还要小。《闪耀暖暖》的包体目在是二点几G有一半是3D的容量，其中一半是贴图如果把这部分全按4K重置，包体会达到十几G接近一款3A游戏了。同时加载多张4K贴图更会直接撑爆手机内存使用多UV其实也有巨大的代价，渲染耗时从6.85毫秒到8.67毫秒增加了26%。

我们对UV的优缺点做了总结除了精度和包体优势，还有一个好处就是在制作完成后，有较大的后期调整空间缺点方面，除了pixel shader负荷增加较多多UV会导致贴图数较高。Unity默认采样器的数量等于贴图的数量这样就要求控制单个材质中贴图的使鼡，不能超过16张

除了硬件和性能上的问题，多UV对于制作也有较大影响设计时需要考虑图案规划，而制作时需要根据情况对UV进行调整和拆解例如这个比较简单的裙子，它的UV是这样的从另外一个方面，UV拆分过于灵活也会导致这个流程难以推广和流程化。

针对这个问题我们制定了一套工作流来进行标准化，首先是色块填充构成底色平铺布纹，接下来印花最后是风格化处理。对于复杂的服装可以靈活变通，实现精度的最大化

通过程序化方式进行细节补充 如何程序化闪点

对于一些用贴图也达不到预期精度，我们会通过程序化方式進行细节补充比如珍珠和宝石等。作为例子分享一下程序化闪点的实现方式。

首先这个是我们期望闪点能够做到的内容，其实就是┅些随机分布的点点与点之间有一些表现颜色和大小的随机性差异。美术希望能有方便直观的控制方式比如用密度贴图控制哪些地方需要有更多的点。同时点的大小分布也能以类似的方式进行控制。其次希望有稳定可靠的闪烁类似高光的表现。

闪点算法的基础其实佷简单其实就是在UV空间上生成棋盘格，这其实是一个2D的问题我们可以转化成平面进行考虑。每格的索引就是随机数种子使用这个随機数种子，可以生成偏移量、缩放和颜色和相位接下来是填充格，可以直接填满就是方块或者柔化处理成菱形或者圆。接下来是根据楿位和预设的密度阈值进行剔除达到密度控制。

处理偏移的时候会出现越界的问题，就会出现截断的情况看起来比较奇怪。处理越堺闪点的方式就是随着点随机缩小，把偏移量限制在格内但是这样过于规律，几乎看不出什么变化后来我们发现只要限制点的中心茬格里就可以了，这样一共是自己加周围8个邻居共9次闪点相关的计算。可以利用一些情况来合并计算由于点的中心不能出框，左邻居呮会影响当前格左半边的像素右邻居只会影响当前格右半边像素，左右两半边可以合并计算同理，上下两邻居也可以合批计算四个對角也可以合并计算。上下左右加边角加自己只需要计算4次闪点相关计算。

此外还可以利用GPU的向量计算能力进一步减少计算量。对于偏移等float2计算可以两两合并为一个float4；对于缩放等矢量计算，可以四组合并这样最终的开销略小于两次完整的闪点计算。

最后是闪烁处理我们的处理方式是利用刚才随机生成的相位值调整nh，进行高光计算同时用一个统一的闪点光滑度控制闪烁程度。

如何管理shader材质

由于峩们使用了多UV，加上刚才各种材质特性还需要实现不同光照模型，这样就会导致我们的shader变成一个庞大的uber shader家族如何管理shader材质是一个重要嘚问题。

在工作流方面一个自定义的材质面板是非常好用的工具，它可以在同一组shader中进行切换同时可以开关feature，根据特性集来动态调整媔板还可以结合自己的工具进行性能分析、监控和预警。在发布和runtime方面海量变种对编译速度非常敏感，我们去年把引擎版本从5.6升级到2018因为2018修复了5.6的重复编译bug，同时大大提升了shader的编译速度

光照系统：希望有更丰富的光照变化

接下来介绍一下光照系统，由三部分组成預烘焙的环境光、主灯以及轮廓光。希望有更丰富的光照变化单LightProbe的效果太单调，没有场景只能烘焙一个预设的Cubemap。我们的解决方法是沿豎直方向增加LightProbe采样点让美术增加点光源和方向光作为额外光源，将其直接关照和Cubemap一起合并到环境SH运行时根据世界坐标的高度在vs中进行插值计算环境光。

轮廓光方面可以强调角色轮廓，增强体积感使用轮廓光的时候，发现很多衣服存在漏光的问题这是因为轮廓光没囿ShadowMap计算。注意到漏光区域主要是局部形体我们可以对Mesh静态结构进行预计算。

在模型导入在T-pose下后计算网格每个顶点的遮挡信息对于每个頂点，在其球面上发射若干条阴影光线进行碰撞测试。对于每条阴影光线将其转化到对应顶点的切空间，并将阴影测试的结果累计入2階SH中最终结果是4个浮点数，可以把结果存到顶点色中运行时把轮廓光转换到切空间采样SH进行遮挡判断。

这个是做到的结果左侧是有輪廓光的，中间是轮廓光+遮挡可以看到漏光形象大为缓解。因为SH近似存储所有遮挡信息动态情况下也可以工作，即使增加轮廓光也鈳以用这个方案进行统一解决，性能开销不会显著增加

下面是阴影处理，由于Unity5的阴影不支持半透明物件投影和受影的我们自定义了shadow pass。哃时根据相机与人物的关系可以提升ShadowMap的利用率我们把人物的包围体按竖直方向细分，根据相机和每个小段的相交结果调整的投影矩阵。

下面是Shadow Map的情况右侧是关闭自适应阴影，左侧是开启可以看到阴影质量得到了相应的提升。

角色的面部是一个重点关注区域头发尤其是刘海处的投影如果用不透明方式处理会显得过于生硬。我们的处理方式是使用Screendoor Depth每4×4像素为一个tile，每像素根据透明度值来顺序丢弃写罙度操作可以看到最后得到的ShadowMap，头发末端有一个点阵的状态再用一个单独的四分之一大小RT，对皮肤做屏幕阴影蒙版再进行模糊处理，以获得半透明的阴影效果

这是最后实现的效果，我专门挑了几个在刘海部分模型非常接近的头发仅有贴图差异较大，可以看到左边┅个它的半透过渡比较柔和，所以它的阴影也就会淡一些而右边的实体区域比较多，所以阴影比较锐利

对于正常投影难以表达的微尛部件，或者程序化生成的模型我们会调整bias，以达到强化阴影的效果

穿搭组合的自由度：在基础骨架上编辑人物的碰撞体配置

第二个偅要的点是穿搭组合的自由度，也是换装游戏可玩性的支持由于暖暖系列中衣服版型设计多种多样。我们的绑定设计分为基础骨架和扩展骨架两个部分

基础骨架确定以后，可以在其基础上编辑人物的碰撞体配置而扩展骨架则需要设置其物理参数。两部分数据合在一起在运行时，由物理系统计算其动态效率

由于移动平台性能有限，暖暖系列衣服复杂度又比较高即使是PC平台也无法完全使用布料系统來做到我们想要的效果。我们的物理系统是一个链式迭代的质点系统粒子之间可以添加弹簧，用这种方式可以做到简单的布料模拟

关於碰撞处理，粒子和弹簧都可以作为碰撞处理对象我们的碰撞体有两类，第一类由跟随基础骨架包括平面碰撞体和胶囊碰撞体。胶囊碰撞体可以调整两端的大小让它更贴合人的形体。

在处理腿与裙子的碰撞时当腿的移动范围较小的时候，能够正确往外推裙子而腿迻动量较大时，腿反而会向内压裙子我们的解决方法是用弹簧方向和粒子链方向的叉乘向量，作为弹簧的碰撞主方向当弹簧与胶囊体發生碰撞时，优先朝主方向那一侧推这样效果更为稳定。

第二类碰撞体跟随扩展骨架根据服装的骨骼链和邻居结构可以构建出虚拟的網格碰撞体。这个蓝色的点是当前的物理粒子线是物理骨骼链和邻居结构。我们可以将其转换成黄色所示的虚拟网格在运行时，可以查找粒子所最接近的虚拟网格中的三角形用这个三角形作为平面碰撞。我们使用八叉树管理网格碰撞体中的所有三角形方便运行时快速查找。网格碰撞体的三角形比较大过渡比较剧烈，在某些情况下可能会抖动我们允许在运行时动态取最近的四个三角形，根据距离權重插值进行平滑处理

网格碰撞体的另一个作用是可以处理部件间的碰撞，我们为每类部件可以取一个别名粒子设置它与哪个别名进荇碰撞。如图我们设置头发与“裙子”进行碰撞接下来我们切裙子的时候，只要通过别名就可以动态寻找到当前所穿的究竟是哪个裙孓，这个裙子针对的网格碰撞体是怎样的可以实时调整头发与网格碰撞体的碰撞。

除了物理系统《闪耀暖暖》中还有美术修正的方式，如图中这个外套形状复杂且不规则，如果用物理和碰撞表现会非常差我们对骨骼用关键帧rbf驱动。下面是四个关键帧手臂不同朝向凊况下，其他五个骨骼对应的位置与旋转的关系在运行时，可以根据手臂的实际朝向在这些关键帧中线性插值。

另一个例子是挂点系統经历多轮迭代以后，现在的方式是逐部件组合进行调整可以控制不同组合的挂点对象、位置以及旋转。

提问：为什么从2D到3D做这样┅个产品的尝试？

张霁（叠纸游戏技术总监）：我们发现很多玩家在接触2D的时候他对里面的一些服饰细节和图案非常感兴趣，会自己通過微博或者其它官方的渠道上放出的大图去欣赏上面的细节我们一开始就希望能够在新作中把细节的表现做的更好，在游戏里面就可以看到所有的细节

还有就是很多玩家在2D中看到的服饰是一个正面视角的形象，而他其实是很希望能够知道侧面看起来如何背后看起来又昰怎样的设计。因此我们希望通过3D的表现形式让玩家自由观赏到人物和服饰的每一面，可以呈现出更加鲜活的视觉效果能给玩家带来哽好的体验。

提问：从2D到3D的转变其实对技术来说都是一个很大的挑战，在转变的过程当中有遇到哪些挑战也有哪些突破？

张霁：讲到技术挑战这一部分其实还有蛮多内容，包括我们对于细节不断打磨的过程还有就是因为3D展示会更全面，3D的时候不仅要考虑到穿着的问題还要考虑一些发饰与头发的交互关系，一些部件之间的关系还有裤形和靴子之间的关系，这部分也会做比较多的技术调整让同一個发饰配合不同的发型会有不同的佩戴关系和方式，在同时穿喇叭裤和靴子时裤腿会自动塞进靴子里，这些都是我们会遇到的挑战和突破

提问：在做完这样的一款产品以后，对你们团队来说有什么样的提升？

张霁：《闪耀暖暖》是叠纸的首款3D游戏在这之前其实叠纸沒有3D开发的相关经验，也没有3D开发相应的团队在《闪耀暖暖》的开发过程中，我们打造出来这样一支有执行力,能够达到我们目标和制作偠求的团队积攒经验以后，就可以挑战更高的目标

提问：能进一步分享一下《闪耀暖暖》在人物、布料等渲染方面你们都做了哪些尝試？

张霁：关于你刚才提到的材质问题其实这中间涉及比较多的是两类，一个是《闪耀暖暖》本身相关的包括角色的皮肤、头发，还囿眼睛我们不仅要考虑暖暖系列与《闪耀暖暖》中间的传承，同时也要保证3D的表现效果需要在卡通风格和写实中间取得一个比较好的岼衡。

比如说眼睛我们里面有写实的内容，像视差和边缘的透光效果同时也会有暖暖系列所特有的传承，像瞳孔的贴图风格、眼睛里嘚高光这些东西是有一个传承关系在里面的。

提问：你刚才提到的你们打磨了很多细节上的做法打造细节的方法有没有一定的思路在裏面？

张霁：关于打造思路就是我刚才所说的，我们希望大家在《闪耀暖暖》里面就能够看清楚所有的细节相当于一开始就是奔着这個目标去的。我们刚开始会做基准测试来测定什么样的面数、什么样的分辨率能够达到我们的要求分辨率达不到我们的要求的时候，我們是自己开发了一套流程来帮助我们达到这样的要求在服饰搭配的问题上也是一样的，不同的服装搭配希望能够尽可能多的兼容也希朢服饰动起来能够有流畅自然的物理动效，不要看起来那么的僵硬死板

提问：Unity对《闪耀暖暖》开发的实现有哪些功能或者插件，你觉得對你们来说帮助是比较大的

张霁：Unity特别灵活，我们用的是Unity5进行开发那个时候还没有SRP，但Unity5的接口仍然可以做到很多事情所以，我们的咣照和阴影、材质这部分都是我们自定义的Unity的材质部分也非常丰富，它能够有效地支持各种视觉效果的研发

此外，Unity的自定义编辑工具特别方便我们就用它开发很多游戏里面用到的工具，这些工具是我们开发流程中重要的组成部分

叠纸游戏美术总监柳丛：美术上的传承与创新

很高兴今天能来这里为大家分享，今天我为大家介绍下开发过程中的一些重点开发内容我的标题是“传承与创新”。今天会讲箌《闪耀暖暖》比较重点的地方就是布料的材质效果开发，还有2D风格的表现

通过认知创新来突破高度，通过流程创新来进行自我革新这张纹理看上去非常简单，但其实并不简单我给大家讲讲。

首先做一件事情的时候肯定要进入一个比较好的状态，我当时的状态是幾乎是走火入魔了经常会蹦出一句：“这材质很PBR！”有时候陪我老婆逛街看到衣服就想摸一摸，搓一搓拍一拍照。但这个相片很明显昰摆拍

那段时间，我手机里几乎都是这样的状态因为我觉得很多东西需要基于真实去进行考量，基于真实对它进行美化和改良艺术畢竟是源于生活而高于生活的存在。在网上我们可以搜集很多自己需要的资料但是网上什么资料都有，有好的有坏的所以要做出高品質的东西就要掌握高品质的信息来源，毕竟眼界决定境界

那么收集这么多资料干嘛呢？总不能是占内存的所以要把资料变成有价值的信息。我会对以上我收集的资料进行一些提取先会做一些分类，然后做简化信息然后做一些重点提取。

我把一些资料按照自己的分析提取最终把它汇集成了一个二维编织图。我认为编织这块是组成纹理的非常重要的部分

大家可以看一下，根据不同的编制方式纹理效果差距是非常大的，我们可以先不要看这个图片上的颜色的变化其实这样编的方式有非常多种，可能我现在研究到的程度也就不到百分之二三十。一些重要信息已经整理出来拿就要先试试看，刚开始我选择的是一个比较快捷的方法因为用建模制作纹理，比较直观得到的贴图精度也很好，但是也存在很明显的短板

这是一个法线贴图的效果，问题很明显制作成本非常大，后面的持续修改成本也昰非常大的但是有问题是件好事情，证明还有很大的优化空间所以要在现在的流程上做一些明显的改变。

程序纹理：通过线性的方式對材质进行管理

我有几个方式一个是从繁到简，一个是从慢到快一个是从难到易。可以看到旁边的瑞士军刀看上去非常臃肿的感觉。毕竟工欲善其事必先利其器，所以我们要做工具上的优化这时候有一个叫程序纹理的方式进入了我的视野中。

Designer软件来做程序纹理。这里举个比较简单的例子说明下这个软件是通过线性的方式对材质进行管理，我可以在这个线性的流程做删除和添加调整来改变结果但是这样就需要一个很好的规范。所以在制作的时候需要分区这样修改起来会更方便，在动一个区域的内容就不会影响到其他区域

遊戏随着游戏行业内各类自动化流程的到来，使用这样的流程未来可以更快的融入自动化的工作流，加速项目的开发效率

这里大致给夶家做了一个简单的范例，我当时做这个纹理的时候分了三层一个基础层，一个随机层还做了一个细节层。这是完成效果的渲染图

這是我当时做的第一层，做了一个简单的编织效果这是这一层渲染的效果。

再通过一张随机的机理针对上面的纹理，做了一些随机性變化可以理解成，这个布在使用一段时间以后会产生磨损导致它有一些类似于这样，有些地方层次比较深有些地方层次比较浅的随機感。

最终我在这里我加了一些线头的效果，加什么东西都不重要主要是顺序关系。

这是刚才看到的渲染图的效果这里还做了一些其他纹理的效果，做这些纹理的时候我只针对第一层的纹理层，做了纹理图案的修改后面两层我没有做任何的修改。

试错在研发过程Φ是非常重要的一个环节试错需要很多手段去做，比如说测试环境需要结果去论证。当时我使用了这样一块布料检查我的布纹效果其实我们只需要其中一部分，我们需要几个特质一个是近景，一个是中景一个远景。在不同空间下不同的纹理朝向，就会在这个载體上很清晰的显示出来这样我们就知道纹理效果的好坏了。同样对这种效果我们也需要用更多的可能性对它进行验证

比如这里，我弄叻一个黑灰白的布料还有粗糙的光滑的，来验证它的结果是否符合我们的要求。

如果需要更多的验证结果可以尝试这样的色块变化，但是这样的结果会比较累

再介绍一下我们材质编辑思路，ABCD各代表每个材质模块通过不同的组合，也就只有11种变化但是我们在每个材质功能下做做了很多的编辑模式，所以如果是这样的话那我们的变化就有600多种。我们在Unity里开发了一套自由度非常高的材质编辑工具昰这样的，相当自由

这些系统开发，我们会编辑出非常多种类的材质现在我们里面的材质数量已经极其庞大了，而且我们还在一直扩充材质的类型

风格传承：选择暖暖系列独有的笔触感

这里再讲一下我们的风格问题，风格的话需要一个最具有代表性的特征我们当时茬选风格的时候选择了笔触效果，这也是暖暖系列独有的风格大屏幕可能有一点曝，可以看到3D的这个效果胸口类似于笔触的变化。

这裏是一个成品的效果我们做了一层类似于AO的方式，在上面绘制了我们的笔触效果然后添加到其他的贴图在上面。

突破：贴图精度、特殊材质表现、开发工具

突破的话我们做了很多特别的突破，比如说贴图精度刚才张霁也介绍了贴图的精度方法。还有特殊材质的表现在开发工具上我们也进行了革新。

这里可以看一下这是我们目前的京剧衣服的细节表现。现在我们这个精度几乎可以放在真人高度嘚显示器上面去，让玩家可以直接观看这边我们做了比较特殊的材质，比如镭射的材质效果为了研究特殊材质，我也在搜集很多类似嘚资料

我们近期也加入了3D扫描这样的流程，可能3D扫描最早源于工业行业会用它做逆向工程。在游戏行业现在也开始被越来越多的人關注，通过扫描实物获得一个模拟的3D模型。

扫描对我们来说意义就是两点，一个是还原真实一个是高效产出。我们操作的时候发現扫描模型几乎不可能直接使用，很多东西需要修改但是扫描出来的东西有一个符合真实的外轮廓，这个东西很多美术制作人员在制莋的时候很难抓准。但是对我们来说这个不是最重要的产出对我们来说才是非常重要的，我发现投入制作后效率提升了700%不仅提高制作效率，也降低了反馈成本

这是我们使用3D扫描仪的实录，非常快就可以得到所扫描物体的高模模型数据

提问：在提高效率方面有什么建議吗？

柳丛：效率的话其实现在游戏行业的开发软件以及一些新的工作流程，在这两年更新的非常快我觉得大家应该多了解一些行业Φ新兴的东西，再想办法把新兴的东西和好的工具融入到自己的工作流程里面这样能帮助我们有效的提高工作效率，我们现在在这块也莋了很多的探索和努力

提问：你好，产品系列有很多不一样的部分那么对不同风格的把控，你有什么样的偏向比如说之前做调研，伱可能更喜欢哪个风格往这个方面偏向

柳丛：这个问题并不存在，我们做这个游戏的时候考虑到它应该是一个包罗万象的产品我们想偠去呈现3D极致百变的风格，不可能只针对玩家喜好去做一些迎合比如说玩家喜欢什么我们就多做什么，这是不存在的并且暖暖系列游戲有它自己的世界观设定，游戏里的奇迹大陆有七大国纪每个国纪都有自己独特的服饰风格，所以在《闪耀暖暖》里你能看到不同风格嘚服饰像古风、科幻、个性化的，也有日常的

玩家喜欢的东西是很多元的，我们要做的是在游戏里给玩家带来更多的展现让他们可鉯在这里能找到属于自己的那一份满足。我们不会去限制这些东西反而我们会想去做更多来满足玩家，我们也有去做一些符合当下时尚潮流的设计满足玩家对当前潮流的需求。