請掃碼直接體驗，建議佩戴耳機

（特別是安卓手機，可能會出現(xiàn)分辨率有問題導致UI消失的問題，麻煩進行刷新或者是通過不同的外部瀏覽器進行打開嘗試，請諒解）

《回 聲 SOUNDRETURN》

一個名副其實的「聲音解謎」游戲。

落日間出品 | Demo

操作教程 Instructions

點擊右上角的耳機按鈕聽題目，而玩家需要通過與場景進行交互來嘗試還原出題目的聲音。 Click the right-up button to listen to the puzzle: a targeted sound you should interact with the scene objects to reproduce.

如果你接近了正確答案或做對了，那么進度條就會增長，當其充滿的時候便可再次點擊右上角的關卡到下一關。 and if you make it right, the progress bar will grow and fill, then click the up-right button to go to the next level.

右下角的按鍵是用來測試的跳關鍵，正常通關流程不需要使用，但你可以使用它來跳過無法理解的關卡。 The right-down button is a skip level for debugging and test, it's no needed for the game, but you can use it to pass the level.

希望你在其中得到樂趣 Hope you get fun in it.

葉梓濤 Zitao Ye

A sound puzzle web game based on Tone.js and Pixi.js by zitaoye

the JavaScript Systematic Music tutorial and How Generative Music Works by?https://twitter.com/teropa?and the Nicky Case game source code structure is really inspiring for me as a web development starter

It's really related to Brian Eno's talks 生成性音樂 Generative Music and the Ableton Live Learning Synth interactive tutorial.

如果你希望使用電腦，可以登入?https://yezi.itch.io/soundreturn

回顧

這個Demo是本人在2021/7/10-7/11號 CiGA Game Jam制作的原型作品。

關于GameJam

簡單解釋一下GameJam：

Game Jam是一種限定時間與條件的游戲極限開發(fā)活動，專注于游戲領域的創(chuàng)意開發(fā)，鼓勵熱愛游戲和有開發(fā)熱情的人群聚集在一起，通過游戲創(chuàng)作這一形式和過程進行頭腦風暴、經(jīng)驗分享以及自我表達。通過一個限定的時間喚醒游戲的創(chuàng)意理念并同時體驗游戲的開發(fā)過程，包括編程、互動設計、敘事探索、美術設計等都將在限定時間內(nèi)完成。

GameJam參加是沒有門檻的，所以是作為我鼓勵很多沒有游戲開發(fā)經(jīng)驗的朋友都可以去參加和體驗的原因。

中國常見的線下GameJam是每年1月份的Global Game Jam，以及每年7月份的華語游戲圈的CiGA Game Jam，線上大概數(shù)月會有Ludum Dare Game Jam，而海外最大的線上GameJam現(xiàn)在或許是由油管頻道「游戲設計工具箱Game Maker Toolkits」所舉辦 GTMK Game Jam，某種意義上，Game Jam匯聚了一個地區(qū)內(nèi)的獨立游戲開發(fā)者，從其中的作品可以觀察出整體環(huán)境和生態(tài)的好壞及游戲設計的水平，從每年的GMTK 復盤中能看到國人在Game Jam和創(chuàng)作上與國外還是有差距的。

每次的GameJam都會有一個主題在開始的時候公布，本次出題依舊是CiGA Game Jam 「臭名昭著」的圖片解讀題：作為一個主要還是做自己想做的想法，并且solo的老油條，我大概是這樣附會聲音的音軌，而這個還原的解謎又是如何將聲音拉回「正軌」的（胡說八道）

關于CiGA GameJam的活動以及題目等其他內(nèi)容可以參考?2021 CiGA Game Jam回顧，對于游戲開發(fā)的熱愛把我們聚集到了一起?， 參加GameJam的朋友太多了，我只推薦同場的作品吧：

同事制作的雙人Rap對戰(zhàn)音游《滿嘴跑火車》?www.bilibili.com/video/BV1YB4y1N7ym

朋友制作的高完成度也有設計想法的《小鎮(zhèn)火車》?www.bilibili.com/video/BV1d44y1q794

一位solo策劃用ppt做的敘事體驗向的特別作品《Min's Metro 民氏地鐵》youxibd.com/v2/gamejam/cgj2021/works/1406

