王者荣耀爆款H5有何过人之处？

敦煌壁画是我们民族引以为傲的瑰宝

但是它的绚丽正在一点点消失...

腾讯联合王者荣耀和敦煌研究院

最近发起了一个数字供养人计划

希望有更多人了解和热爱敦煌

为壁画的保护尽一份自己的力量

关于这个刷屏级别的H5，小堂妹上周已经跟大家分享过上篇，今天我们接着看看王者荣耀团队是如何打造出这个美轮美奂的作品。

多媒体交互体验&动画设计

这个H5的素材量非常庞大，模块较多，信息量也很大，总体的体验时长大概在3分钟左右，对于h5来说3分钟是一个很长的时间，那我们如何在h5的形式上让用户静静地完成这3分钟的体验呢？

最终的交互体验流程：

Loading —— 开场视频 —— 选择壁画 —— loading2 —— 壁画消逝视频（转变为线稿） ——      涂色新手引导 —— 涂色（重点部分）—— 保护敦煌文案引导 —— 落版（保存原图）—— 点击捐款

一、开场视频

开场视频是第一个展现重要信息的画面，需要吸引眼球的视觉冲击力。动画表现上，在主体内容破碎掉落的同时，文字也做了先后出场，剥落的效果，引导阅读，整体节奏比较缓慢而优美。

二、选择壁画

交互上，除了两边的按钮之外，中间的画面也是可以左右滑动选择壁画，满足不同用户的操作习惯。

三、loading

因为素材量大，这里需要一个loading加载后面的内容，小飞天不停的变换颜色，为后面的涂色买下了伏笔。

四、壁画剥落

这里我们用了25s的时长，展示了一幅完整壁画剥落的过程，动画效果也是缓慢而朴实，没有过多华丽的变现手法，这种朴实的消逝更能打动观众，当你看到自己选中的那幅壁画，慢慢的剥落，是否感到一丝悲凉？

五、涂色

涂色是整个h5最主要的互动环节，我们希望这里的填色体验能够最大程度的体现敦煌壁画的美，能带给用户“成就感”。

区别于普通的填色游戏，填选的区域颜色机理都是独特的，填色的过程加入色块晕染的效果，极大了提升了填色的美感和趣味。

“随机颜色”是一个是分有趣的功能，你会惊讶的发现随机搭配的出来颜色都是非常和谐好看的，每一种搭配都不失敦煌感，这也是整个H5里最花时间最难的部分，也是最惊赞的地方。

前端技术

难点一：

整个项目有50个flash源文件、169张2048*2048像素的雪碧图，11个mp4视频，33个mp3音频，这给素材管理和维护带来不小的挑战。

解决方案：

对素材进行按需分段加载，根据用户的选择，分段加载特定的内容，减少用户加载的数据总量，缩短加载时的等待时间。

难点二：

部分flash源文件体积大，图层和动画元件多，导致flash软件无法正确导出数据文件。

解决方案：

1.通过将原始flash文件按交互功能和图层关系拆分为多个小的flash文件，保证每个拆分后的flash文件的图层和元件总数在可控范围内，然后分别导出动画数据文件。

再在H5中以程序的方式重新组合这些数据并还原回原始flash的样子。这样既提高了动画素材的导出速度，也解决了导出素材时软件报错的问题。

2.通过jsfl命令批量修改并缩短flash库中的素材名称，减小动画逻辑js文件的大小，提高程序解析效率。

难点三：

项目的总体流程长，交互细节多。涂色环节最多可以对29个区域上色，每个区域可以涂10到12种不同的颜色。

解决方案：

通过框架来自动管理每个界面、每个交互UI的渲染和事件侦听，避免人为疏忽导致内存泄露。

难点四：

涂色时的水墨晕开效果对手机性能要求较高。

解决方案：

1.IOS机型对水墨晕开动画使用透明通道滤镜来模拟晕开效果。

2.对安卓机型使用了局部位图缓存来解决同屏元件数量过多而导致卡顿的问题。仅在用户涂了某个颜色后对用户当前交互的内容进行局部位图缓存，避免了使用全局位图缓存时带来的画面停顿现象。

此外通过降低安卓机型的DPI来进一步避免卡顿和黑屏的发生。

难点五：

项目中有点击、滑动、拖动、多点触摸放大缩小、长按保存等交互方式，容易造成不同交互间的热区冲突。

解决方案：

通过为不同的交互行为添加不同的触摸锁和交互锁，解决同一个交互热区同时存在多种不同交互行为时导致的交互错乱的问题。

难点六：

导航按钮和logo容易因屏幕自适应被裁剪。

解决方案：

每次在用户翻转屏幕导致发生屏幕自适应行为后，重新计算屏幕上用户实际能看到的内容区域的左上、右上、左下、右下4个点的坐标，然后对导航按钮和logo进行位置修正，避免它们被裁剪导致显示不全。

