王者荣耀六周年H5:是谁在弹古琴?

举报 2021-10

王者荣耀六周年H5:是谁在弹古琴?

扫描,分享朋友圈

王者荣耀六周年H5:是谁在弹古琴?

古琴有着 3000 多年的悠久历史,是中国最古老也最纯粹的传统乐器,最擅长以 “ 虚 ” “ 远 ” 来营造一种空灵的美感,潇洒飘逸的同时又让人感到深沉的慰藉。

王者荣耀六周年,为推出限定版新皮肤预热。一曲神奇秘谱《 流水 》,唯愿与你知音,神秘琴师究竟是谁。周年庆皮肤的秘密,就藏在古琴音里,也藏在每个交互线索里。

王者荣耀六周年H5:是谁在弹古琴?

Who Is Playing GUQIN   扫一扫进入 H5

王者荣耀六周年H5:是谁在弹古琴?


王者荣耀六周年H5:是谁在弹古琴?

01. Intro animation

开场,即入古琴意境。宛如水墨版的世外仙境,松柏微风、云雾缭绕,神秘琴师在重重山峦中悠然抚琴弹奏《 流水 》,减字音符( 古琴琴谱指法 )随琴音扑面而来,引导用户点击探索。

王者荣耀六周年H5:是谁在弹古琴?


02. Scene interaction

核心的场景交互主要有 4 个,通过原始的点击、长按和滑动三种交互方式,呈现古琴曲《 流水 》或轻盈、或沉静、或激荡的琴音,以数字化的方式更直观感受古琴独特的艺术魅力。

古琴有三种音,散音、泛音和按音。其中泛音如天籁,似山间涧流,叮咚潺潺,有一种清冷入仙之感。连续点击,神秘琴师随琴音在山间、溪流中跳跃,听 “ 泛音 ” 的轻盈。

王者荣耀六周年H5:是谁在弹古琴?王者荣耀六周年H5:是谁在弹古琴?

古琴琴谱减字谱,共有 54 种指法。而进,为左手指法。其音余韵悠扬,如静水流深,空山鸣响。长按,神秘琴师随琴音在空山中悠然划船行进,听 “ 进 ” 的沉静。

王者荣耀六周年H5:是谁在弹古琴?

滚、拂,为右手指法。其音汹涌奔腾,如瀑布飞流,汇入江海。左右滑动,神秘琴师随琴音快速驶入瀑布深处,听 “ 滚、拂 ” 的激荡。

王者荣耀六周年H5:是谁在弹古琴?


03. Choose a clue

除了基础性的交互方式,我们也在一些交互设计上藏着小心思。如选择线索页面,我们摒弃了传统的切换控件,用一根琴弦来作为交互媒介。

当用户拨动琴弦,琴弦随之颤动,感受到指尖发出悦耳琴音的同时,水墨晕染变幻,切换不同的线索,供用户选择。


04. Transition & Generate

我们也为 H5 研发了基于 GPU 计算的实时流体交互代码,基于用户的输入和交互,实现多向扩散、单向扩散、多图融合、音乐交互等功能,并对低端机做了兼容。让水墨流体的交互和国风插画更为融合,也让用户有更新奇的沉浸体验感!

当用户随意滑动屏幕任一位置,水墨都会从此位置开始晕染并向四周蔓延,最终看到完整线索,猜测周年庆皮肤的神秘琴师身份,领取赠予 “ 知音 ” 的限时福利语音~!


古琴有着清和、淡雅而又旷远的意境,也只有水墨画才能达其意。

除了前面提及的呈现古琴音色的场景,插画师也绘制了用户在选择不同琴音线索后,生成神秘琴师静坐于不同元素环境下的抚琴场景,如仙鹤、山峦、瀑布、松柏、落日等等,传达古琴多样的意境之美。


为了更贴合水墨的意境,在字体设计上,选择了介于楷书和草书之间更为写意的行书,神秘琴师立于字上,挥洒飘逸、浓淡相宜;UI 设计,提取了古琴音波与流水水纹泛开的涟漪为共同元素,创新又不失古韵美感!



除了《 是谁在弹琴 》H5,我们也参与了王者六周年《 流水知音 》MV的制作。通过 Processing 处理并获取古琴曲《 流水 》的频谱和音频变化,将取得的数据输入三维软件中,基于既定的映射逻辑,驱动山水画的动态生成。

当古琴艺术代表性传承人林晨老师演奏时,背景的山峦伴随每一个琴音发生或高或低或快或慢的动态变化,生动演绎流水的各种情态,实现改编古琴曲《 流水 》琴音的可视化。

1638847116264344.png


出品 | 坏打印机 Studio 
客户团队 Customer Team | 嘉莉
项目统筹 Project Director | 越升
网页开发 Web Developer | 越升 / 明康
视频动效 Animator | 越升 / Vir / 咚发
插    画 Illustrator | Jasper Shaw
平面设计 UI Designer | 1701 Studio
字体设计 Font Designer | 天宇手写工作室 七七
图文排版 Graphic Typesetting | 亦城
文章编辑 Article Editor | 刺猬

坏打印机创意实验报告No : #H5008
Who Is Playing GUQIN © 2021

王者荣耀

坏打印机 Studio

 

王者荣耀六周年H5:是谁在弹古琴?

扫描,分享朋友圈

参与评论

文明发言,无意义评论将很快被删除,异常行为可能被禁言
DIGITALING
登录后参与评论

参与评论

文明发言,无意义评论将很快被删除,异常行为可能被禁言
800

推荐评论

全部评论(13条)