古琴有着 3000 多年的悠久历史,是中国最古老也最纯粹的传统乐器,最擅长以 “ 虚 ” “ 远 ” 来营造一种空灵的美感,潇洒飘逸的同时又让人感到深沉的慰藉。
王者荣耀六周年,为推出限定版新皮肤预热。一曲神奇秘谱《 流水 》,唯愿与你知音,神秘琴师究竟是谁。周年庆皮肤的秘密,就藏在古琴音里,也藏在每个交互线索里。
开场,即入古琴意境。宛如水墨版的世外仙境,松柏微风、云雾缭绕,神秘琴师在重重山峦中悠然抚琴弹奏《 流水 》,减字音符( 古琴琴谱指法 )随琴音扑面而来,引导用户点击探索。
02. Scene interaction
核心的场景交互主要有 4 个,通过原始的点击、长按和滑动三种交互方式,呈现古琴曲《 流水 》或轻盈、或沉静、或激荡的琴音,以数字化的方式更直观感受古琴独特的艺术魅力。
古琴有三种音,散音、泛音和按音。其中泛音如天籁,似山间涧流,叮咚潺潺,有一种清冷入仙之感。连续点击,神秘琴师随琴音在山间、溪流中跳跃,听 “ 泛音 ” 的轻盈。
古琴琴谱减字谱,共有 54 种指法。而进,为左手指法。其音余韵悠扬,如静水流深,空山鸣响。长按,神秘琴师随琴音在空山中悠然划船行进,听 “ 进 ” 的沉静。
滚、拂,为右手指法。其音汹涌奔腾,如瀑布飞流,汇入江海。左右滑动,神秘琴师随琴音快速驶入瀑布深处,听 “ 滚、拂 ” 的激荡。
除了基础性的交互方式,我们也在一些交互设计上藏着小心思。如选择线索页面,我们摒弃了传统的切换控件,用一根琴弦来作为交互媒介。
当用户拨动琴弦,琴弦随之颤动,感受到指尖发出悦耳琴音的同时,水墨晕染变幻,切换不同的线索,供用户选择。
我们也为 H5 研发了基于 GPU 计算的实时流体交互代码,基于用户的输入和交互,实现多向扩散、单向扩散、多图融合、音乐交互等功能,并对低端机做了兼容。让水墨流体的交互和国风插画更为融合,也让用户有更新奇的沉浸体验感!
当用户随意滑动屏幕任一位置,水墨都会从此位置开始晕染并向四周蔓延,最终看到完整线索,猜测周年庆皮肤的神秘琴师身份,领取赠予 “ 知音 ” 的限时福利语音~!
古琴有着清和、淡雅而又旷远的意境,也只有水墨画才能达其意。
除了前面提及的呈现古琴音色的场景,插画师也绘制了用户在选择不同琴音线索后,生成神秘琴师静坐于不同元素环境下的抚琴场景,如仙鹤、山峦、瀑布、松柏、落日等等,传达古琴多样的意境之美。
为了更贴合水墨的意境,在字体设计上,选择了介于楷书和草书之间更为写意的行书,神秘琴师立于字上,挥洒飘逸、浓淡相宜;UI 设计,提取了古琴音波与流水水纹泛开的涟漪为共同元素,创新又不失古韵美感!
除了《 是谁在弹琴 》H5,我们也参与了王者六周年《 流水知音 》MV的制作。通过 Processing 处理并获取古琴曲《 流水 》的频谱和音频变化,将取得的数据输入三维软件中,基于既定的映射逻辑,驱动山水画的动态生成。
当古琴艺术代表性传承人林晨老师演奏时,背景的山峦伴随每一个琴音发生或高或低或快或慢的动态变化,生动演绎流水的各种情态,实现改编古琴曲《 流水 》琴音的可视化。
你的评价是对作者最大的支持!
推荐案例
说点什么
案例精选
更多
最热评论