作為一個算是參加過不少次GameJam的老人，這次我給自己的評價是：不是一個好的參與者。作為結(jié)果的作品《回 聲 SOUNDRETURN》的形態(tài)只能算是及格，但從對我自己來說卻學習到了許多，也是一次新的挑戰(zhàn)。

對于GameJam的理解總是豐富的，有人把其當作是某種競賽，有人當作是一次實驗性想法的落實，當做認識新的朋友的實踐，有人則將其當作是一次學習和使用新工具的機會。

對我來說，這更像是我在今年開始逐漸接觸Web游戲開發(fā)和新工具之后的一次實打?qū)嵉难菥?，這也是我自己第一個完全基于html5以及JavaScript還有使用網(wǎng)頁庫的作品。

不同于之前《劍入禪境》或者是其他GameJam大多使用Unity進行開發(fā)，這次也沒有選擇最近剛?cè)腴T的更輕便的Construct3引擎，而是選擇了使用原生的web的html+js庫進行。 原因在于在web端有一個我想要在這次的主題中切入使用的重要的東西

Web Audio API。

Web Audio API

因為落日間只是一個游戲相關的公眾號，我不知道關注者們中前端程序員或者是做互動音頻的朋友是否會熟悉，但我還是介紹一下這個東西。

我知道似乎談論到編程、技術、合成器相關的東西，可能大部分的讀者鑒于專業(yè)性就退卻了，但是我其實也不是相關專業(yè)和行業(yè)的，但我依舊認為這其中有非常神奇的力量，我們遠遠忽略了合成器的意義以及它們在我們今天的聽覺經(jīng)驗中的重要地位。

在一個JavaScript的會議上，一位名為Chris Lowis的老哥做了一個分享?Chris Lowis: A Brief History of Synthesis with the Web Audio API?，他使用web audio api展示了合成器的發(fā)展歷史。

我不知道怎么解釋合成器（synthesizer），但我覺得最簡單的理解便是能夠產(chǎn)生聲音的電子樂器，即如今大家聽到的許多聲音其實并不是通過sample 采樣進行錄制的，而是通過某些方式合成的。

這往往可能是通過analog模擬信號（電流）或數(shù)字信號來進行聲音的制作，聲音通過振蕩器（oscillator）發(fā)出，并且這樣的信號可以通過各種類似濾波器（Filters）的「控件 controls」來進行塑造，可以并且可以使用包絡曲線（Envelopes），低頻振蕩器（LFO）等方式進行調(diào)制（modulation）。

關于這部分的內(nèi)容我推薦大家可以去重輕老師的B站賬號進行學習，他有對于合成器很棒的解說，而Ableton Live 所做的交互式教學頁面，無論是很棒的合成器入門 Learning Synth?https://learningsynths.ableton.com/zh-Hans/?，還是很棒的音樂入門 Learning Music?https://learningmusic.ableton.com/zh-Hans/?（這兩個交互教程都有中文）。

上面我提到的那位老哥也在二十分鐘內(nèi)簡單介紹了單音合成器 Monophonic Synthesis 加法合成器 Addictive Synthesis 減法合成器 Substractive Synthesis 調(diào)頻合成 FM Synthesis 采樣合成 Sampling Synthesis 粒子合成 Granular Synthesis 等。

但是這件事有趣的就在于，他并不是展示一臺又一臺的合成器，也并不是打開類似 Ableton Live 這樣的數(shù)字音頻工作站（DAW），而是使用了簡單的網(wǎng)頁，而這些代碼全部都可以在?github.com/chrislo/synth_history?中訪問到，他的分享的結(jié)尾提到了最早制造一批在貝爾實驗室做計算機音樂的老前輩 Max Matthews 分享的一句話：

計算機是一切的/全體的樂器 the computer is the universal instrument。

通過電子合成器技術，你可以創(chuàng)造世界上任何的聲音，而這樣的偉大的、無限的樂器的可能，就在你現(xiàn)在的每個人的瀏覽器之中。

那就是Web Audio API

Web Audio API 可以讓你在任何Web應用程序中創(chuàng)建和處理聲音，有一位名為Tepora的老哥在上做了非常棒的兩個教程，我在知乎放出了部分的我的筆記，在 Learn Web Audio from the Ground Up 中，他面向沒有任何音樂/音頻的JavaScript 開發(fā)者做了一個音樂 + Web Audio的科普，其中不乏類似對于十分重要的泛音列的科普。

