這次分享的是大二下學期開發的 2D 平台關卡編輯器的製作過程!
前言
這次專案是二上期末跟《故事編寫》課老師聊到的東西,他認為有輔助軟體能對教學品質產生幫助,透過實作避免學生的知識停留在理論層面。
主要從關卡設計的角度深入,雖然設計初期會用紙上談兵的方式構思關卡,但無法驗證是一大缺點,他希望有工具能讓學生製做關卡並實際遊玩。
雖然市面上有許多相似性質的遊戲(如:Super Mario Maker),但考量成本不可能給每個學生配發,也不可能公然用盜版教學,找人開發新的還是最保險。
所以我就接下了~
但談了交換條件,老師答應幫我處理小說的出版事宜(我在課程中完成的),流程也進行的差不多了的樣子,期待出版後收到的回饋。除此之外還有人培學分能拿,對減輕後續課業壓力有不少幫助,賺爛了賺爛了。
總之這案子告一段落了,玩家可以製作並遊玩自己的關卡,遊戲畫面如下:
這篇是製作過程的紀錄文章,內容與實際時序大致相符,但有針對閱讀流暢性調整過編排。
成員介紹
首先介紹一下成員,我們是南臺科大第 111 學年度的多樂系學生,目前為二年級(二下),專案成員一共有四位:
- 小呈 Angus(我):程式、專案管理
- Kocha:2D 生物設計、動畫、UI
- Izumige:2D 物件設計、動畫
- XiaZelldert:音樂音效
![image display error, please report: [/devlog/nightmare-crafter/preface-member.png]](/devlog/nightmare-crafter/preface-member.png)
雖然大二,但我在入學前就有接觸過五年遊戲開發,所以文中提及的內容可能超出學校的常規進度。開發流程是根據我自身的知識進行的,如果有能改進的部分再麻煩前輩指出。
![image display error, please report: [/devlog/nightmare-crafter/preface-meteorite.jpg]](/devlog/nightmare-crafter/preface-meteorite.jpg)
概念設計
專案的第一步是概念設計,為確認方向我讓組員進行了幾次概念發想。以下正文。
情境設定
首先是情境設定,為了給美術一個起點發想,我們從幾個方案中採用了克蘇魯題材,並設計了有趣的情境:在深海巨型菊石中的城市。
我們也畫了幾張分鏡圖,左上是我畫的,左下與右側是組員 XiaZelldert 與 Izumige 繪製的…有圖才知道大家理解各異,連菊石的存在方式(活、死、躺著、直立)都沒有共識。
![image display error, please report: [/devlog/nightmare-crafter/concept.jpg]](/devlog/nightmare-crafter/concept.jpg)
組員 XiaZelldert 也針劇情寫過文本,但我跟教授確認需求後就喊停了。必要需求只有以下幾項:
- 一個 2D 平台動作關卡編輯器
- 在規定的時間內,主角在血量不為零的狀態下,從起點移動到終點為過關
- 有可以丟擲拋物線物體攻擊的敵人
- 玩家可以蹬牆跳
- 教材用,使用者為授與學生
速寫草圖
雖然砍了劇情文本,但情境設定還是沿用,我要求美術們以此繪製數張草圖,設計遊戲使用的方塊和生物。
首先是組員 Kocha 設計的草圖,方塊和怪物各八種。
![image display error, please report: [/devlog/nightmare-crafter/concept-kocha-1.jpg]](/devlog/nightmare-crafter/concept-kocha-1.jpg)
還有組員 Izumige 繪製的草圖,四種方塊和九隻怪物。
![image display error, please report: [/devlog/nightmare-crafter/concept-izumige-1.jpg]](/devlog/nightmare-crafter/concept-izumige-1.jpg)
註:專案初期因為需求考量,我有限制美術設計時的精緻度。
配色嘗試
草圖完成後接著嘗試配色,考量複雜度問題我採用了組員 Kocha 的怪物與 Izumige 的方塊設計,從中選出三個方案並要求他們繪製三種配色變體。
![image display error, please report: [/devlog/nightmare-crafter/concept-color-1.jpg]](/devlog/nightmare-crafter/concept-color-1.jpg)
後續進行了數次協調,改變方塊邊框、飽和度與明度等,也透過柏林噪聲提升質感(這什麼魔法?),再從方案中選出最後要採用的一項。
![image display error, please report: [/devlog/nightmare-crafter/concept-color-3.jpg]](/devlog/nightmare-crafter/concept-color-3.jpg)
給剩餘的草圖上色後就告一段落了,感謝術們耐心陪我討論。
![image display error, please report: [/devlog/nightmare-crafter/concept-color-4.jpg]](/devlog/nightmare-crafter/concept-color-4.jpg)
介面草圖
專案初期需要介面參考,包括主頁面、選單、編輯器與遊玩畫面,我讓組員 XiaZelldert 嘗試繪製了一些草圖,但後來沒有採用。
![image display error, please report: [/devlog/nightmare-crafter/concept-ui-1.jpg]](/devlog/nightmare-crafter/concept-ui-1.jpg)
不採用原因是設計和需求有落差,以編輯器為例,他繪製的是彈出式背包介面,類似 Minecraft 或 Terraria,但我們比較需要的是如 Rimworld、Oxygen Not Included 等常駐編輯器介面。
![image display error, please report: [/devlog/nightmare-crafter/concept-ui-2.jpg]](/devlog/nightmare-crafter/concept-ui-2.jpg)
所以我後來在 Untiy 做了新的的介面給原型使用,將選單固定在畫面左側與底部。
![image display error, please report: [/devlog/nightmare-crafter/concept-ui-3.jpg]](/devlog/nightmare-crafter/concept-ui-3.jpg)
程式原型
在美術們發揮創意的同時程式工作也同步進行著。剛開始 我想趁機會驗證我對遊戲模組的理解,根據之先前的筆記 【筆記】如何讓遊戲支援模組開發 嘗試實作。
我拿之前做到一半的框架修改, 讓遊戲讀取 StreamingAssets 中的文件建構物件、載入圖片,甚至想用 Lua 將程式碼外部化。
![image display error, please report: [/devlog/nightmare-crafter/prototype-1.jpg]](/devlog/nightmare-crafter/prototype-1.jpg)
結果嘛…
不能說失敗,只能說是一塌糊塗,原因有三點。
首先是技術難題,除了基礎架構的知識不充足,我對資料驅動 (Data-Driven) 、Lua (XLua) 等進階技術也還不熟悉,資料載入與行為串接都相當粗糙。
雖然成功讀取定義檔並生成實體在場景中,還能操控玩家(螃蟹)攻擊怪物,但程式碼的維護跟擴展是個惡夢,硬要繼續恐怕會浪費更多資源。
![image display error, please report: [/devlog/nightmare-crafter/prototype-2.gif]](/devlog/nightmare-crafter/prototype-2.gif)
第二是企劃部分,我們製作前沒有進行正式企劃,很多東西是同步和想到才加的,所以程式編寫時也不知道物件需要的 屬性,血量圖片等都是遇到才補。
要做那麼複雜的話這些需求都該先預估好才對,但…就算要先企劃,以我目前的能力也做不好那麼詳細的預估。
最後是需求問題,老師的要求不是能讓玩家修改生物、腳本和圖片的遊戲,而是能製作關卡的編輯器。雖然有學到東西,但從專案管理的角度看則浪費了整個月的工作量,或是賠了整個月的資金(如果有),還好這不是商案…
但之前工作時也犯過一樣的錯 D:
最後我就決定止損,把原先的程式全部砍掉,改用最基礎的 Resources 載入、用 Prefab 組合物件,以及用繼承實作不同行為。簡單快速也沒技術深度,但是符合需求的樸實方案。
![image display error, please report: [/devlog/nightmare-crafter/prototype-3.jpg]](/devlog/nightmare-crafter/prototype-3.jpg)
總之花了幾天的時間把原本的功能修復完,玩家能能從列表新建關卡,進入編輯器。
編輯方式是從左測選擇類別後(圖層),選擇物件(筆刷)後在網格上透過左鍵繪製、右鍵擦除,而畫面右邊會顯示當前物件的描述。編輯完在右上方輸入資料夾和關卡名稱就能保存關卡了。
![image display error, please report: [/devlog/nightmare-crafter/prototype-4.gif]](/devlog/nightmare-crafter/prototype-4.gif)
回列表就會看到關卡被顯示出來,能用遊玩模式進入。在遊玩模式中玩家抵達終點就算贏,但在這之前如果時間或血量先歸零就輸了。
![image display error, please report: [/devlog/nightmare-crafter/prototype-5.gif]](/devlog/nightmare-crafter/prototype-5.gif)
保存的關卡會被存在 StreamingAssets 資料夾,只要打包後就能分享給別人了。
![image display error, please report: [/devlog/nightmare-crafter/prototype-6.jpg]](/devlog/nightmare-crafter/prototype-6.jpg)
程式沒太多好說的,平台控制是拿Ultimate 2D Platformer Controller為基底修改,再加上老師要求的蹬牆跳功能而已。
量產階段
完成基礎概念後就進入量產階段了,讓隊伍加大開發腳步。
生物設計
遊戲的生物都交給組員 Kocha 繪製,但教授認為要求太低導致組員缺少表現機會,雖然我認為(依專案需求)不需要太精緻的視覺表現,但考量學校隊伍的性質我應該更顧慮組員才對。所以後續要求有提高標準,並採用更嚴格的過濾的方式(六選一)決定採用方案。
新的怪物要求有四種:基本款怪物、垂直遊蕩的怪物、會朝前方發射子彈的怪物,以及能對周圍一圈造成傷害的怪物。
![image display error, please report: [/devlog/nightmare-crafter/production-enemy-1.jpg]](/devlog/nightmare-crafter/production-enemy-1.jpg)
後面三張也要求補充編號與關鍵字,方便溝通
提高標準後收到的設計就細緻許多,我再選四隻作為採用方案。
- 基本款怪物:採用左上安康魚方案,因為教授偏好並且能達成「丟擲拋物線物體攻擊」的需求。
- 垂直遊蕩:採用 No.4 方案,個人偏好與動畫難易度考量。
- 一圈傷害:採用 No.4 方案,原因同上。
- 發射子彈:採用 No.1 方案,原因同上。
![image display error, please report: [/devlog/nightmare-crafter/production-enemy-2.jpg]](/devlog/nightmare-crafter/production-enemy-2.jpg)
玩家角色也用相同的六選一方法,評估後我決定採用 No.4 的齧齒軟體生物,主要原因也是動畫方便,至於方案 No.2 被我選做另一隻爬行怪物使用。
![image display error, please report: [/devlog/nightmare-crafter/production-player.jpg]](/devlog/nightmare-crafter/production-player.jpg)
選定角色後也讓他繪製動態,示意玩家操作時的各種動作。但原先的霰彈槍設計改掉了,教授比較喜歡噴吐攻擊。
![image display error, please report: [/devlog/nightmare-crafter/production-player-action.jpg]](/devlog/nightmare-crafter/production-player-action.jpg)
最後就是動畫化,我們採用逐幀圖集(Sprite Sheet)的方式播放動畫,組員 Kocha 因為沒有動畫軟體所以是憑感覺繪製的,沒有草圖、沒有播放也不疊圖,走的是一個直覺流,而且最終效果還不錯 www
![image display error, please report: [/devlog/nightmare-crafter/production-creatures-anim.jpg]](/devlog/nightmare-crafter/production-creatures-anim.jpg)
物件設計
遊戲的方塊與物件都交給組員 Izumige 設計,我提出十項要求的各三種設計變體:
- 方塊:踩到後破碎的方塊、會移動的方塊、會發射東西的方塊、輸送帶方塊、會爆炸的方塊。
- 物件:拉桿和門、加分道具、終點、紀錄點、傳送門。
![image display error, please report: [/devlog/nightmare-crafter/production-item-block.jpg]](/devlog/nightmare-crafter/production-item-block.jpg)
右下怪物門動態是組員 Izumige 自主追加的,教授很喜歡,我也是
決定採用的方塊有:玻璃(破碎方塊)、水母與海龜(移動平台)、尖齒和雷射眼(發射方塊)、海蛇群(輸送方塊)、沼氣魚(爆炸方塊)。
![image display error, please report: [/devlog/nightmare-crafter/production-block.jpg]](/devlog/nightmare-crafter/production-block.jpg)
決定採用物件有:三種款式的門、珍珠(加分道具)、神秘卷軸(終點)、水母(檢查點)、怪物門和簡單傳送門(傳送門)。
![image display error, please report: [/devlog/nightmare-crafter/production-item-1.jpg]](/devlog/nightmare-crafter/production-item-1.jpg)
![image display error, please report: [/devlog/nightmare-crafter/production-item-2.jpg]](/devlog/nightmare-crafter/production-item-2.jpg)
最後就是動畫,組員 Izumige 是使用 CSP EX 繪製的。我決定在這裡展示草圖播放的樣子,因為那些輔助的紅線看起來很酷。
![image display error, please report: [/devlog/nightmare-crafter/production-item-anim.gif]](/devlog/nightmare-crafter/production-item-anim.gif)
介面設計
最先與玩家接觸的元素是介面,為了整體完整度也得將臨時物件替換為適當素材才行。負責設計的是組員 Kocha,我的要求是玩家血量格、通用面板、倒數計時器和通用按鈕,每個要求需提供六種草圖方案。
![image display error, please report: [/devlog/nightmare-crafter/ui-design-2.jpg]](/devlog/nightmare-crafter/ui-design-2.jpg)
最終採用的是 No.1 水滴(血量格)、No.2 破碎(通用面板)、No.6 克蘇魯(計時器)與 No.1、2 的符文與石板(按鈕)。除此之外,老師蠻喜歡面板 No.4 怪手,所以也把手加入採用之一,上色輸出成素材。
![image display error, please report: [/devlog/nightmare-crafter/ui-design-3.jpg]](/devlog/nightmare-crafter/ui-design-3.jpg)
關卡設計
組員 XiaZelldert 也進行過紙上關卡設計,主要用於設計參考,部分美術要求就是從關卡草圖中提取的。
![image display error, please report: [/devlog/nightmare-crafter/level-design-1.jpg]](/devlog/nightmare-crafter/level-design-1.jpg)
原形完成後則讓他直接製做關卡,用基礎方塊(一般、彈跳、死亡)設計了十關,並進行初步測試。
![image display error, please report: [/devlog/nightmare-crafter/level-design-7.jpg]](/devlog/nightmare-crafter/level-design-7.jpg)
內容實裝
美術輸出的同時程式也完成需求的功能了,套上素材後就能讓完整度大幅提升!
活體生物
生物,包括玩家與怪物在內的所有生物。玩家能攻擊並殺死怪物,而怪物也會根據行為做出反饋。
- 主角:玩家操控的角色,能水平移動、跳躍、攀牆、蹬牆跳和攻擊。
![image display error, please report: [/devlog/nightmare-crafter/production-apply-player.gif]](/devlog/nightmare-crafter/production-apply-player.gif)
- 眼魚:在空中…水中?水平移動的生物,撞到牆壁後折返
- 爬行怪:在地面水平移動的生物,沒路或撞牆時折返
- 魷魚:垂直移動的生物,也是撞牆後折返
![image display error, please report: [/devlog/nightmare-crafter/production-apply-enemy-2.gif]](/devlog/nightmare-crafter/production-apply-enemy-2.gif)
- 蛞蝓:與遺蹟守衛相同,但玩家在前方時會噴吐酸液攻擊
- 水螅:原地漂浮,每隔一段時間會釋放脈衝傷害周圍所有生物
- 安康魚:最討人厭的怪物,會根據情況靠近、遠離玩家,並丟出頭上的球體攻擊目標
![image display error, please report: [/devlog/nightmare-crafter/production-apply-enemy-1.gif]](/devlog/nightmare-crafter/production-apply-enemy-1.gif)
方塊結構
各種方塊的效果和動畫實裝,以及遊戲中可互動的物件。
- 果凍:碰到果凍方塊會強制彈射。
- 觸手:碰到觸手方塊會受傷並回到存檔點。
- 海草方塊:進入海草會造成緩速效果。
![image display error, please report: [/devlog/nightmare-crafter/production-apply-tile-1.gif]](/devlog/nightmare-crafter/production-apply-tile-1.gif)
- 玻璃:踩到後會破碎,並在一定時間後恢復原狀
- 海龜:在固定範圍內水平移動的平台
- 水母:在固定範圍垂直平移動的平台
![image display error, please report: [/devlog/nightmare-crafter/production-apply-tile-2.gif]](/devlog/nightmare-crafter/production-apply-tile-2.gif)
- 海蛇:會緩慢推動在上面的物體
- 爆炸魚:碰到後會爆炸,摧毀範圍內的一切
![image display error, please report: [/devlog/nightmare-crafter/production-apply-tile-3.gif]](/devlog/nightmare-crafter/production-apply-tile-3.gif)
- 眼球:會定時朝左或上方發射雷射,貫穿所有阻礙與生物
- 尖齒:會觀察左方或上方,有生物出現的時候會射出牙齒子彈
![image display error, please report: [/devlog/nightmare-crafter/production-apply-tile-4.gif]](/devlog/nightmare-crafter/production-apply-tile-4.gif)
- 存檔點:可以保存受傷後返回的地點
- 三種門:碰到對應拉桿後可以開啟阻礙道路的門,其中一個會在幾秒後關閉
![image display error, please report: [/devlog/nightmare-crafter/production-apply-item-1.gif]](/devlog/nightmare-crafter/production-apply-item-1.gif)
- 傳送門:兩兩一對的傳送門,可以讓生物穿越地圖
![image display error, please report: [/devlog/nightmare-crafter/production-apply-item-2.gif]](/devlog/nightmare-crafter/production-apply-item-2.gif)
互動介面
遊戲的操作介面,雖然為了節省工作量重複使用相同素材,但套上美術後整個質感也大幅提升,下面就做個簡單對比。
- 主頁面:加上背景、標題和按鈕
![image display error, please report: [/devlog/nightmare-crafter/ui-compare-1.jpg]](/devlog/nightmare-crafter/ui-compare-1.jpg)
- 關卡選單:除了捲動頁面以外也加了分頁系統,讓列表能根據資料夾過濾關卡,避免混亂
![image display error, please report: [/devlog/nightmare-crafter/ui-compare-2.jpg]](/devlog/nightmare-crafter/ui-compare-2.jpg)
- 遊玩畫面:加上血量格和倒數計時框,以及結束畫面
![image display error, please report: [/devlog/nightmare-crafter/ui-compare-3.jpg]](/devlog/nightmare-crafter/ui-compare-3.jpg)
- 網格背景:把主要面板加上背景,選單按鈕加上邊框
![image display error, please report: [/devlog/nightmare-crafter/ui-compare-4.jpg]](/devlog/nightmare-crafter/ui-compare-4.jpg)
遊戲背景
主畫面和選單的背景是組員 Kocha 自主繪製的美術圖,完美適配。
![image display error, please report: [/devlog/nightmare-crafter/background-1.jpg]](/devlog/nightmare-crafter/background-1.jpg)
原本關卡當中也要製做背景,所以讓組員 Kocha 設計一些物件。
![image display error, please report: [/devlog/nightmare-crafter/background-2.jpg]](/devlog/nightmare-crafter/background-2.jpg)
但因為玩家製作的關卡位置不固定,考慮到製做難度就放棄複雜背景了,我改用 Shader 製做漸層與噪聲迷霧,效果其實也不錯。背景渲染是用世界座標計算的,只要放片背景跟著攝影機跑就行。
![image display error, please report: [/devlog/nightmare-crafter/background-3.gif]](/devlog/nightmare-crafter/background-3.gif)
編輯器背景也是用 Shader 繪製的,根據世界座標繪製網格。
![image display error, please report: [/devlog/nightmare-crafter/background-4.gif]](/devlog/nightmare-crafter/background-4.gif)
音樂音效
原先計劃沒有音效相關內容,但組員 XiaZelldert 剛好有過鑽研就交給他製作了。我錄了一個片段展示音效,感覺整個遊戲活了起來。
除此之外,遊戲的背景音樂也是他編曲的,這裡也放給各位欣賞。
測試打磨
該有都填充完畢後,就開始做各種測試和打磨了。組員 Kocha 給每個物件都添加了文本,可以在編輯介面中看到,裡面包括了我們的前期設定,歡迎自由探索。
![image display error, please report: [/devlog/nightmare-crafter/detail-description.jpg]](/devlog/nightmare-crafter/detail-description.jpg)
遊玩與編輯介面也將上了簡易教學提示,點擊左上角的問號即可開啟。
![image display error, please report: [/devlog/nightmare-crafter/detail-tutorial-1.jpg]](/devlog/nightmare-crafter/detail-tutorial-1.jpg)
為了展示不同物件的效果,我也做了簡單的教學關卡,製做關卡前建議先玩過。
![image display error, please report: [/devlog/nightmare-crafter/detail-tutorial-2.jpg]](/devlog/nightmare-crafter/detail-tutorial-2.jpg)
當然還有無休止的除錯迴圈,圖層錯誤、引用遺失、字體消失、音效錯誤循環、缺少防呆機制之類有的沒的問題。
![image display error, please report: [/devlog/nightmare-crafter/detail-bug.jpg]](/devlog/nightmare-crafter/detail-bug.jpg)
感謝閱讀
專案心得
遊戲發布在 Itch.io 上,歡迎下載試玩:https://angus945.itch.io/nightmare-crafter。
開發大概花了兩個半月的課餘時間,雖然因為時間限制無法讓組員完全發揮,但他們都是相當可靠的夥伴。在苛刻時限完成所有要求的 Kocha、低調的動畫大神 Izumige 與意料之外的音樂玩家 XiaZelldert,沒有他們不可有現在的成果,我對完成的作品相當滿意。
![image display error, please report: [/devlog/nightmare-crafter/result-1.jpg]](/devlog/nightmare-crafter/result-1.jpg)
這次專案我學到最多是專案管理,在畢專前有帶隊經驗是很大的幫助。
雖然文中展示的過程具有結構性,但實際情況並非如此,這次開發因為時間與個人經驗不足的關係沒有做詳細企劃,排程和發布工作也基本是憑感覺進行,所以發生過不少溝通失誤,最後幾周的趕工尤其嚴重。
![image display error, please report: [/devlog/nightmare-crafter/result-2.jpg]](/devlog/nightmare-crafter/result-2.jpg)
但踩過雷後也知道下次該怎麼做,有什麼事是要避免的了,進一步驅使我接觸更多遊戲企劃和專案管理的知識,如果前輩們有任何建議與推薦的資源再麻煩指出!!