主题 : 王者荣耀:都是九义,为何你那么秀?国服级别大佬 ,超过100%玩家
yooyooka
加为好友    只看该用户
级别: 青铜四
积分:340
UID: 50562
主题:68
回复:0
注册时间:2018-11-14

1#   发表于:2018-12-06 17:43:11 

敦煌壁画是我们民族引以为傲的瑰宝但是它的绚丽正在一点点消失...腾讯联合王者荣耀和敦煌研究院最近发起了一个数字供养人计划希望有更多人了解和热爱敦煌为壁画的保护尽一份自己的力量

关于这个刷屏级别的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 共1页