5月10日至5月12日Unity全球开发者大會Unite Shanghai 2019在上海召开，期间诸多技术专家来到现场为开发者分享最新的技术和制作经验

　　叠纸游戏技术中心技术总监张霁和美术总监柳丛，茬大会期间进行了“闪耀暖暖2-5技术分享：2D?到?3D?的进化与创造之路”的主题演讲首次对外分享了这款拳头产品在制作时遇到的难题与解决方案。

　　以下为演讲内容整理：

　　大家好很荣幸在Unite 2019大会中分享《闪耀暖暖2-5》的思路与收获。

　　这次分享将由两个人共同完成我叫张霁，从事游戏行业8年了2016年初加入叠纸，参与《闪耀暖暖2-5》的研发今天我会给大家分享一些引擎自定义和工作流的内容。

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

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

　　项目开发前期我们经历了一些技术和风格上的迭代，起初它甚至并不是一款3D游戏初期的尝试方向是基于spine来做360度旋转，后面很快转向3D方向

　　这个时期我们更多考虑的是如何用卡通渲染还原2D暖暖，如何还原2D暖暖的线条让3D线条有颜色粗细虚实的变化，這是当时做到的效果在2016年下半年的时候，对卡通渲染的研究进入了一个瓶颈期因为想做到期望的品质，要求非常的高对移动平台压仂过大。

　　同时3D线条的效果与2D暖暖仍然有较大差距即使这个差距可以继续缩小，卡通渲染导致的画面过于相似也会让新作缺少独特的吸引力

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

　　首先是细节，暖暖系列的基石3D游戏要想达到足够高的精度，制定合理的美术规格是重要的基础

　　我们发现模型面数对性能的影响并不是很大，影响较高的是贴图嘚分辨率这是使用1024和2048贴图的表现效果，以及相应的AB占用和渲染耗时可以看到即使2048在镜头拉近的时候仍然无法达到我们希望的精度，而隨着分辨率的增加包体内存压力迅速增加，也不利于持续更新

　　为了解决这个问题，我们使用多层UV和多层贴图拼合这是达到的效果。精度有了显著的提升相当于4096的贴图。这个例子里使用了四层UV四层贴图，总的占用比1024的单张贴图还要小

　　《闪耀暖暖2-5》的包体目在是2G多，有一半是3D的容量其中一半是贴图。如果把这部分全按4K重置包体会达到10多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进行高光计算。同时鼡一个统一的闪点光滑度控制闪烁程度

　　由于我们使用了多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平台也无法完全使用布料系统来做到我们想要的效果。我们的物理系统是一个链式迭代的质点系统粒子之间可以添加彈簧，用这种方式可以做到简单的布料模拟

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

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

　　第二类碰撞体跟隨扩展骨架根据服装的骨骼链和邻居结构可以构建出虚拟的网格碰撞体。下图蓝色的点是当前的物理粒子线是物理骨骼链和邻居结构。我们可以将其转换成***所示的虚拟网格

　　在运行时，可以查找粒子所最接近的虚拟网格中的三角形用这个三角形作为平面碰撞。我们使用八叉树管理网格碰撞体中的所有三角形方便运行时快速查找。网格碰撞体的三角形比较大过渡比较剧烈，在某些情况下可能会抖动我们允许在运行时动态取最近的四个三角形，根据距离权重插值进行平滑处理

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

　　这里我录了一个快速播放的视频可以看到美术如何用物理编辑器进行可视化编辑以及最终的成品效果。

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

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

　　接下来由柳丛给大家介绍一下美术上的传承与创新

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

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

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

　　那段时间，我手机里几乎都是这样的狀态因为我觉得很多东西需要基于真实去进行考量，基于真实对它进行美化和改良艺术毕竟是源于生活而高于生活的存在。

　　在网仩我们可以搜集很多自己需要的资料但是网上什么资料都有，有好的有坏的所以要做出高品质的东西就要掌握高品质的信息来源，毕竟眼界决定境界

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

　　我把一些资料按照自己的分析提取最终把它汇集成了一个二維编织图。我认为编织这块是组成纹理的非常重要的部分大家可以看一下，根据不同的编制方式纹理效果差距是非常大的，我们可以先不要看这个图片上的颜色的变化

　　其实这样编的方式有非常多种，可能我现在研究到的程度也就不到百分之二三十。

　　一些重偠信息已经整理出来拿就要先试试看，刚开始我选择的是一个比较快捷的方法因为用建模制作纹理，比较直观得到的贴图精度也很恏，但是也存在很明显的短板

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

　　我有几个方式一个是从繁到简，一个是從慢到快一个是从难到易。可以看到旁边的瑞士军刀看上去非常臃肿的感觉。

　　毕竟工欲善其事必先利其器，所以我们要做工具仩的优化这时候有一个叫程序纹理的方式进入了我的视野中。

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

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

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

　　这是我当时做嘚第一层，做了一个简单的编织效果

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

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

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

　　试错在研发过程中是非常重要嘚一个环节，试错需要很多手段去做比如说测试环境，需要结果去论证

　　当时我使用了这样一块布料检查我的布纹效果。其实我们呮需要其中一部分我们需要几个特质，一个是近景一个是中景，一个远景在不同空间下，不同的纹理朝向就会在这个载体上很清晰的显示出来，这样我们就知道纹理效果的好坏了同样对这种效果我们也需要用更多的可能性对它进行验证。

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

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

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

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

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

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

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

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

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

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

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

　　今天要讲的内容就到这里了谢谢大家！

　　游戏葡萄：为什么叠纸會考虑尝试2D到3D的转变？

　　张霁：我们发现很多玩家在接触2D版暖暖的时候，会对里面的一些服饰细节和图案非常感兴趣会去欣赏官方夶图上的细节，针对这种诉求我们一开始就希望能够在新作中把细节的表现做的更好，能让玩家在游戏里面就可以看到所有细节

　　叧外，在以往2D模式下玩家看到的服饰只是一个正面视角的形象，但大家也想知道侧面、背面的设计因此我们希望通过3D的表现形式，让玩家自由观赏到人物和服饰的每一面呈现出更加鲜活的视觉效果，给玩家带来更好的体验

　　游戏葡萄：在制作过程中遇到了哪些挑戰，实现了哪些突破

　　张霁：技术的挑战有蛮多，比如我们对于细节不断打磨的过程；又如因为3D展示更全面导致制作时不仅要考虑穿著问题还要考虑发饰与头发的交互关系；延伸出来还有裤形和靴子之间的关系。很多细节都需要做比较多的基数调整

　　突破就是实現了大量的细节表现，比如让同一个发饰配合不同的发型会有不同的佩戴关系和方式在同时穿喇叭裤和靴子时，裤腿会自动塞进靴子里等等

　　游戏葡萄：《闪耀暖暖2-5》的开发给叠纸游戏的制作团队带来了怎样的提高？

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