而在后續(xù)的另一個教程中，JavaScript Systems Music - Learning Web Audio by Recreating The Works of Steve Reich and Brian Eno ，他手把手地繼續(xù)教我們?nèi)绾问褂肳eb Audio 進行基本的循環(huán)來復刻名作 Steve Reich - It‘s Gonna Rain ，通過使用采樣計算音程并且使用卷積混響來制作 Brian Eno Ambient 1: Music for Airports, 2/1 1978，以及簡單介紹了基于Web Audio API的 JavaScript的庫，也正是這次我的GameJam所使用的 Tone.js，用于來更方便地創(chuàng)建合成器來模擬重現(xiàn) Brian Eno 的舊作 Discreet Music 1975（他所使用的 Tone.js 的API有些老舊，部分還需要重新查閱Tone.js 的官方最新文檔）。

兩篇筆記：

葉梓濤：筆記：可能是最好的WebAudio入門教程 Teropa：Learn Web Audio from the Ground Upzhuanlan.zhihu.com

葉梓濤：筆記：JavaScript Systems Music -Learning Web Audio by Recreating The Works of Steve Reich and Brian Enozhuanlan.zhihu.com

你能十分驚奇地發(fā)現(xiàn)當初的那些使用循環(huán)磁帶來制作的生成音樂，如今在計算機和程序之下可以非常方便地制作出來。

兩個挑戰(zhàn)

所以對我來說這次GameJam的兩個挑戰(zhàn)如下：

我要使用我尚不熟悉的Web Audio API 與 Tone.js 從教程到應用（我甚至還是當天晚上補完的第二篇教程），并且將其與玩家的交互與渲染結(jié)合起來，在渲染和交互上我使用了也是僅僅入了門的，可能是網(wǎng)頁上最快的2D渲染器 Pixi.js

Diving In: Pixi JS?https://zhuanlan.zhihu.com/p/383581835

使用Pixi.js 的原因主要是因為我很喜歡的游戲開發(fā)者Nicky Case例如他的名作《信任的進化 The Evolution of Trust》也是使用了Pixi.js來做渲染的，不過他是一個專業(yè)的網(wǎng)頁開發(fā)者，混合了非常多原生的h5代碼和其他的庫，這個作品也是開源的，在Github上有近五千的Star。

信任的進化?

http://ncase.me/trust/

https://github.com/ncase/trust

我覺得非常神奇的，并且在先前騰訊研究院邀請我去做的關于Metaverse和創(chuàng)作者的分享中，我主要提的對于元宇宙的想象其實是近乎等同于Web的，因為我意識到與類似Unity的游戲引擎不同，對于這樣的一個Web開發(fā)，這是一個充滿變化，充滿分享和奇妙場所，你可以通過簡單的

<scirpt src = "... "></script>

來引入世界上其他人所分享的任何開源代碼包，然后再次之上進行創(chuàng)作和開發(fā)，這是一個有很多空白，但是卻也充滿了可能性的場所。

例如我這次就是用了來做 觀察者模式 The Publisher/Subscriber Pattern的minipubsub.js，然后提到的pixi.js和Tone.js，還有用于處理運動和緩動的Gsap.js。

另外一個挑戰(zhàn)在于我沒有想過在web端上面對完全空白的文檔，要如何構(gòu)建出一個游戲。

要怎么進行關卡放置加載，這些過去在Unity和游戲引擎中封裝好的功能如今完全需要由自己來構(gòu)建，所以對我來說，第二天（周六）的很長一段時間而都在對照著Nicky Case的《信任的進化》的源代碼中的關卡加載的代碼來構(gòu)建一個非常簡單的框架來使用，這對我來說是一次可以說from scratch 的游戲開發(fā)，如果要是平常我可能早就放棄了，但是在Game Jam中，一切困難和學習都是沖著一個具體的解決問題去的，所以反倒做了出來。

以此就有了這個看似粗糙簡單，但花了不少力氣的Demo

SOUND RETURN

