国庆前，有一只“笨笨”的H5出现在很多人的朋友圈里。它就是王者荣耀x敦煌研究院的数字供养人计划第二期。

为什么用“笨”来形容它呢？

因为从工作量上，这个H5的总素材大小有182MB，相当于10个常规的H5大小加在一起，从创意到完成花费了近3个月的时间。我们从五个朝代，40个洞窟中，选出了10幅比较有代表性敦煌壁画，重绘了20张画，10张线稿。制作了2000多个素材。如此复杂庞大的工作量，我们可谓是吃尽苦头，异常困难。

在这样的一个高速数字化时代，很少人会愿意花费这么大的精力去细细打磨这样的一个广告。不得不承认我们这次是有那么几丝笨拙，几分天真。但我们为什么要这样做呢？

选画部分

壁画的未来面貌

再现部分

为何选择“困难”模式？

创作初期我们到达敦煌采集素材观摩了莫高窟与榆林窟。莫高窟的诞生源于敦煌人对信仰的执着，古人们集资费时千百年来供养着她。每一幅洞窟内的壁画都精美绝伦，并且每个时期的风格迥异。制造工艺繁琐，可以称得上是世界上最大的“画廊”。

敦煌壁画的制作流程（从右到左）：

敦煌壁画的制作流程复杂，最底层的是粗草泥层，其次是细泥层、白粉层。最后是古代画家们绘制的地仗，画师们会以红线勾底，做为线稿，在这个基础上上色。

观看细节上千万个人物造型、佛像每个都不一样。

精致到连飘带都如此真实。

还有镀金，立体绘制等多种工艺。

敦煌人对壁画的执着与对细节与美感的高度追求，让我们深受感动。我们希望可以把壁画的精神融合在这只H5里，但这样就无疑会陷入巨大的工作量与壁画研究之中。困难模式就困难模式吧，谁让我们是手艺人呢。

制作部分

制作这样的一个H5，有几个技术上的难点：

难点一是如何既能让用户有丰富的颜色选择，又能使“再现”的壁画怎么都有敦煌感？

根据这个问题我们找了个笨办法来解决：从五个朝代，40个洞窟中，提取了100多个颜色，2000多个色块。专门定制了10块专属的敦煌色板供用户选择。

整体制作流程是这样子的：

10幅壁画 —— 将每幅壁画进行2张重绘 —— 3张为一幅壁画，进行抠图 —— 根据壁画所在的洞窟提取8-12个颜色，制成色板 —— 根据色板进行调色

第一步：重绘

10幅画各有14-30个色块。分好可涂色区域后，为了丰富涂色的视觉感受，让用户填色起来不至于产生原画简单调色的单一感。我们对每张画进行的2版不同颜色、肌理的重绘。

第二步：抠图

如图所示，根据分好的填色区域开始抠图，将每一个色块进行分离。

一幅画有有 3版图， 每版有14-30个区域需要抠出来。 这样算我们每张图需要抠42-90个图形色块。 总共十张图，抠图区域的总量是420-900个色块。

第三步：提取颜色，制造色板

颜色的提取方法：1.优先从壁画里提取 2.然后从壁画所处的洞窟之中提取 3. 其次会从同时期的洞窟中提取，这样就不会产生颜色非常的跳脱，非常的不敦煌这种情况。

第四步：调色

每一个色块的需要有8-12个颜色素材。每张壁画有112-300色块需要单独来调色。

调色方法：改变物体色相，同时改变物体明度，使得点击了什么颜色就会涂上什么颜色。

一个颜色一幅画的调整，在整个纯色的页面下每个物体依旧是可区分的，不会粘连在一起，如图所示。

难点二是如何在敦煌壁画的美术风格下强化用户DIY的感受，保证随机搭配的美感？

解决方法：在调好色的素材上加壁画的泥底、斑点、脱落的机理，仿照氧化后效果。这样画面的质感能得到大幅度的提升，同时也能让用户随意搭配的时候不会显得那么新，颜色不协调。

也有一些特殊的情况，比如人物脸部变色后画面可能会很奇怪，识别度变得很低。也不符合敦煌壁画的感受。我们针对这些特殊的地方，将脸部和头发绑定成一个色块，用户点击这两个区域的任意一个区域都会一起变色。

看了我们研究出来的这些互联网“古法”制作的壁画后，是不是有点震惊。下面让大家欣赏一下H5后台的海量素材吧！（前方高能！）

原画：

线稿：

剥落过程：

涂色过程：

按钮设计：

正是敦煌人对信仰“笨拙”的坚持、“笨拙”的制造、“笨拙”的精益求精，才有敦煌文明的灿烂辉煌。

回看现今这样一个事事求快，事事求效率的时代，不禁觉得我们失去了一些重要的东西，有时候“笨”一点挺好的。让自己慢下来，静下心，观看敦煌的美，欣赏她的美。

欢迎扫码体验或点击“阅读原文”

▼点击查看更多游戏干货内容

出道游戏圈|程序员书单|游戏英语四级

TGDC|游戏数值|MOBA|吃鸡玩家

论道|专家项目经理|王者英雄

《死神来了》|Angelababy|足球游戏