這次分享的是大二下學期開發的 2D 平台關卡編輯器的製作過程!

前言

這次專案是二上期末跟《故事編寫》課老師聊到的東西,他認為有輔助軟體能對教學品質產生幫助,透過實作避免學生的知識停留在理論層面。

主要從關卡設計的角度深入,雖然設計初期會用紙上談兵的方式構思關卡,但無法驗證是一大缺點,他希望有工具能讓學生製做關卡並實際遊玩。

雖然市面上有許多相似性質的遊戲(如:Super Mario Maker),但考量成本不可能給每個學生配發,也不可能公然用盜版教學,找人開發新的還是最保險。

所以我就接下了~

但談了交換條件,老師答應幫我處理小說的出版事宜(我在課程中完成的),流程也進行的差不多了的樣子,期待出版後收到的回饋。除此之外還有人培學分能拿,對減輕後續課業壓力有不少幫助,賺爛了賺爛了

總之這案子告一段落了,玩家可以製作並遊玩自己的關卡,遊戲畫面如下:

 

這篇是製作過程的紀錄文章,內容與實際時序大致相符,但有針對閱讀流暢性調整過編排。

成員介紹

首先介紹一下成員,我們是南臺科大第 111 學年度的多樂系學生,目前為二年級(二下),專案成員一共有四位:

  • 小呈 Angus(我):程式、專案管理
  • Kocha:2D 生物設計、動畫、UI
  • Izumige:2D 物件設計、動畫
  • XiaZelldert:音樂音效
image display error, please report: [/devlog/nightmare-crafter/preface-member.png]

雖然大二,但我在入學前就有接觸過五年遊戲開發,所以文中提及的內容可能超出學校的常規進度。開發流程是根據我自身的知識進行的,如果有能改進的部分再麻煩前輩指出。

image display error, please report: [/devlog/nightmare-crafter/preface-meteorite.jpg]

概念設計

專案的第一步是概念設計,為確認方向我讓組員進行了幾次概念發想。以下正文。

情境設定

首先是情境設定,為了給美術一個起點發想,我們從幾個方案中採用了克蘇魯題材,並設計了有趣的情境:在深海巨型菊石中的城市。

我們也畫了幾張分鏡圖,左上是我畫的,左下與右側是組員 XiaZelldert 與 Izumige 繪製的…有圖才知道大家理解各異,連菊石的存在方式(活、死、躺著、直立)都沒有共識。

image display error, please report: [/devlog/nightmare-crafter/concept.jpg]

組員 XiaZelldert 也針劇情寫過文本,但我跟教授確認需求後就喊停了。必要需求只有以下幾項:

  • 一個 2D 平台動作關卡編輯器
  • 在規定的時間內,主角在血量不為零的狀態下,從起點移動到終點為過關
  • 有可以丟擲拋物線物體攻擊的敵人
  • 玩家可以蹬牆跳
  • 教材用,使用者為授與學生

速寫草圖

雖然砍了劇情文本,但情境設定還是沿用,我要求美術們以此繪製數張草圖,設計遊戲使用的方塊和生物。

首先是組員 Kocha 設計的草圖,方塊和怪物各八種。

image display error, please report: [/devlog/nightmare-crafter/concept-kocha-1.jpg]

還有組員 Izumige 繪製的草圖,四種方塊和九隻怪物。

image display error, please report: [/devlog/nightmare-crafter/concept-izumige-1.jpg]

註:專案初期因為需求考量,我有限制美術設計時的精緻度。

配色嘗試

草圖完成後接著嘗試配色,考量複雜度問題我採用了組員 Kocha 的怪物與 Izumige 的方塊設計,從中選出三個方案並要求他們繪製三種配色變體。

image display error, please report: [/devlog/nightmare-crafter/concept-color-1.jpg]

後續進行了數次協調,改變方塊邊框、飽和度與明度等,也透過柏林噪聲提升質感(這什麼魔法?),再從方案中選出最後要採用的一項。

image display error, please report: [/devlog/nightmare-crafter/concept-color-3.jpg]

給剩餘的草圖上色後就告一段落了,感謝術們耐心陪我討論。

image display error, please report: [/devlog/nightmare-crafter/concept-color-4.jpg]

介面草圖

專案初期需要介面參考,包括主頁面、選單、編輯器與遊玩畫面,我讓組員 XiaZelldert 嘗試繪製了一些草圖,但後來沒有採用。

image display error, please report: [/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]

