Shining Nikki: Creating and Scanning Elegant Fabrics for China’s Most Popular Mobile Dress-Up Game

Today we interview Vasiliy, from the Paper Games team on their game Shining Nikki, who brings 3D to mobile dress-up games.

今天我们采访了柳丛,负责叠纸游戏的闪耀暖暖3D装扮手机游戏。11月15日晚19:00点,请收看中国区直播的第六期

介绍 

Introduction 

大家好,我叫柳丛Vasiliy (微信: daboluo_o),目前在叠纸游戏技术中心担任美术总监,并在《闪耀暖暖》的开发阶段负责游戏的美术效果研发,就在8月6号我们迎来简体中文版本的上线,叠纸游戏以往开发的都是2D类游戏,这也是首次使用3D技术制作装扮游戏。 

Hello everyone! I’m Liu Cong Vasiliy. I am the art director of Paper Games. Back in August, we launched the Simplified Chinese version of SHINING NIKKI. Paper Games has been developing 2D games only; this is the first time we use 3D technology to make a dress-up game. 

《闪耀暖暖》SHINING NIKKI目前受到玩家的高度期待,上线后也拿到了IOS免费榜排名第一,畅销榜排名第四的好成绩,游戏角色服装材质与设计部分,已经达到中国3D装扮手游的顶级品质,请问Substance是如何嵌入到游戏的开发流程中呢? 

Shining Nikki reached first place in the IOS free games ranking and fourth on the best-selling list in China. The quality of cloth materials and the character design is the top quality of China’s 3D dress-up games.

材质效果是《闪耀暖暖》中非常重要的一部分,可以说为了达到今天的效果,我们投入非常多的时间,以使其效果更细致且美观。 

Materials are the most important part of Shining Nikki. Indeed, we have put a lot of effort into making this game beautiful through rich details. 

我们的目标是要让更多的玩家可以享受到这样的视觉盛宴,同时也想证明国内游戏也可以实现这样画面品质。 

We seek to provide the same visual effects for domestic plays as others across other parts of the world; we want to show that we can do that domestically with mobile games.

开发细节: 

Development details: 

在开发《闪耀暖暖》材质模块的时候,为了达到超细节品质,我对面料做了深入研究。最为重要的环节便是编织,不同的织法出现的纹理都是不一样的,纹理结合材质可以做出无数种变化,让玩家能够充分享受到细节带来的满足感。下面几组图是在我之前的研究中搜集的图片资料。 

When creating materials for Shining Nikki, I did a deep study of fabrics in order to achieve a high-level quality. The most important difference between fabrics is the weave. Through texture combination, players can make numerous changes and enjoy the small details.

I decided to use Substance Designer to produce textures in order to achieve better results and be more efficient and precise in my workflow.

为了得到非常精准的Normal法线凹凸效果,我使用最为直接的制作方式,通过3D建模来模拟真实的编织方式。下图是早期制作的几组编织模型。 

To get an accurate Normal bump, I prefer the most direct way: simulating real knitting with 3D modeling. The following are sets of braiding models we made earlier. 

3D建模纹理的制作流程有利有弊,虽然它的品质很高,但其制作成本也比较高。最高的部分其实是修改成本,我制作了非常多的纹理,当数量达到一个库的级别后,如果在这个基础上再做修改,成本是不可预想的,而且模型纹理的整理和规范很难做得科学些。 

The procedure for 3D modeling texture has pros and cons. The quality that the procedure produces is high, but it costs a lot. However, the costs of revising the texture are higher than anything else. I have made a great many textures. When revision happens to a library of textures, it would be hard to imagine how expensive it would be. Still, it is hard to standardize and regulate model textures. 

虽然我担心的问题并没有发生,但是为了追求更完美的效果和更高效且科学的工作流程,我决定尝试使用Substance Designer来制作纹理贴图。为了让团队能够熟练使用Substance Designer,我们投入了很大的成本,但这一切还是很值得的,所以才有了我们第一部宣传片中的超高品质的材质效果,但这并不是我们的最终品质,目前还在不断的突破自己。 

To make the pipeline more satisfying, efficient and reasonable, I decided to use Substance Designer for texture creation. We’ve invested a lot of time and effort into Substance Designer. But it is worthwhile, as it has presented us with the super effects seen in the first demo reel video. We are not content with that, as we wish to achieve even better results.

让我决定尝试使用Substance Designer来制作纹理图的4个理由!

1. 首先当然是品质,Substance Designer制作的纹理和模型制作的纹理结构非常近似,但是模型因为面数受限,完成不了更微小的细节,那么Substance Designer是可以完全满足我们对材质的这一需求,帮助我们达到更细更完美的细节。

2. 其次就是效率,从制作效率和修改效率上来看,Substance Designer的制作流都是非常高效的,而且最近Substance也推出了自动化流程,很希望在未来的项目中能运用到这项提高效率的流程。

