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