所以我後來在 Untiy 做了新的的介面給原型使用,將選單固定在畫面左側與底部。

image display error, please report: [/devlog/nightmare-crafter/concept-ui-3.jpg]

程式原型

在美術們發揮創意的同時程式工作也同步進行著。剛開始 我想趁機會驗證我對遊戲模組的理解,根據之先前的筆記 【筆記】如何讓遊戲支援模組開發 嘗試實作。

我拿之前做到一半的框架修改, 讓遊戲讀取 StreamingAssets 中的文件建構物件、載入圖片,甚至想用 Lua 將程式碼外部化。

image display error, please report: [/devlog/nightmare-crafter/prototype-1.jpg]

結果嘛…

不能說失敗,只能說是一塌糊塗,原因有三點。

首先是技術難題,除了基礎架構的知識不充足,我對資料驅動 (Data-Driven) 、Lua (XLua) 等進階技術也還不熟悉,資料載入與行為串接都相當粗糙。

雖然成功讀取定義檔並生成實體在場景中,還能操控玩家(螃蟹)攻擊怪物,但程式碼的維護跟擴展是個惡夢,硬要繼續恐怕會浪費更多資源。

image display error, please report: [/devlog/nightmare-crafter/prototype-2.gif]

第二是企劃部分,我們製作前沒有進行正式企劃,很多東西是同步和想到才加的,所以程式編寫時也不知道物件需要的 屬性,血量圖片等都是遇到才補。

要做那麼複雜的話這些需求都該先預估好才對,但…就算要先企劃,以我目前的能力也做不好那麼詳細的預估。

最後是需求問題,老師的要求不是能讓玩家修改生物、腳本和圖片的遊戲,而是能製作關卡的編輯器。雖然有學到東西,但從專案管理的角度看則浪費了整個月的工作量,或是賠了整個月的資金(如果有),還好這不是商案…

但之前工作時也犯過一樣的錯 D:

最後我就決定止損,把原先的程式全部砍掉,改用最基礎的 Resources 載入、用 Prefab 組合物件,以及用繼承實作不同行為。簡單快速也沒技術深度,但是符合需求的樸實方案。

image display error, please report: [/devlog/nightmare-crafter/prototype-3.jpg]

總之花了幾天的時間把原本的功能修復完,玩家能能從列表新建關卡,進入編輯器。

編輯方式是從左測選擇類別後(圖層),選擇物件(筆刷)後在網格上透過左鍵繪製、右鍵擦除,而畫面右邊會顯示當前物件的描述。編輯完在右上方輸入資料夾和關卡名稱就能保存關卡了。

image display error, please report: [/devlog/nightmare-crafter/prototype-4.gif]

回列表就會看到關卡被顯示出來,能用遊玩模式進入。在遊玩模式中玩家抵達終點就算贏,但在這之前如果時間或血量先歸零就輸了。

image display error, please report: [/devlog/nightmare-crafter/prototype-5.gif]

保存的關卡會被存在 StreamingAssets 資料夾,只要打包後就能分享給別人了。

image display error, please report: [/devlog/nightmare-crafter/prototype-6.jpg]

程式沒太多好說的,平台控制是拿Ultimate 2D Platformer Controller為基底修改,再加上老師要求的蹬牆跳功能而已。

量產階段

完成基礎概念後就進入量產階段了,讓隊伍加大開發腳步。

生物設計

遊戲的生物都交給組員 Kocha 繪製,但教授認為要求太低導致組員缺少表現機會,雖然我認為(依專案需求)不需要太精緻的視覺表現,但考量學校隊伍的性質我應該更顧慮組員才對。所以後續要求有提高標準,並採用更嚴格的過濾的方式(六選一)決定採用方案。

新的怪物要求有四種:基本款怪物、垂直遊蕩的怪物、會朝前方發射子彈的怪物,以及能對周圍一圈造成傷害的怪物。

image display error, please report: [/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]

玩家角色也用相同的六選一方法,評估後我決定採用 No.4 的齧齒軟體生物,主要原因也是動畫方便,至於方案 No.2 被我選做另一隻爬行怪物使用。

image display error, please report: [/devlog/nightmare-crafter/production-player.jpg]

選定角色後也讓他繪製動態,示意玩家操作時的各種動作。但原先的霰彈槍設計改掉了,教授比較喜歡噴吐攻擊。

image display error, please report: [/devlog/nightmare-crafter/production-player-action.jpg]

