App Store
Steam关于《死亡细胞》美术工作流的初步探索
死亡细胞（Dead Cells）
?
基础思路：
在 maya 中使用 aiutility 材质渲染“像素级”color、normal 序列切片。
在 Photoshop 中使用“将文件载入堆栈”使序列按层级排布。
以 psb 格式保存在 unity 中，修改 secondary textures 与 pivot。
1、分析死亡细胞的工作流
笔者在 18 年接触《死亡细胞》时就发现了其美术的特点：
虽然是像素画，但是动作的流程程度不像是逐帧画出来的，更像是三渲二。
不同的光线会对精灵产生不同的着色影响，如果是法线，不敢相信是手工画的法线贴图。
有些怪物之间只是颜色，护甲有无的区分，如果是颜色直接替换到还能理解，有些怪物就比另一个多了一些配件道具，如果还是用逐帧重画一遍感觉不太合理。
但无奈当时还是个小白没有足够的知识储备去解决这个问题，直到最近想起这事便进行初步探索。
使用扒皮工具，把《死亡细胞》的源素材提取出，动画序列的排列杂乱错落，不像是按像素间距直接排列，而是使用 psb 格式，以图层来保存序列。
颜色精灵上的只保留了固有色，并没有添加阴影，而每张颜色精灵都使用一张法线精灵，这个使用 sprite editor 赋予贴图到也可以。
大致按这个思路试了试，得到了一个最终的尝试，只使用 sprite 序列，每一张序列对应一张法线信息。
下面分享操作过程。
2、使用 maya 导出序列
2.1 像素级渲染
将画面渲染为像素的风格，需要将抗锯齿关闭，这里笔者使用阿诺德渲染器，则在 arnold renderer 中将 filter type 设置为 closest 模式，并且将公用中将图形储存设置为 32*32（这里根据项目需求，但建议使用 2 的幂次方）。
而使用 maya hardware 渲染的话，则直接在抗锯齿中关闭所有选项，如果使用 maya software 则在抗锯齿质量中，将边缘抗锯齿调整到低质量。
2.2 设置固有色与法线
同样使用阿诺德渲染模式，在 hypershade 中，以 arnold→aiutility 材质模板建立两个新的材质球：
① 一个用于渲染固有色，将其 shader mode 改为 flat，color mode 改为 color，color 则节点链接 basecolor 贴图。
② 一个用于渲染法线，将其 shader mode 改为 flat，colormode 改为 normal，其他不需要改变。
2.3 渲染序列
这部分直接使用传统流程：在渲染设置中设置开始帧与结束帧，再使用 maya 的渲染序列功能，导出 tiff 格式的序列图像（这里使用 png 会不保留 alpha 通道，导出 tiff 格式并不影响后续进入 unity）。
3、使用 Photoshop 载入序列
进入 Photoshop 中，在“文件”→“脚本”→“将文件载入堆栈”，选择序列文件，最后点击确定即可，color 与 normal 各载入一次。
这样便可准备进入 unity，也可以先从图层建立序列帧，在 ps 中预览动画有无问题。
4、进入 unity 及后置修改
4.1 导入 unity
在 Photoshop 中，储存为 psb 大型文件格式，直接导入 unity 中。
Ps 导出文件时，命名后缀可以参考：法线精灵（XXX_NormalMap.psb）颜色精灵（XXX_BaseColor.psb）。
4.2 后置修改
4.2.1. 像素级项目通常设置：（insoecrtor 属性）
① Filterr 设置为 Pixel;
② Compression 设置为 None。
4.2.2. 切片设置：（这一步针对于 XXX_BaseColor.psb 操作，从 sprite editor 按钮进入）
① 在 Slice 中，将 pivot 设置为 bottom（这里根据项目需求，pivot 为锚点的统一，通常在角色动画中会将锚点放在底部），mathod 设置为 smart（这一步很重要，是个神坑）。
② spriteEditor → secondart textures，在小窗口中设置，name →_NormalMap，Texture 选择导进来的法线贴图文件。
4.2.3. 灯光设置
在 unity 中，2D 的灯光渲染通常使用 URP（universal RP），在 Light 2D 设置中需要将 Use Normal Map 打开，这样即算完成。
5、总结
在《死亡细胞》美术总监的开发演讲中，提到他们制作了一个小工具来进行这一套工作流的进行，但是笔者推测可能是一个将整个流程一步到位的工具（省去中间导入到堆栈步骤），或者是统一处理像素点，批次修改颜色的辅助工具（这个可以从主角在 3D 是蓝裤子，在 2D 中是黄裤子中推断，有可能是类似 ps 修改颜色的工具）。
或者与 emission 通道有关，能够统一处理切片中发光的色彩信息。
另外，传统的 2D 像素画在美术动画上的效率太低，《猫头鹰男孩》是 2D 像素美术的一种机制，但即使游玩流程不长，其开发任然用了 10 年，可见传统像素动画的耗时之久，所以《死亡细胞》为我们提供了一种新的思路，利用 3D 转 2D 来进行高效的动画工作。
使用屏幕后处理来统一像素风格也是一种新的思路。
总之，传统工艺在工业化面前必定会式微，游戏研发的工业化趋向必须要求我们不断探索更加高效的工作流，正如影视行业，迪士尼也不会因为手绘动画更有匠心与情怀而放弃 3D 转型。
参考文献:
Art Design Deep Dive: Using a 3D pipeline for 2D animation in Dead Cells
https://www.gamasutra.com/view/news/313026/Art_Design_Deep_Dive_Using_a_3D_pipeline_for_2D_animation_in_Dead_Cells.php
Dead Cells 3D to 2D Animation crunching
https://www.reddit.com/r/howdidtheycodeit/comments/dwst09/dead_cells_3d_to_2d_animation_crunching/
作者：IWSE
来源：INDIENOVA
地址：https://indienova.com/indie-game-development/discovering-art-of-dead-cells/
在 maya 中使用 aiutility 材质渲染“像素级”color、normal 序列切片。
在 Photoshop 中使用“将文件载入堆栈”使序列按层级排布。
以 psb 格式保存在 unity 中，修改 secondary textures 与 pivot。
1、分析死亡细胞的工作流
笔者在 18 年接触《死亡细胞》时就发现了其美术的特点：
虽然是像素画，但是动作的流程程度不像是逐帧画出来的，更像是三渲二。
不同的光线会对精灵产生不同的着色影响，如果是法线，不敢相信是手工画的法线贴图。
有些怪物之间只是颜色，护甲有无的区分，如果是颜色直接替换到还能理解，有些怪物就比另一个多了一些配件道具，如果还是用逐帧重画一遍感觉不太合理。
但无奈当时还是个小白没有足够的知识储备去解决这个问题，直到最近想起这事便进行初步探索。
使用扒皮工具，把《死亡细胞》的源素材提取出，动画序列的排列杂乱错落，不像是按像素间距直接排列，而是使用 psb 格式，以图层来保存序列。
颜色精灵上的只保留了固有色，并没有添加阴影，而每张颜色精灵都使用一张法线精灵，这个使用 sprite editor 赋予贴图到也可以。
大致按这个思路试了试，得到了一个最终的尝试，只使用 sprite 序列，每一张序列对应一张法线信息。
下面分享操作过程。
2、使用 maya 导出序列
2.1 像素级渲染
将画面渲染为像素的风格，需要将抗锯齿关闭，这里笔者使用阿诺德渲染器，则在 arnold renderer 中将 filter type 设置为 closest 模式，并且将公用中将图形储存设置为 32*32（这里根据项目需求，但建议使用 2 的幂次方）。
而使用 maya hardware 渲染的话，则直接在抗锯齿中关闭所有选项，如果使用 maya software 则在抗锯齿质量中，将边缘抗锯齿调整到低质量。
2.2 设置固有色与法线
同样使用阿诺德渲染模式，在 hypershade 中，以 arnold→aiutility 材质模板建立两个新的材质球：
① 一个用于渲染固有色，将其 shader mode 改为 flat，color mode 改为 color，color 则节点链接 basecolor 贴图。
② 一个用于渲染法线，将其 shader mode 改为 flat，colormode 改为 normal，其他不需要改变。
2.3 渲染序列
这部分直接使用传统流程：在渲染设置中设置开始帧与结束帧，再使用 maya 的渲染序列功能，导出 tiff 格式的序列图像（这里使用 png 会不保留 alpha 通道，导出 tiff 格式并不影响后续进入 unity）。
3、使用 Photoshop 载入序列
进入 Photoshop 中，在“文件”→“脚本”→“将文件载入堆栈”，选择序列文件，最后点击确定即可，color 与 normal 各载入一次。
这样便可准备进入 unity，也可以先从图层建立序列帧，在 ps 中预览动画有无问题。
4、进入 unity 及后置修改
4.1 导入 unity
在 Photoshop 中，储存为 psb 大型文件格式，直接导入 unity 中。
Ps 导出文件时，命名后缀可以参考：法线精灵（XXX_NormalMap.psb）颜色精灵（XXX_BaseColor.psb）。
4.2 后置修改
4.2.1. 像素级项目通常设置：（insoecrtor 属性）
① Filterr 设置为 Pixel;
② Compression 设置为 None。
4.2.2. 切片设置：（这一步针对于 XXX_BaseColor.psb 操作，从 sprite editor 按钮进入）
① 在 Slice 中，将 pivot 设置为 bottom（这里根据项目需求，pivot 为锚点的统一，通常在角色动画中会将锚点放在底部），mathod 设置为 smart（这一步很重要，是个神坑）。
② spriteEditor → secondart textures，在小窗口中设置，name →_NormalMap，Texture 选择导进来的法线贴图文件。
4.2.3. 灯光设置
在 unity 中，2D 的灯光渲染通常使用 URP（universal RP），在 Light 2D 设置中需要将 Use Normal Map 打开，这样即算完成。
5、总结
在《死亡细胞》美术总监的开发演讲中，提到他们制作了一个小工具来进行这一套工作流的进行，但是笔者推测可能是一个将整个流程一步到位的工具（省去中间导入到堆栈步骤），或者是统一处理像素点，批次修改颜色的辅助工具（这个可以从主角在 3D 是蓝裤子，在 2D 中是黄裤子中推断，有可能是类似 ps 修改颜色的工具）。
或者与 emission 通道有关，能够统一处理切片中发光的色彩信息。
另外，传统的 2D 像素画在美术动画上的效率太低，《猫头鹰男孩》是 2D 像素美术的一种机制，但即使游玩流程不长，其开发任然用了 10 年，可见传统像素动画的耗时之久，所以《死亡细胞》为我们提供了一种新的思路，利用 3D 转 2D 来进行高效的动画工作。
使用屏幕后处理来统一像素风格也是一种新的思路。
总之，传统工艺在工业化面前必定会式微，游戏研发的工业化趋向必须要求我们不断探索更加高效的工作流，正如影视行业，迪士尼也不会因为手绘动画更有匠心与情怀而放弃 3D 转型。
参考文献:
Art Design Deep Dive: Using a 3D pipeline for 2D animation in Dead Cells
https://www.gamasutra.com/view/news/313026/Art_Design_Deep_Dive_Using_a_3D_pipeline_for_2D_animation_in_Dead_Cells.php
Dead Cells 3D to 2D Animation crunching
https://www.reddit.com/r/howdidtheycodeit/comments/dwst09/dead_cells_3d_to_2d_animation_crunching/
作者：IWSE
来源：INDIENOVA
地址：https://indienova.com/indie-game-development/discovering-art-of-dead-cells/
评论
登录 后参与讨论
暂无评论，来抢沙发
闽公网安备 35020302034348号