創作內容

29 GP

[達人專欄] 【日誌】帶隊專案,關卡編輯器

作者:樂小呈│2024-06-23 13:40:55│巴幣:2,150│人氣:1026
這次分享的是大二下學期開發的 2D 平台關卡編輯器的製作過程!

轉載自個人網站!


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

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

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

所以我就接下了~

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

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

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

成員介紹
首先介紹一下成員,我們是南臺科大第 111 學年度的多樂系學生,目前為二年級(二下),專案成員一共有四位:
  • 小呈 Angus(我):程式、專案管理
  • Kocha:2D 生物設計、動畫、UI
  • Izumige:2D 物件設計、動畫
  • XiaZelldert:音樂音效

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


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

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

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

組員 XiaZelldert 也針劇情寫過文本,但我跟教授確認需求後就喊停了。必要需求只有以下幾項:
  • 一個 2D 平台動作關卡編輯器
  • 在規定的時間內,主角在血量不為零的狀態下,從起點移動到終點為過關
  • 有可以丟擲拋物線物體攻擊的敵人
  • 玩家可以蹬牆跳
  • 教材用,使用者為授與學生

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

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

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

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

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

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

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

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

不採用原因是設計和需求有落差,以編輯器為例,他繪製的是彈出式背包介面,類似 Minecraft 或 Terraria,但我們比較需要的是如 Rimworld、Oxygen Not Included 等常駐編輯器介面。

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

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

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

結果嘛…

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

新的怪物要求有四種:基本款怪物、垂直遊蕩的怪物、會朝前方發射子彈的怪物,以及能對周圍一圈造成傷害的怪物。
後面三張也要求補充編號與關鍵字,方便溝通     

提高標準後收到的設計就細緻許多,我再選四隻作為採用方案。
  • 基本款怪物:採用左上安康魚方案,因為教授偏好並且能達成「丟擲拋物線物體攻擊」的需求。
  • 垂直遊蕩:採用 No.4 方案,個人偏好與動畫難易度考量。
  • 一圈傷害:採用 No.4 方案,原因同上。
  • 發射子彈:採用 No.1 方案,原因同上。

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

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

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

物件設計
遊戲的方塊與物件都交給組員 Izumige 設計,我提出十項要求的各三種設計變體:
  • 方塊:踩到後破碎的方塊、會移動的方塊、會發射東西的方塊、輸送帶方塊、會爆炸的方塊。
  • 物件:拉桿和門、加分道具、終點、紀錄點、傳送門。

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

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

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

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

最終採用的是 No.1 水滴(血量格)、No.2 破碎(通用面板)、No.6 克蘇魯(計時器)與 No.1、2 的符文與石板(按鈕)。除此之外,老師蠻喜歡面板 No.4 怪手,所以也把手加入採用之一,上色輸出成素材。

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

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


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

活體生物
生物,包括玩家與怪物在內的所有生物。玩家能攻擊並殺死怪物,而怪物也會根據行為做出反饋。
  • 主角:玩家操控的角色,能水平移動、跳躍、攀牆、蹬牆跳和攻擊。

  • 眼魚:在空中…水中?水平移動的生物,撞到牆壁後折返
  • 爬行怪:在地面水平移動的生物,沒路或撞牆時折返
  • 魷魚:垂直移動的生物,也是撞牆後折返

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

方塊結構
各種方塊的效果和動畫實裝,以及遊戲中可互動的物件。
  • 果凍:碰到果凍方塊會強制彈射。
  • 觸手:碰到觸手方塊會受傷並回到存檔點。
  • 海草方塊:進入海草會造成緩速效果。

  • 玻璃:踩到後會破碎,並在一定時間後恢復原狀
  • 海龜:在固定範圍內水平移動的平台
  • 水母:在固定範圍垂直平移動的平台

  • 海蛇:會緩慢推動在上面的物體
  • 爆炸魚:碰到後會爆炸,摧毀範圍內的一切

  • 眼球:會定時朝左或上方發射雷射,貫穿所有阻礙與生物
  • 尖齒:會觀察左方或上方,有生物出現的時候會射出牙齒子彈

  • 存檔點:可以保存受傷後返回的地點
  • 三種門:碰到對應拉桿後可以開啟阻礙道路的門,其中一個會在幾秒後關閉

  • 傳送門:兩兩一對的傳送門,可以讓生物穿越地圖

互動介面
遊戲的操作介面,雖然為了節省工作量重複使用相同素材,但套上美術後整個質感也大幅提升,下面就做個簡單對比。
  • 主頁面:加上背景、標題和按鈕

  • 關卡選單:除了捲動頁面以外也加了分頁系統,讓列表能根據資料夾過濾關卡,避免混亂

  • 遊玩畫面:加上血量格和倒數計時框,以及結束畫面

  • 網格背景:把主要面板加上背景,選單按鈕加上邊框


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

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

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

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

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

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

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

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

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

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


感謝閱讀

專案心得
遊戲發布在 Itch.io 上,歡迎下載試玩:https://angus945.itch.io/nightmare-crafter

開發大概花了兩個半月的課餘時間,雖然因為時間限制無法讓組員完全發揮,但他們都是相當可靠的夥伴。在苛刻時限完成所有要求的 Kocha、低調的動畫大神 Izumige 與意料之外的音樂玩家 XiaZelldert,沒有他們不可有現在的成果,我對完成的作品相當滿意。

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

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

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

引用網址:https://home.gamer.com.tw/TrackBack.php?sn=5955459
All rights reserved. 版權所有,保留一切權利

相關創作

留言共 2 篇留言

新手方
厲害

06-23 17:11

樂小呈
第一次帶還蠻亂的,之後專題應該會有更正規的管理方式 :D06-23 17:27
Ride
很猛欸 給學弟GP奉上
但願學弟的遊戲製作魂能不斷燃燒

06-23 17:57

樂小呈
謝謝,希望專題能交出好作品 ><06-23 19:01
我要留言提醒:您尚未登入,請先登入再留言

29喜歡★angus945 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:【生活】 朋友、聊天和谷... 後一篇:【學習】企劃、眼界和暑假...

追蹤私訊切換新版閱覽

作品資料夾

hyzgdivina喜歡虹咲的LLer
我的小屋裡有很多Hoenn繪師又香又甜的虹咲漫畫翻譯!歡迎大家來我的小屋坐坐喔~看更多我要大聲說昨天20:24


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】