最後就是動畫化,我們採用逐幀圖集(Sprite Sheet)的方式播放動畫,組員 Kocha 因為沒有動畫軟體所以是憑感覺繪製的,沒有草圖、沒有播放也不疊圖,走的是一個直覺流,而且最終效果還不錯 www

image display error, please report: [/devlog/nightmare-crafter/production-creatures-anim.jpg]

物件設計

遊戲的方塊與物件都交給組員 Izumige 設計,我提出十項要求的各三種設計變體:

  • 方塊:踩到後破碎的方塊、會移動的方塊、會發射東西的方塊、輸送帶方塊、會爆炸的方塊。
  • 物件:拉桿和門、加分道具、終點、紀錄點、傳送門。
image display error, please report: [/devlog/nightmare-crafter/production-item-block.jpg]

右下怪物門動態是組員 Izumige 自主追加的,教授很喜歡,我也是

決定採用的方塊有:玻璃(破碎方塊)、水母與海龜(移動平台)、尖齒和雷射眼(發射方塊)、海蛇群(輸送方塊)、沼氣魚(爆炸方塊)。

image display error, please report: [/devlog/nightmare-crafter/production-block.jpg]

決定採用物件有:三種款式的門、珍珠(加分道具)、神秘卷軸(終點)、水母(檢查點)、怪物門和簡單傳送門(傳送門)。

image display error, please report: [/devlog/nightmare-crafter/production-item-1.jpg]

image display error, please report: [/devlog/nightmare-crafter/production-item-2.jpg]

最後就是動畫,組員 Izumige 是使用 CSP EX 繪製的。我決定在這裡展示草圖播放的樣子,因為那些輔助的紅線看起來很酷。

image display error, please report: [/devlog/nightmare-crafter/production-item-anim.gif]

介面設計

最先與玩家接觸的元素是介面,為了整體完整度也得將臨時物件替換為適當素材才行。負責設計的是組員 Kocha,我的要求是玩家血量格、通用面板、倒數計時器和通用按鈕,每個要求需提供六種草圖方案。

image display error, please report: [/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]

關卡設計

組員 XiaZelldert 也進行過紙上關卡設計,主要用於設計參考,部分美術要求就是從關卡草圖中提取的。

image display error, please report: [/devlog/nightmare-crafter/level-design-1.jpg]

原形完成後則讓他直接製做關卡,用基礎方塊(一般、彈跳、死亡)設計了十關,並進行初步測試。

image display error, please report: [/devlog/nightmare-crafter/level-design-7.jpg]

內容實裝

美術輸出的同時程式也完成需求的功能了,套上素材後就能讓完整度大幅提升!

活體生物

生物,包括玩家與怪物在內的所有生物。玩家能攻擊並殺死怪物,而怪物也會根據行為做出反饋。

  • 主角:玩家操控的角色,能水平移動、跳躍、攀牆、蹬牆跳和攻擊。
image display error, please report: [/devlog/nightmare-crafter/production-apply-player.gif]

  • 眼魚:在空中…水中?水平移動的生物,撞到牆壁後折返
  • 爬行怪:在地面水平移動的生物,沒路或撞牆時折返
  • 魷魚:垂直移動的生物,也是撞牆後折返
image display error, please report: [/devlog/nightmare-crafter/production-apply-enemy-2.gif]

  • 蛞蝓:與遺蹟守衛相同,但玩家在前方時會噴吐酸液攻擊
  • 水螅:原地漂浮,每隔一段時間會釋放脈衝傷害周圍所有生物
  • 安康魚:最討人厭的怪物,會根據情況靠近、遠離玩家,並丟出頭上的球體攻擊目標
image display error, please report: [/devlog/nightmare-crafter/production-apply-enemy-1.gif]

方塊結構

各種方塊的效果和動畫實裝,以及遊戲中可互動的物件。

  • 果凍:碰到果凍方塊會強制彈射。
  • 觸手:碰到觸手方塊會受傷並回到存檔點。
  • 海草方塊:進入海草會造成緩速效果。
image display error, please report: [/devlog/nightmare-crafter/production-apply-tile-1.gif]

  • 玻璃:踩到後會破碎,並在一定時間後恢復原狀
  • 海龜:在固定範圍內水平移動的平台
  • 水母:在固定範圍垂直平移動的平台
image display error, please report: [/devlog/nightmare-crafter/production-apply-tile-2.gif]

  • 海蛇:會緩慢推動在上面的物體
  • 爆炸魚:碰到後會爆炸,摧毀範圍內的一切
