是的，我用 2 週使用 PlayCanvas 和 VIVERSE World 製作了一款線上密室逃脫小遊戲〈倒反的秩序：密室逃脫計畫〉，甚至還為這個遊戲使用 Github 建立了一個官網放置解答，大家有興趣可以去玩玩看。不過為什麼要製作這款小遊戲，這話就必須從 1.5 個月前講起，今天我就來分享我的心得！
遊戲資訊
- 遊戲名稱：倒反的秩序－－密室逃脫計畫
- 遊戲類型：密室逃脫
- 兼容設備：電腦
- 遊戲連結：倒反的秩序－密室逃脫計畫
- 遊戲官網：倒反的秩序：密室逃脫計畫
- 製作平台：PlayCanvas、VIVERSE EXTENSION、VIVERSE World
開始遊戲（請使用電腦）
遊戲方式：鍵盤 WASD 讓人物移動、滑鼠點擊物件、鍵盤輸入密碼
遊戲解答請參考網站：倒反的秩序：密室逃脫計畫
製作緣起
製作的原因很簡單，當時公司舉辦了一個創意黑客松競賽，強制要求所有員工在 1.5 個月內使用 VIVERSE World 製作線上展示廳或小遊戲參加，如果要製作小遊戲的話光靠 VIVERSE World 是無法寫出腳本的，因此一定要學習 PlayCanvas。
PlayCanvas？這啥？第一次聽到這個讓我傻眼貓咪，你說 Unity、Unreal Engine 我還免強聽過（但也不太會用），這工具我真是毫無所知，經查詢，雖然是一款開源開發工具，但網路上學習資源少得可憐，連官方網站得學習資料都零零落落。
除了 PlayCanvas，要兼容 VIVERSE World 的遊戲，還必須使用 VIVERSE EXTENSION 這款 HTC 自己開發的 PlayCanvas 外掛。好的，從發布製作開始只有 1.5 個月，我不只要去摸 PlayCanvas 到底是什麼東西，還要去 VIVERSE Docs 狂 K 說明文件。1.5 個月？確定舉辦這個活動的單位不是跟我開玩笑的嗎？
我當時的想法就是：「公司明明就可以直接幫某些單位加薪，幹嘛還故意辦這個活動，強制毫無相關基礎的硬體部門的員工來陪榜啊！」這些平台和工具沒事先有接觸過的人，哪有可能在 1.5 月的正常工作與生活之餘把它做出來？
開始製作！不是抱佛腳 光學習完就只剩下 2 週了
明明有 1.5 個月的時間，為何只用 2 個禮拜製作？真的不是我臨時抱佛腳，而是面對 PlayCanvas 和 VIVERSE EXTENSION 這兩個我從來沒接觸過的東西，我真的是瘋狂的在翻閱這兩個平台的基礎教學文件，因為我知道，只有掌握一定數量的技術，我才能知道我能做哪一種類型的遊戲，可以提供什麼樣的功能。現在我就是一個新手小白，直接開始做簡直天方夜譚。
於是就這樣，我幾乎把所有下班時間、週末、連假全都砸進去，常常從早上學習到晚上，週末時甚至會到隔天凌晨才就寢。好幾個假日早上，我就是一早買兩杯特大杯咖啡，然後開始 K 書，PlayCanvas官方文件、VIVERSE EXTENSION的官方文件，不斷練習基礎、測試、挫折、3D 暈、抱怨、崩潰捶枕頭，不說還以為我在準備考研。你說這個研讀的狀況，如果在一般家庭不鬧革命才怪，幸好我單身。
這期間，每每想到遊戲還沒製作完成，還有解各式各樣的 BUG 就讓我精疲力竭，產生失眠、焦慮、淺眠，半夜常常驚醒，幾乎每天身體都很不舒服。但想到最後還是把這款遊戲基礎完成，還是覺得應該來分享一下這些甘苦談，儘管遊戲還存在很多可以精進的地方。還有我本來真的很想學習 Blender 把一些動畫加進去，但想到 1.5 個月，還是不要鬧了，下次吧！下次吧！
1 個月過後真的必須要開始，因此我就列出了自己對這兩個工具的技能狀況，來決定自己能做哪一類型的遊戲！最後選定密室逃脫類型的遊戲，除了現實版密室逃脫解謎過程真的很好玩，這種完成任務能通關的製作流程也是當時我能掌握的做法。不能再想，就做吧，不然就要開天窗了！
我的強項？引入文學底蘊吧！
想到我都花這麼多時間來學習了，但還是不甘拿來當陪榜（雖然事後看感覺就真的是有差），所以我就思考我的強項到底在哪裡？我忽然想到，製作遊戲我是新手，但是寫文章就是我的強項啊！
身為理工背景的人，可能很少像我這樣曾參加過一堆文學比賽吧！要和那些本來對這幾個平台和工具有一定基礎的人相比幾乎不可能了（只能被虐），那我只能試試看能不能利用這個優勢。我希望讓一款簡單的密室逃脫遊戲，也能多一些文學底蘊，以及對時事的批判，這個遊戲的張力才能被擴大。所以我決定親自撰寫一篇原創小說，作為這款遊戲的世界觀背景。
最後，我選擇了批判性很強的反烏托邦風格，搭配非常適合遊戲敘事的意識流寫作手法。在文學修辭上，我致敬我很喜歡的兩位文字創作者－－作家簡媜與作詞家藍小邪，我非常喜歡他們刁鑽又直擊人心的修辭法，我試著把他們的寫作技巧稍作轉化，融入我的文本之中，讓文字更具象徵性、擬人化，藉此針砭議題。
公司耳提面命絕對不要侵權，這個我倒不擔心，身為一名部落客，我平常都很注意素材來源，除了部分是自購後可商用的素材外，其餘都是選 CC0、CC BY 4.0，以及 OFL 1.1 為製作的素材，確保內容達到可商用的標準，絕對安全。遊戲的核心思想，我選擇以柏拉圖《理想國》為象徵，柏拉圖的思想已是公共財不存在侵權問題，僅引其概念為象徵，讓遊戲不僅僅是遊戲，而是能引起反思。
最後在結局設計上，我看膩了喜劇結尾，也討厭悲劇收場，所以我設計一些開放式懸念的念想－－即使主角成功逃出密室，依然會思考：「這場密室逃脫，究竟是我成功的逃脫，還是我的逃脫本身就是被刻意設計的實驗？當真相與恐懼被深植內心的時候，是否還有勇氣揭露不公？」
解 BUG 的無限崩潰迴圈？
角色動作限制
遭遇問題：密室逃脫遊戲常見的爬行、互動等動作無法透過內建角色實現，嚴重影響沉浸感。畢竟密室逃脫本質上是一種以身體行動推動邏輯思維的心理訓練，這些動作在虛擬遊戲中還是難以還原。此外，角色外觀也與場景不符，例如遊戲背景是精神病院，但角色卻穿著時尚又現代的衣服，實在跳戲。
解決方法：目前我無力解決，只能期待未來 VIVERSE 開放更彈性的角色自訂功能。現階段也只能接受目前只有第三人稱視角設計，若能提供第一人稱、上帝視角等，會讓運鏡更多元。
相機穿透
遭遇問題：這幾乎讓我崩潰。在密室中，玩家要輸入密碼打開箱子或櫃子，取得關鍵物件。理想狀況下，需控制 Raycast 阻擋點擊，確保打開櫃子前無法點選裡面物品。但 VIVERSE 的預設相機 Raycast 完全無視這設定，玩家甚至能直接隔空點擊取得物件。我嘗試不斷在物件外層加碰撞殼，毫無幫助，我一定想要放棄密碼櫃的設計，但沒有密碼櫃的密室逃脫真的很無趣，我當時一直天人交戰。
解決方法：後來我上廁所時靈光一現（真的！），VIVERSE EXTENSION 的點擊邏輯是－－物件必須有 Collision 才能被點擊，想到這裡給了我一個靈感，如果我讓物件的 Collision 預設為關閉，當密碼櫃正確輸入密碼時才啟用該物件的 Collision，這樣就能確保只有在解開密碼後才能互動！沒想到馬上就成功了，謝天謝地。
相機被接管
遭遇問題：VIVERSE WORLD 會強制接管相機，並支援 zoom in/out 及 orbit，導致我辛苦設計的謎題被玩家一眼看穿。
解決方法：這個算是比較好解決，我加了個天花板遮住畫面上方即可。但也因此每次要編輯物件時都得手動關閉天花板，否則會被擋住很難操作。話說回來，這種自由視角的確能提升探索感，但也容易導致 3D 暈。我自己測試時就常常暈到想吐。
劇情與導引介面
遭遇問題：我希望能在遊戲開始前加入劇情介紹，讓敘事更完整。在 PlayCanvas 裡用腳本是做得到的，但上傳 VIVERSE WORLD 後就失效，VIVERSE EXTENSION 看起來也沒這功能。不過我發現有其他作品成功做到，就不確定他們怎麼實現。
解決方法：這部分我實驗了非常久，後來發現如果用純 JavaScript 寫，會被 VIVERSE 平台重新定義導致排版跑掉。後來我改用 HTML DOM 強制全螢幕蓋住畫面，雖然不是理想效果，但總算能勉強實現劇情開場與結尾說明，增強敘事與代入感。
密碼輸入機制
遭遇問題：PlayCanvas 和 Viverse EXTENSION 都沒提供 Input Field 工具，一開始我找到官方的 UI Text Input 教學腳本，高興得要命，結果上傳到 VIVERSE WORLD 後卻發現輸入欄點擊沒反應。最後才知道是因為 HTML 元素位置被 VIVERSE 重新定義，導致 input 出現在畫面外。
解決方法：本來差點就放棄這個功能，後來靈機一動想到瀏覽器的 window.alert 或 prompt 可以當成輸入機制。詢問 AI 後測試成功，總算讓我把這個功能保住了。
物件隨意滑動
遭遇問題：我在遊戲中設計了一些可被推動的物件，讓使用者透過「撞擊」推動它們來尋找線索。不過當我為這些物件加上 Collision 和 Rigidbody 後，它們竟然會自己慢慢滑動。這讓我困惑，後來推測可能是物件一開始擺放時就有些微傾斜，或是受到附近其他物體的擠壓與物理影響，導致一進入遊戲它們就開始移動，甚至提早觸發機關。
解決方法：老實說，我最後還是沒找到根本原因。但為了能準時交卷，我只好用點小技巧來遮掩問題：在可動機關的後方加上一個可動物件來頂住它，在前方則放上一個透明的 Static 物件來擋住，有點像是給它裝了個「門檔」。雖然聽起來挺土法煉鋼的，但至少達到了我不想讓機關一開始就滑開的目的。對我這個還不熟 3D 遊戲引擎的人來說，這或許是下下策，但為了交卷，能穩定運作就先這樣吧！
逃出後的結尾畫面無法顯示
遭遇問題：理論上，當玩家成功逃出密室後，遊戲會跳出一個故事結尾畫面，告訴他們「恭喜逃脫成功」。這個畫面我原本設計得跟操作導引介面差不多，想說既然可以套用同樣的腳本和圖片，應該沒問題。但我萬萬沒想到的是，在 VIVERSE WORLD 中點了「全螢幕」後，按下「逃出」卻完全看不到結尾畫面。後來才發現，當進入全螢幕模式後，HTML 顯示會完全被鎖定，導致我無法控制畫面內容。
解決方法：離交卷只剩一晚的時候，我靈光一閃，想到自己之前做密碼輸入時用過的 window.alert()。這個東西會跳出一個系統視窗，而且會強制退出全螢幕。於是我讓遊戲在逃脫成功時先彈出一個 alert，只要全螢幕狀態被打破，我的結尾 HTML 就能重新掌控畫面，成功顯示出來。雖然不是什麼高端解法，但救急很好用，感謝 window.alert！
測試流程耗時，影響開發效率
遭遇問題：每次測試作品都必須重新上傳到 VIVERSE WORLD，光是這個過程就要花 1 到 2 分鐘，讓我每次小改一個東西都得等好久。不僅開發效率被嚴重拖慢，也沒辦法即時看到修改後的效果。
解決方法：這個我真的沒輒，只能說希望未來 VIVERSE WORLD 能提供本地測試的功能吧……目前就只能忍耐。
PlayCanvas 免費空間限制
遭遇問題：我一開始想把遊戲做得更豐富一點，所以加了很多物件和細節，結果沒多久就把 PlayCanvas 免費的 1GB 空間用光了。這時我才知道原來免費帳號是有空間上限的……對我這種剛接觸平台的新手來說更是困擾，因為我常會先開一些空白專案來測試程式碼，確定沒錯後再搬到主專案裡，結果這樣空間一下就被吃掉了。
解決方法：我不認為一個硬體工程師的作品有機會打敗軟體或 UI 部門的作品拿到獎金，所以我能做的就是節省使用，例如盡可能使用低多邊形（low-poly）的素材、貼圖也都壓到最低。後來我看其他經驗比較豐富的團隊就明白了，他們會把重點放在「互動設計」而不是「視覺細節」上。畢竟 VIVERSE 這個平台本來就不適合做大型或精緻的遊戲，過度追求畫面反而會影響效能。這也是我交卷後才真正體悟到的一課，也是經驗上的差距。
初次製作線上小遊戲的心得
首先就是，製作遊戲真的是燒腦又傷心更傷肝，我記得幾年前看過 YouTuber Ava – 凜 分享〈為了求職，兩天內，做了兩個小遊戲 | Unity遊戲製作〉，當時就很佩服，現在更是，尤其那時候 ChatGPT 還沒那麼普及吧，那完完全全就是實打實的硬實力，影片分享許多解 BUG 的過程，提供很多解決方法的思路分享，會比直接描述 BUG 和處理方法有用，因為不是每個人都會遇到一樣的問題，但思考如何用有限的技術去解決問題是很好的腦力激盪。
就像我這個作品中 VIVERSE WORLD 的 Camera 的 Raycast 可以繞過我的密碼鎖，直接點擊正確位置就能隔空取「證物」，而 ChatGPT 一直堅持要我重新拿回 Camera 的 Raycast 才能解決（那怎麼可能），但後來轉念，只要讓 Collision 的關閉與啟用給出一個觸發條件就可以了，問題一下簡單很多。
最後說一下吧！這競賽設定的時間真的太趕了，對新手小白來說簡直太過殘忍，但我確實在有限的時間裡大量吸收了很多 3D 遊戲的製作概念與技巧。雖然最終作品與其他本來就有接觸過這些工具的單位相比大概也只能是陪榜，面對這種絕對不利的競賽，至少我也算很盡責的陪跑員吧！你看，我還自己寫小說了。
有興趣的朋友，可以來玩玩看〈倒反的秩序－密室逃脫計畫〉，然後可以給我一些建議，不過提交的作品是不能更動的，所以您的建議只能成為我之後新作品的養分！
![[Pokemon TCGP] A2b級別對戰賽 7套爬分卡組推薦](https://i0.wp.com/img.jfsblog.com/2025/04/20250405003144_0_d2bcdb.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[Pokemon TCGP] A2b級別對戰賽 7套爬分卡組推薦")
![[Python] YOLOv8操作步驟！訓練自己的圖像辨識模型（以Visual Studio Code操作為例）](https://i1.wp.com/img.jfsblog.com/2025/03/20250331003606_0_dfeee6.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[Python] YOLOv8操作步驟！訓練自己的圖像辨識模型（以Visual Studio Code操作為例）")
![[2025台北燈節] 燈節實拍！西門北門5燈區40分鐘轉一圈，超美窗花剪紙映西門，小提燈台北小Q發放時間](https://i2.wp.com/img.jfsblog.com/2025/02/20250206040337_0_64f168.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[2025台北燈節] 燈節實拍！西門北門5燈區40分鐘轉一圈，超美窗花剪紙映西門，小提燈台北小Q發放時間")
![[Pokemon TCG Pocket (A2b)] 艾路雷朵EX牌組卡手嗎？90場實測紀錄與對戰心得](https://i2.wp.com/img.jfsblog.com/2025/04/20250421001705_0_045d46.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[Pokemon TCG Pocket (A2b)] 艾路雷朵EX牌組卡手嗎？90場實測紀錄與對戰心得")
Facebook留言
Wordpress留言 (0)