3. 文件易管理,易传承。举个例子,文件的二次修改不是由原制作者进行,传统的建模难管理,而且出错率高,但是Substance Designer因为是节点式制作流程,只要对软件熟悉,任何人都是很容易修改的。

4. 以上3点是对于开发项目很重要部分,还一点是因为我个人原因,因为我个人比较喜欢把业内先进和优秀的开发流程及软件用于正在开发项目,因为我们不光需要跑的快也需要跑得稳。但是自身也需要更多的磨练才可以跑得更快,因此我们现在还有很多无法用Substance Designer实现的纹理,依然还在用传统做高模的方式在制作,还需加倍努力。

There are four reasons for me to make textures with Substance Designer.

First of all, quality. Textures made in Substance Designer are very similar to the textures of the model, but the model is limited in the number of polygons and can’t handle the finer details. Substance Designer can completely achieve the material requirements, helping us achieve finer details.

Secondly, efficiency. From production to variation, the workflow of Substance Designer is very efficient.

Third, material management and file sharing. For example, if files are not revised by their original creators, it is difficult to manage these revisions in traditional modeling, which leads to more issues. But by using Substance Designer, as it is a node-based procedure, anyone with a good knowledge of the software may find it easy to make corrections down the road.

The above three parts are vital for developing a project. But also because I personally prefer to use the industry’s most advanced development processes and software. 

一个简单编织纹理的步骤: 

A simple knitting texture breakdown: 

在制作过程中需要通过布料模型验证效果,该模型需要有不同的纹理方向,纵深程度,以此确认纹理中各个距离的效果。 

In the process, the following cloth model is used to test how texture direction and depth will look like amongst different materials.

Far, mid and close range.

在这个过程中还需要通过调整Roughness和Metallic两个值以确认不同质感下的纹理效果。 

In addition, the values of Roughness and Metallic should be changed to reflect texture effects. 

为了丰富变化,制作过程中会增加一些随机效果。 

Random effects are necessary to add variation. 

随机磨损: 

Random wear. 

随机线头: 

Random thrum.

Base layer + Random wear + Random thrum.  

区分材质 

Distinguishing different materials.

下面是区分麻纱与细纱的部分,主要改变固有色纹理层,这样可以做出更精确的材质效果。但最重要的还是需要了解如何拆分材质,懂得拆分才会懂得组合,这样便能使用Substance Designer制作出更准确的材质。 

Here is how to distinguish cambric from yarn: If the intrinsic texture color is changed, we can get a more vivid material. What matters most is to know how to break down materials, to understand the different components. In this way, we can use Substance Designer to make more accurate materials. 

Substance不仅能制作出高品质的纹理,它庞大的材质库还可以提供很多类型的材质纹理以供下载使用。根据项目的规格,当然还是有些纹理需要花点时间进行优化和处理。 

On the one hand, we can employ Substance Designer to produce high-quality textures. On the other hand, numerous types of materials and textures are available in the Substance Source material library, which sometimes need to be tweaked.

我们再谈一下最新引入的Substance流程: 

Let me talk about the new Substance pipeline that we integrated recently.

我们使用拍照得到材质原始素材,再通过Substance制作处理PBR材质。这里以蕾丝为例,因为它算是一种比较难以处理的材质。在《闪耀暖暖》中,由于版权限制,我们不可以使用网路上的随机图片,并且项目对款式以及精度也都有非常严格的要求。我们借助于Substance Designer 和Substance Alchemist对蕾丝照片进行了素材的快速处理。

今天的范例演示,我选了一款二方连续的蕾丝,然后在Substance Designer 中完成照片的处理, Substance Alchemist的工作流也基本类似。 

We are taking photos to get the original textures first, then we create a PBR material thanks to Substance. We are taking lace as an example since it’s quite difficult to handle. Thanks to Substance Designer and Substance Alchemist, we can quickly process the PBR material from a photo. 

In today’s demonstration, I will finish the process of the lace in Substance Designer. the workflow in Substance Alchemist is basically similar.  

我们首先利用单反微距镜头拍摄相片,以得到一张完整细节的照片素材。通过调整图片的对比度优化相片中多余的细节(使用灯箱拍照的话就不用这样了)。 

We first take photos with a single-lens reflex camera to capture the reference with full details. We optimize the extra details of the photo by adjusting the contrast (you don’t have to do this if you build a lightbox).

如下图: 

As below: 

将照片导入Substance Designer ,首先利用Crop节点对素材进行截切。Crop有两个节点,灰度的和彩色的。 

Drag the photo into Substance Designer, first cut the reference with the Crop node, choose grayscale or color. 

因为此次的案例是纯黑的素材,所以选用Crop Grayscale来进行演示,通过调整图片边界的位置以完成接缝修复,效果如下: 

In this case, the lace is pure black, I just chose Crop Grayscale to proceed, by adjusting the position of the picture boundary to fix the tiling.

调整好之后就可以使用Bevel节点制作法线贴图,通过节点中的Distance,Smoothing,Normal Intensity参数来调整法线的起伏。 