image display error, please report: [/devlog/nightmare-crafter/production-apply-tile-3.gif]

  • 眼球:會定時朝左或上方發射雷射,貫穿所有阻礙與生物
  • 尖齒:會觀察左方或上方,有生物出現的時候會射出牙齒子彈
image display error, please report: [/devlog/nightmare-crafter/production-apply-tile-4.gif]

  • 存檔點:可以保存受傷後返回的地點
  • 三種門:碰到對應拉桿後可以開啟阻礙道路的門,其中一個會在幾秒後關閉
image display error, please report: [/devlog/nightmare-crafter/production-apply-item-1.gif]

  • 傳送門:兩兩一對的傳送門,可以讓生物穿越地圖
image display error, please report: [/devlog/nightmare-crafter/production-apply-item-2.gif]

互動介面

遊戲的操作介面,雖然為了節省工作量重複使用相同素材,但套上美術後整個質感也大幅提升,下面就做個簡單對比。

  • 主頁面:加上背景、標題和按鈕
image display error, please report: [/devlog/nightmare-crafter/ui-compare-1.jpg]

  • 關卡選單:除了捲動頁面以外也加了分頁系統,讓列表能根據資料夾過濾關卡,避免混亂
image display error, please report: [/devlog/nightmare-crafter/ui-compare-2.jpg]

  • 遊玩畫面:加上血量格和倒數計時框,以及結束畫面
image display error, please report: [/devlog/nightmare-crafter/ui-compare-3.jpg]

  • 網格背景:把主要面板加上背景,選單按鈕加上邊框
image display error, please report: [/devlog/nightmare-crafter/ui-compare-4.jpg]

遊戲背景

主畫面和選單的背景是組員 Kocha 自主繪製的美術圖,完美適配。

image display error, please report: [/devlog/nightmare-crafter/background-1.jpg]

原本關卡當中也要製做背景,所以讓組員 Kocha 設計一些物件。

image display error, please report: [/devlog/nightmare-crafter/background-2.jpg]

但因為玩家製作的關卡位置不固定,考慮到製做難度就放棄複雜背景了,我改用 Shader 製做漸層與噪聲迷霧,效果其實也不錯。背景渲染是用世界座標計算的,只要放片背景跟著攝影機跑就行。

image display error, please report: [/devlog/nightmare-crafter/background-3.gif]

編輯器背景也是用 Shader 繪製的,根據世界座標繪製網格。

image display error, please report: [/devlog/nightmare-crafter/background-4.gif]

音樂音效

原先計劃沒有音效相關內容,但組員 XiaZelldert 剛好有過鑽研就交給他製作了。我錄了一個片段展示音效,感覺整個遊戲活了起來。

 

除此之外,遊戲的背景音樂也是他編曲的,這裡也放給各位欣賞。

 

測試打磨

該有都填充完畢後,就開始做各種測試和打磨了。組員 Kocha 給每個物件都添加了文本,可以在編輯介面中看到,裡面包括了我們的前期設定,歡迎自由探索。

image display error, please report: [/devlog/nightmare-crafter/detail-description.jpg]

遊玩與編輯介面也將上了簡易教學提示,點擊左上角的問號即可開啟。

image display error, please report: [/devlog/nightmare-crafter/detail-tutorial-1.jpg]

為了展示不同物件的效果,我也做了簡單的教學關卡,製做關卡前建議先玩過。

image display error, please report: [/devlog/nightmare-crafter/detail-tutorial-2.jpg]

當然還有無休止的除錯迴圈,圖層錯誤、引用遺失、字體消失、音效錯誤循環、缺少防呆機制之類有的沒的問題。

image display error, please report: [/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]

這次專案我學到最多是專案管理,在畢專前有帶隊經驗是很大的幫助。

雖然文中展示的過程具有結構性,但實際情況並非如此,這次開發因為時間與個人經驗不足的關係沒有做詳細企劃,排程和發布工作也基本是憑感覺進行,所以發生過不少溝通失誤,最後幾周的趕工尤其嚴重。

image display error, please report: [/devlog/nightmare-crafter/result-2.jpg]

但踩過雷後也知道下次該怎麼做,有什麼事是要避免的了,進一步驅使我接觸更多遊戲企劃和專案管理的知識,如果前輩們有任何建議與推薦的資源再麻煩指出!!