难点七：

用户输入名字时可能会有敏感词的公关风险，并且要求使用自定义字体。

解决方案：

1.将用户输入的字符发送给敏感词服务器进行过滤，识别到敏感词则替换为预设的“花”图案。

2.将自定义字体库存放在服务器上，这样仅从服务器拉取用户名字的几个字符，避免了在前端加载整个庞大的字体库文件。

声音与音效

声音设计在很多H5里面时常被忽略，要么觉得可有可无，要么留到最后才草率加上。

而在这个H5中，声音设计是占了非常大的比重，极大的增强H5的美感与体验。声音设计上的要求不仅仅只是满足一个H5，而是往app、一个完整的互动体验去做设计。

每一个按钮、互动点都有它独特并且非常符合其调性的音效。

在创作初期我们与音乐师、音效师沟通的提供了几个关键点：

真实感：我们希望营造出这样的一种作画氛围。一个风和日丽的下午，用户身处于莫高窟的某一个洞窟里。风吹过，两边的杨树林发出沙沙的声音。莫高窟九层楼上铜铃被风吹动，发出悠悠的铃铛声。开场动画部分，纸张粉碎的音效希望是类似于墙壁石头剥落的音效。

悲凉感、孤独感：面对这样一个终将失去的艺术品，我们希望有一种淡淡的忧伤弥漫在整个音乐的情绪中。敦煌人千百年来对信仰的执着与虔诚，这样的坚持难以被世人所理解，充满了孤独。笛声的音色比较适合这样的情绪表现。

仪式感：在创作初期，我们不希望整个声音有很强的传统音乐的感觉，一方面是因为这样会很抢注意力，强旋律会分散作画的专注，但另一方面我们又希望整个作画有仪式感庄重感。钟声、音色的悠长尾音很适合作画时选取颜色与涂色的音效处理。

根据这三个关键点，声音与音效的部分确定了以铃铛声，钟声，笛声这三种乐器为主。

声音设计的结构大致分成：

开场视频（视频+背景音乐+音效）—— 选择壁画（循环背景音乐+左右点击音效） ——                剥落动画（视频+背景音乐+音效）—— 涂色部分（循环背景音乐+色板ui音效+点击上色音效）——落版ui音效

选画部分

选画部分为了避免常规和无趣，我们先用一个循环背景音铺底，再做9个单独的乐音（竖琴的声音为主），每左右点击的就会随机播放一个乐音，这样用户左右点击、滑动，都会根据点击的节奏快慢而连成一段随机的音乐。

涂色部分

这里也是用了跟选画部分同样的原理，运用了马林巴加钢片琴的合成音色为主音。极美的画面加上音效，不止是在玩一个涂色游戏，也像在玩一个音乐游戏。

海量素材大赏

h5结构从选择壁画开始产生分支，每幅壁画都是一个完整的闭环体验，十幅画的数量对于H5 而言是一个极大的挑战，团队确实因为对敦煌的热爱而拼死在制作。

这相当于一口气做了十个h5~下面展示一下注入大量心血充满形式感的海量素材（仅仅是一小部分）~

原画

线稿

变色原件

用户作品

结语

敦煌在21世纪是这样一个被遗忘在沙尘中的城市，她有自己独特的气质，与世界上任何一个城市都不相同。敦煌干燥的空气，充满沙尘味的街景。千百年时间留下的沧桑与她的朴素，简单给我们留下了念想，敦煌是那么的安静而简单。

我们希望把敦煌最本真的这一面呈现出来，没有特别炫目的视觉效果，也没有高深的理论，仅仅是静静去观看她的美，想象自己心中最美丽的敦煌。

品牌 - 王者荣耀

企划 - 王者荣耀、TGideas

监制 -TGideas x 敦煌研究院

创意监制 - 李若凡

品牌经理 - 张雅缇、李歆、张帆

项目管理 - 冯薇、汪海蓉

创意- 石铭、李昂

文案- 尚书

视觉设计 - 霍虹旭、江义

多媒体交互与动画- 唐伟为、唐嘉莉

多媒体开发- 冯超、袁佳平、林雨、陈权

前端重构 - 郭亮、黄文杰

调色 - 李昂、唐嘉莉、江义、2文(旗众)、小夏(旗众)、23(旗众)

音乐 - 冯舜贤（佳荧）、FOKO

音效- 小余（佳荧）、FOKO

音乐指导 - FOKO

音乐 - 冯舜贤（佳荧）、FOKO

音效- 小余（佳荧）、FOKO

壁画重绘 - 李老师(敦煌研究院）、刘呗宁

本文作者：李昂、唐嘉莉、江义、袁佳平、尚书