古琴有著 3000 多年的悠久歷史，是中國最古老也最純粹的傳統樂器，最擅長以 “ 虛 ” “ 遠 ” 來營造一種空靈的美感，瀟灑飄逸的同時又讓人感到深沉的慰藉。
王者榮耀六周年，為推出限定版新皮膚預熱。一曲神奇秘譜《 流水 》，唯愿與你知音，神秘琴師究竟是誰。周年慶皮膚的秘密，就藏在古琴音里，也藏在每個交互線索里。
Who Is Playing GUQIN 掃一掃進入 H5
01. Intro animation
開場，即入古琴意境。宛如水墨版的世外仙境，松柏微風、云霧繚繞，神秘琴師在重重山巒中悠然撫琴彈奏《 流水 》，減字音符（ 古琴琴譜指法 ）隨琴音撲面而來，引導用戶點擊探索。
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 | 刺猬
壞打印機創意實驗報告No : #H5008
Who Is Playing GUQIN ? 2021
項目信息
專業評分
專業評分已截止
評論
評論
推薦評論
全部評論（13條）