我必須要承認這次的關卡設計非常地糟糕，不僅難度沒有調(diào)好，集中精力在實現(xiàn)各種不同的看上去花哨的功能的想法的我其實并沒有真正多少去尋找和制作關卡，每一關都是不同的功能，而對于一些基本的如響度，聲像這些都沒有做，在交互的傳達上也礙于時間和懶惰而省略了許多，但想后面專門拿出時間做修繕和擴展也不知道猴年馬月了，于是就湊合一聊了。

Level 1

所以對于關卡1，實際上這樣的一只小兔子 ?? ，被創(chuàng)建的同時也創(chuàng)建了一個合成器，而這個合成器的頻率（Frequency），也是我們常說的音高（Pitch），被我設定是由兔子之于屏幕的 x 軸的位置決定的，所以在左右拖動的時候，可以很清晰地聽到音高的變化。

這一部分很有趣地是在于我在觀察玩家玩這關的時候，有一位朋友試圖通過不斷點擊兔子來發(fā)出謎題的那種抖動式的聲音，但其實那僅僅只是降低了頻率的結(jié)果，在這點上說明其實大部分人是不會意識到聲音的頻率在漸變中會有這么豐富的變化的。

Level 2

第二關是很早就想到的，其實最早也是希望做出更多類似的有獨立的碰撞邏輯的聲音循環(huán)，玩家通過引導這些小兔子到正確的軌道上發(fā)出正確的聲音，但結(jié)果卻做了這個有些不合理的謎題。

但我覺得如果細心的話，玩家應該能基本地感受到他點擊的時機不同，這些小兔子不同地運動方式因此改變，而他所到的聲音循環(huán)也因此改變——可能大部分人覺得這沒什么特別的，但是可能對某些人來說，這可能就是所謂生成音樂的一個最小的單元：你想想，只需要輕輕一點，根據(jù)不同人的點擊時刻，這兩只兔子在移動碰撞的聲音間隔被錯開，整體聲音發(fā)生變化。

這一點可能 Steve Reich 的 It‘s Gonna Rains 中有類似的這種微妙變化的和錯位帶來的豐富性。

而這僅僅是兩只移動發(fā)生碰撞聲音的簡單兔子！

當然謎題顯得有些Tricky，我想讓你將兔子發(fā)出的聲音重合變?yōu)槁犐先ハ袷侵挥幸恢弧?/p>

Level 3

第三關依舊是糟糕的關卡設計和引導，更多其實我是想展現(xiàn)出：其實我完全可以用類似物理的規(guī)則方式驅(qū)動這個發(fā)聲的兔子。

比如我設定了兔子的跳躍，設定每次落地觸發(fā)的聲音根據(jù)碰撞點的X軸位置來修改并且觸發(fā)對應合成器的不同頻率，那么這完全就成了一個音樂玩件，你可以試試看就放著聽它不斷地跳躍并且生成音樂，而蓄力的時間不同，可能生成的后續(xù)一連串完全不同的聲音。

而這僅僅只是一只兔子！

在游戲最后可以看到我一次性丟了三四只的兔子，可以聽聽他們是如何在不同聲部上進行演奏和生成的。

Level 4

第四關依舊是糟糕的關卡設計，這里旋轉(zhuǎn)的兔子所代表的是一段不斷循環(huán)Loop的音樂素材，游戲《荒野亂斗 Brawl Stars》的開場音效，而這類似 Steve Reich 地處理方式，但其中的映射規(guī)則設計得并不好：

兔子的 X 軸實際上代表著 循環(huán)的磁頭的開始 LoopStart，而Y 軸代表循環(huán)磁頭的結(jié)尾 LoopEnd：

這就是為什么當兔子越過對角線的時候就停止的原因：循環(huán)開始的磁頭超過了結(jié)束的時間點，所以循環(huán)播放停止了。

所以在我探索這樣的交互的過程，也是我在探索這段素材被再度制造和修改的可能性，我也是很驚訝地通過循環(huán)才注意到了這段采樣中有一個非常亮的一個尾音，而將其切分出來循環(huán)會有類似鳴鐘式的效果，我也希望玩家在探索的時候可以感受到自己居然可以通過對于素材的重放區(qū)域的移動來創(chuàng)造出這樣特別的聲音效果，雖然我的這個重放機器的設計非常不直覺。