Then I can use the Bevel node to get my Normal, through Distance, Smoothing, Normal Intensity parameters to adjust the Normal’s bump information. 

下图是通过Bevel节点得到的第一层法线,但是我们可以得到一个细节更为丰富的法线效果。 

This is the first Normal we got from the Bevel node. But we can get a better-detailed Normal. 

为了丰富蕾丝的凹凸效果,我们会再次使用bevel节点,得到凹凸起伏更加丰富的法线,与第一层进行叠加,得出效果如下: 

In order to enrich the bump effect of the lace, we used the Bevel node again, to achieve more details of bumps and undulations. After this, we blend it with the first Normal we got before.

为了进一步的优化细节,叠加一层织物的纹理法线,这样我们就可以得到更丰富的细节变化,如下图: 

To push further, we blend one more layer with a fabric texture, so that we could get richer detail variations as below: 

下面是完整的节点过程: 

This is the whole node process.

最终效果: 

The final effect.

此外,Substance Designer还提供了多种处理扫描纹理的节点,可用于多角度光照扫描和照片素材制作PBR材质,我们可以根据不同的纹理需求选择合适的节点流程,这套方法非常实用,而且我们目前的项目也正在使用它。 

In addition, Substance Designer also provides a series of nodes to process scanned textures to PBR materials, which can be used for multi-angle light scanning or just single photos. We can select the correct nodes pipeline according to the different texture requirements. This method is very practical, and we also used it for the current project. 

仅通过使用Bitmap to Material light节点,便可以轻易将拍下来的素材转化为PBR可用的贴图,如下图: 

Through the Bitmap to Material light node, we can easily convert the photo into PBR materials: 

处理照片素材的接缝问题也是件很痛苦的事情,但可以通过使用Make It Tile Photo节点自动处理接缝,而且节点中的参数还可以基于需求有助于优化,然后通过调整接缝区域Mask的扭曲和宽度,再加以模糊便于优化接缝的融合效果。 

It’s a painful thing to handle the photo seams, but we can process seams automatically with Make it Tile Photo Nodes, and the parameters can also help better optimize the seams according to the requirements, then the combined effect can be optimized by adjusting the distortion and width of the seam area for blurring the integrate effect. 

备注:目前我们也在尝试多角度光照扫描,下面是Substance的官方文档,大家如果有兴趣可以研究一下。现在有了Substance Alchemist炼金术,处理扫描数据变得更加直观简单了。 

Note: we are also trying multi-angle light scanning, this is the official tutorial if you are interested to study it. Now with Substance Alchemist, processing scan data becomes even more intuitive and simple. 

目前我们最大的挑战是中国风的刺绣,刺绣的排线太考究,我们现在只能使用传统的方式来制作,对于Substance Designer还没有特别好的思路。 

At present, our biggest challenge is the Chinese style embroidery, as the line of embroidery is so exquisite that we can’t just create it in a traditional way. We hope new updates will come by Substance Designer dev team.  

Substance对于我们这些专注于次世代制作的人而言应该是必须掌握的工具。 

Substance is a must for us who are working on next-generation productions. 

我最喜欢Substance Designer节点式的工作方式,因为我也算是国内第一批使用虚幻3开发游戏的人员,就像虚幻3的材质蓝图一样,Substance Designer的节点方式让我觉得,可以不限制想法,可以尽情的发挥想象力去创造一切不可能。 

I like the function node most in Substance Designer. As the first producers using Unreal 3 to develop games, nodes in Substance Designer enable me to feel that my imagination can go beyond any limits to create what seems impossible. 

我觉得Substance是一款可以深入流程的开发软件,遗憾的是国内的游戏开发者只是把Substance看成是画场景角色材质贴图的软件,将其用于单一的开发环节,并没有把Substance运用到极致。 

I believe that Substance is a sort of development tool that can be pushed further. It’s a pity that Substance is only used to produce maps for scenes, characters, and materials for now in China. It hasn’t affected the pipeline enough yet. We should try to push even further. 

程序纹理易于管理,制作效率极高,高效率自然导致大家就更愿意去创造更复杂更完美的资源。它带动了整体行业的成长。 

Procedure material is easy to manage and efficient. With higher efficiency, the method will be popular among us to create more complex and perfect resources, which has boosted the growth of the industry。 

之前Substance每次发布一些大的更新,就有人会说,很多美术师要下岗,这个当然是不可能的,程序美术的演变带来的是,制作效率更高以及制作效果更完善,那么美术师便是最大的受益者,因为这样可以有更多的时间专注到艺术层面的探索,大家就会有更高的品质追求。 

The evolution of procedural art has led to more efficient productions and better results, so artists are the biggest beneficiaries because they can have more time to focus on artistic exploration, and users will benefit from higher quality productions.

我们希望有机会在新的项目中尝试Substance的全流程化,自动化功能。 

We would love to try the Substance Automation Toolkit in our next project.