Level 5

這一關和第一關的觸發(fā)方式類似，但是不同的地方在于，這只兔子背后不再是單音合成器，而是一個雙合成器 DuoSynth。

不同于之前用的單合成器MonoSynth 使用一個振蕩器，DuoSynth使用了兩個單音合成器疊加來形成更加豐富的音色。在X軸和Y軸上我都綁定了不同參數(shù)的控制，都比較特殊，Y軸上變化的是一個數(shù)值：Harmonicity ，Harmonicity is the ratio between the two voices. 是兩個合成器頻率的比值；而X軸上則是控制我在合成器的輸出上多加了一個低通濾波器（lowpass）的頻率，效果是只允許比起頻率低的聲音通過，所以當小兔子越往左移動，聲音就被削弱地越多直到完全無聲。

這完全是在不同維度上對聲音進行了操控和改造，所以固然和Level 1 是近似的設計，但其內(nèi)在的規(guī)則完全不一樣。

大概如此，當時周日中午在會場本來還想多做幾關，但感覺周圍的試玩氛圍的豐富以及可能大概是前兩天睡眠不好加上信息量太大，大腦基本不轉(zhuǎn)了，所以就干脆還是草草作結(jié)。

但我真的很有趣看到大家戴著耳機對著這樣的一個粗糙的畫面的一只小兔子如同老中醫(yī)把脈式的移動和對照的，我意識到我確實創(chuàng)造了一個有趣的、豐富的聲音挑戰(zhàn)，這使得玩家重新去覺察聲音的豐富性，其實雖然是關卡，但本質(zhì)上每一關我都在設計一個新的樂器。

就像我在自己的作品集頁面?yezi.itch.io/soundreturn?中寫的：

這僅僅只是一次試圖結(jié)合web audio，渲染，互動的練習式作品，但我可以瞥見其中進行謎題關卡設計的豐富多樣性，受益于聲音宇宙的慷慨，這近乎能夠有創(chuàng)作出無限的關卡與可能。

It's just an exercise to combine the web audio, render, and interaction, but I can see a vast variety of puzzles and future level design - which has almost infinite possibilities that are beneficiary of this generosity of the sound universe.

這次完整試驗了使用web-based的技術來制作游戲，并且通過二維碼直接進行傳播和多端試玩的體驗，已經(jīng)可以說達到了我期待的那種輕量式的創(chuàng)作和傳播可能，之后落日間也會周期性地將從媒體轉(zhuǎn)移到實踐和制作直接分享上來，作為創(chuàng)作者的批評者，避免眼高手低是我們時刻提醒自己的。

非常感謝椰島游戲承辦了這一場GameJam，以及會場的工作人員小伙伴們的支持。

也非常感謝在現(xiàn)場試玩和投票給我的朋友們：）

這次完成度遠不夠，但是也拿到了全場第五的投票數(shù)，還有朋友專門來表達對我作品的認可感到非常開心，但也有些許愧疚，畢竟我覺得在關卡設計和引導上可以做得更好的，期待日后有找到合作者或者有其他的外部機遇能夠?qū)⑵湔归_。

落日間的其他游戲作品可見

劍入禪境 Sword Zen | Global Game Jam 2021

人生不是永遠開不完的硬紙板箱游戲0x007C：Là-bas #1

游戲0x006A：S E E K?（前年CiGA全場最佳）

游戲0x0069：我做的游戲好難玩游戲0x0064：EI Hacedor

感謝大力支持落日間的朋友：@昕仔 @某小熊貓貓 @少楠 @Bob傅豐元 @小河shan @希辰Xichen @小樂 @DC @Bynn @webber @紳士凱布雷克 @Minke @Roam @兜&敏 @KIDD @菲茲 @喵嗚 @李喆 @特特 @Skellig 的支持?。海?/p>

這也是落日間第一次嘗試直接在公眾號上制作可以直接體驗和跳轉(zhuǎn)的游戲作品，會看情況增加更多這樣的呈現(xiàn)形式：）

如果你覺得對有所幫助，歡迎轉(zhuǎn)發(fā)評論，或通過愛發(fā)電?https://afdian.net/@sunset_studio?/ 公眾號贊賞給我們支持 。

感謝游玩和閱讀！