中州科技大學 多媒體與遊戲發展科學系 實務專題 Construct 2 2D 遊戲製作 業經指導教授認可 指導教師簽名 : 審查教師簽名 : 系主任簽名 : 中華民國一 四年一月 七日

Similar documents
系所名稱 證照代碼 證照名稱 國內 / 級數 / 分國外數 證照類別 發照單位 Adobe Certified Associate in Web Communication Adobe Certified Associate in Web Communication using A

509 (ii) (iii) (iv) (v) 200, , , , C 57

Microsoft Word - MP2018_Report_Chi _12Apr2012_.doc

南華大學數位論文

李天命的思考藝術

皮肤病防治.doc

性病防治

中国南北特色风味名菜 _一)

全唐诗24

01 用 ActionScript 3.0 開始認識 Flash CS3 Flash 是應用在網路上非常流行且高互動性的多媒體技術, 由於擁有向量圖像體積小的優點, 而且 Flash Player 也很小巧精緻, 很快的有趣的 Flash 動畫透過設計師的創意紅遍了整個網際網路 雖然很多人都對 Fl

「香港中學文言文課程的設計與教學」單元設計範本

全唐诗28

穨學前教育課程指引.PDF

眼病防治

中国南北特色风味名菜 _八)


穨ecr2_c.PDF

電腦相關罪行跨部門工作小組-報告書

i

发展党员工作手册

i

39898.indb


一、

-i-

Microsoft Word - 强迫性活动一览表.docx

Microsoft Word - Panel Paper on T&D-Chinese _as at __final_.doc

江苏宁沪高速公路股份有限公司.PDF

绝妙故事

榫 卯 是 什 麼? 何 時 開 始 應 用 於 建 築 中? 38 中 國 傳 統 建 築 的 屋 頂 有 哪 幾 種 形 式? 40 大 內 高 手 的 大 內 指 什 麼? 42 街 坊 四 鄰 的 坊 和 街 分 別 指 什 麼? 44 北 京 四 合 院 的 典 型 格 局 是 怎 樣 的

尿路感染防治.doc

心理障碍防治(下).doc


2. 我 沒 有 說 實 話, 因 為 我 的 鞋 子 其 實 是 [ 黑 色 / 藍 色 / 其 他 顏 色.]. 如 果 我 說 我 現 在 是 坐 著 的, 我 說 的 是 實 話 嗎? [ 我 說 的 對 還 是 不 對 ]? [ 等 對 方 回 答 ] 3. 這 是 [ 實 話 / 對 的

14A 0.1%5% 14A 14A

(Chi)_.indb

穨_2_.PDF

Microsoft Word - Paper on PA (Chi)_ docx

Page i

<4D F736F F D203938BEC7A67EABD7B942B0CAC15AC075B3E6BF57A9DBA5CDC2B2B3B92DA5BFBD542E646F63>

捕捉儿童敏感期

人為疏失 人與人之間的溝通合作, 往往是事故的最終防線, 若能發揮團隊合作的功能, 則比較能克服其他因素所造成的危害

世界名画及画家介绍(四).doc

CU0594.pdf

Autodesk Product Design Suite Standard 系統統需求 典型使用用者和工作流程 Autodesk Product Design Suite Standard 版本為為負責建立非凡凡產品的設計師師和工程師, 提供基本概念設計計和製圖工具, 以取得令人驚驚嘆

樹 木 管 理 專 責 小 組 報 告 人 樹 共 融 綠 滿 家 園

Teaching kit_A4_part4.indd

緒 言 董 事 會 宣 佈, 為 能 更 具 效 率 調 配 本 集 團 內 的 資 金 有 效 降 低 集 團 的 對 外 貸 款, 並 促 進 本 集 團 內 公 司 間 的 結 算 服 務, 於 2016 年 9 月 30 日, 本 公 司 中 糧 財 務 與 管 理 公 司 訂 立 財 務

目 录 院 领 导 职 责... 1 院 长 职 责... 1 医 疗 副 院 长 职 责... 1 教 学 副 院 长 职 责... 2 科 研 副 院 长 职 责... 2 后 勤 副 院 长 职 责... 3 主 管 南 院 区 副 院 长 职 责... 3 党 委 书 记 职 责... 4

<4D F736F F D20A4A4B0EAB371AB4FB3E65FA4A4A4E5AAA95F5F >

石家庄~3

(i) (ii) (iii) (iv) (v) (vi) (vii) (viii) (ix) (x) (xi) 60.99%39.01%

中医疗法(下).doc

使用手冊

群科課程綱要總體課程計畫書

II II


南華大學數位論文

輕鬆學 Dreamweaver CS5 網頁設計..\Example\Ch0\ \.html..\example\ch0\ \mouse.txt..\example\ch0\ \ _Ok.html 學習重點 JavaScript 複製程式碼 mouse.txt Ctrl+C Ctrl+C 0-4

iziggi

vi 黃 帝 內 經 即 學 即 用 別 做 反 自 然 的 事 053 成 年 人 應 該 斷 奶 055 吃 肉 吃 素 因 人 而 異 057 要 分 清 飢 和 餓 058 生 活 現 代 化 與 本 能 退 化 061 調 神 就 是 調 節 奏 063 想 冬 泳, 先 問 問 自 己

中華民國第 四 十 七 屆中小學科學展覽會

應 邀 出 席 者 布 致 樂 先 生 助 理 項 目 經 理 ( 建 校 )13 教 育 局 陳 永 相 先 生 高 級 工 程 師 / 客 戶 服 務 ( 香 港 及 離 島 區 ) 水 務 署 劉 兆 機 先 生 工 程 師 / 客 戶 服 務 ( 申 請 供 水 ) 大 嶼 山 水 務 署

第 2 頁 (a) 擔 任 機 場 擴 建 統 籌 辦 總 監 的 首 席 政 府 工 程 師 職 位 第 3 點 ) ; (b) 擔 任 ( 機 場 擴 建 統 籌 辦 ) 的 首 長 級 丙 級 政 務 官 職 位 ; 以 及 (c) 擔 任 總 助 理 ( 機 場 擴 建 統 籌 辦 ) 的

cgn


Chapter 3 Camera Raw Step negative clarity +25 ] P / Step 4 0 ( 下一頁 ) Camera Raw Chapter 3 089

untitled

VI. 知 识 产 权 及 个 人 资 料 25 VII. 鸣 谢 拨 款 资 助 28 VIII. 查 询 29 IX. 不 具 约 束 力 的 协 议 29 X. 其 他 29 附 件 收 集 个 人 资 料 声 明 31 注 : 1. 本 指 引 应 与 青 年 发 展 基 金 辖 下 的 具

中医疗法(上).doc

香 港 舞 蹈 總 會    北 京 舞 蹈 學 院

Microsoft Word - report final.doc

7 貪食蛇 7-1 設計蛇移動的動作 畫出 貪食蛇 1 Scratch 小叮嚀 2 ( ) 3 141

(As at 28

最新监察执法全书(七十五).doc

Microsoft Word - EDB Panel Paper 2016 (Chi)_finalr

Microsoft Word - 結案報告.doc

二零零六年一月二十三日會議

厨房小知识(四)

妇女更年期保健.doc

小儿传染病防治(上)

<4D F736F F D B875B9B5A448ADFBBADEB27AA740B77EA4E2A5555FA95EAED6A641ADD75F2E646F63>

女性青春期保健(下).doc

避孕知识(下).doc

孕妇饮食调养(下).doc

禽畜饲料配制技术(一).doc

中老年保健必读(十一).doc

i

怎样使孩子更加聪明健康(七).doc

i

马太亨利完整圣经注释—雅歌

_Chi.ps, page Preflight ( _Chi.indd )

九龍城區議會

ii 初立鵬弟兄見證 第丅章 第四章 第五章 第六章 第丂章 第八章 盐皀味道 天津王金环姊妹皀见证 主是至大医生 主内郭英娥姊妹皀见证 爱是永不止息 天津赵兰生弟兄皀见证 我所认识皀刜立鹏弟兄 北京王济桓姊妹皀见证 刜伯伯事 丅亊...130

Adobe Photoshop PDF


Microsoft Word - _m30.doc

目 录 一 专 业 建 设 规 划 和 人 才 培 养 方 案 (25 分, 自 评 :25) 专 业 定 位 及 专 业 建 设 规 划 专 业 设 置 适 应 经 济 社 会 的 发 展 需 要, 符 合 我 校 办 学 宗 旨 及 十 二 五 发 展 规


Microsoft Word - Entry-Level Occupational Competencies for TCM in Canada200910_ch _2_.doc

Transcription:

中州科技大學 多媒體與遊戲發展科學系 103 學年度實務專題 Construct 2 2D 遊戲製作 專題生 :D10036250 楊承恩 ( 組長 ) D10036201 吳禎鎔 D10036218 陳重宇 D10036221 譚琮耀 D10036230 張祥助 指導教授 : 黃建基博士 中華民國一 四年一月 七日

中州科技大學 多媒體與遊戲發展科學系 實務專題 Construct 2 2D 遊戲製作 業經指導教授認可 指導教師簽名 : 審查教師簽名 : 系主任簽名 : 中華民國一 四年一月 七日

中州科技大學專題報告授權同意書 本授權書所授權之報告為本組在中州科技大學 103 學年度第 1 學期多媒體與遊戲發展科學系多媒體四甲班修習專題製作課程之報告 專題報告名稱 : Construct 2 2D 遊戲製作作者 楊承恩 吳禎鎔 陳重宇 譚琮耀 張祥助 本人具有著作財產權之論文全文資料, 已非專屬 無償授權予中州科技大學圖書館, 為學術研究之目的, 得不限時間 地域與次數以各種方式重製, 提供讀者基於個人非營利性質之線上檢索 閱覽 下載或列印 指導老師姓名 : 學生簽名 : 學號 : ( 親筆正楷 ) ( 務必填寫 ) 中華民國 年 月 日

摘要此次專題的研究是與彰化縣警察局少年隊進行產學合作, 以反毒 反飆車 反幫派為主, 製作出一款具有教育宣導性質的 2D 網頁遊戲 我們首先進行遊戲構思的腳本製作, 並且決定使用 Construct 2 作為製作這次遊戲的遊戲引擎, 接續則是針對每個團員的專長進行工作的分配, 最後則是把每個團員的成果進行最後的整合與修改並且成功的完成此產學案與專題的製作 在進行製作的過程中, 發現要完成一個遊戲並不是一人孤軍奮戰就可以完成的, 團隊的溝通與協調互動是一個團隊成功的一個重要因素

目錄第一章研究動機...1 第二章文獻探討...2 第三章研究目的...4 第四章研究方法...5 4-1 專題製作環境及設備...5 4-2 使用軟體...6 4-2-1 遊戲引擎 -Construct 2...7 4-2-2 美工 -Adobe PhotoShop...7 4-2-3 音效 -Music Maker...9 4-2-4 腳本 -Storyboard...9 4-2-5 文書 -Microsoft Word...10 第五章研究步驟...11 5-1 專題製作流程...11 5-2 遊戲製作分工流程...12 5-3 遊戲腳本 Storyboard...13 5-4 組員工作分配...16 5-5 甘特圖...16 5-6 遊戲設定...17 i

5-7 遊戲運行流程...19 5-8 遊戲程式部分...20 5-8-1 製作理念...20 5-8-2 製作內容...21 5-9 遊戲音效部分...56 5-9-1 製作理念...56 5-9-2 製作內容...56 5-9-3 所需音效...60 5-10 遊戲美工部分...61 5-10-1 製作理念...61 5-10-2 製作內容...62 5-10-3 美工人物繪製部分...65 5-10-4 美工場景繪製部分...69 5-10-5 美工其餘物件部分...70 5-11 Bug 測試...72 5-12 遭遇到的困難與解決...73 第六章研究成果...74 第七章結論與未來展望...81 7-1 結論...81 ii

7-2 未來展望...81 第八章參考文獻...82 附錄 1...84 iii

圖目錄圖 2-1 俄羅斯方塊 小蜜蜂 小精靈...2 圖 4-1 遊戲工廠設備平面圖...5 圖 4-2 遊戲工廠實景圖...6 圖 4-3 使用軟體圖...6 圖 4-4 Construct 2...7 圖 4-5 PhotoShop...7 圖 4-6 Corel Painter...8 圖 4-7 Adobe Flash...8 圖 4-8 Music Maker...9 圖 4-9 Toon Boom Storyboard...9 圖 4-10 Microsoft Word...10 圖 5-1 流程圖...11 圖 5-2 遊戲製作流程圖...12 圖 5-3 第一關反毒腳本 1...13 圖 5-4 第一關反毒腳本 2...13 圖 5-5 第二關反飆車腳本 1...13 圖 5-6 第二關反飆車腳本 2...13 圖 5-7 第二關反飆車腳本 3...14 iv

圖 5-8 第二關反飆車腳本 4...14 圖 5-9 第二關反飆車腳本 5...14 圖 5-10 第二關反飆車腳本 6...14 圖 5-11 第三關反幫派腳本 1...15 圖 5-12 第三關反幫派腳本 2...15 圖 5-13 第二關反幫派腳本 3...15 圖 5-14 甘特圖...16 圖 5-15 遊戲操作按鍵...18 圖 5-16 遊戲進行流程圖...19 圖 5-17 LF2 遊戲畫面...20 圖 5-18 程式設計樹狀圖...21 圖 5-19 Music Maker 軟體介面...57 圖 5-20 從素材區選取素材置入音軌區編輯...57 圖 5-21 音軌區編輯素材...58 圖 5-22 開啟素材屬性...58 圖 5-23 素材屬性面板...59 圖 5-24 匯出音效檔...59 圖 5-25 使用 Photoshop 製作遊戲人物與動作...62 圖 5-26 人物動作製作理念...62 v

圖 5-27 人物動態分鏡流程...63 圖 5-28 匯入 Adobe Flash 軟體製作 GIF 檔...63 圖 5-29 由 Adobe Flash 軟體中設定播放影格, 並把動作的分鏡圖丟進每個影格製成 GIF 檔...64 圖 5-30 警察移動分鏡圖...65 圖 5-31 警棍攻擊分鏡圖...65 圖 5-32 小槍攻擊分鏡圖...66 圖 5-33 警查死亡分鏡圖...66 圖 5-34 販毒者移動分鏡圖...66 圖 5-35 販毒者置毒分鏡圖...67 圖 5-36 飆車族移動分鏡圖...67 圖 5-37 幫派 BOSS 移動分鏡圖...68 圖 5-38 幫派 BOSS 舉槍分鏡圖...68 圖 5-39 幫派 BOSS 射擊分鏡圖...68 圖 5-40 幫派 BOSS 死亡分鏡圖...68 圖 5-41 第一關 : 操場製作者 : 林庭輝...69 圖 5-42 第二關 : 十字路口製作者 : 吳禎鎔 / 張祥助...69 圖 5-43 第三關 : 工廠製作者 : 張祥助...70 圖 5-44 背景製作者 : 林庭輝...70 vi

圖 5-45 難度選擇按鈕製作者 : 林庭輝...70 圖 5-46 選單背景製作者 : 林庭輝...71 圖 5-47 開始遊戲按鈕製作者 : 林庭輝...71 圖 5-48 遊戲說明鈕製作者 : 林庭輝...71 圖 5-49 下一關指示箭頭製作者 : 張祥助...71 圖 5-50 毒品製作者 : 林庭輝...71 圖 5-51 藥品製作者 : 林庭輝...71 圖 6-1 遊戲開頭畫面...74 圖 6-2 遊戲操作畫面...75 圖 6-3 第一關遊戲畫面...75 圖 6-4 第二關遊戲畫面...76 圖 6-5 第三關遊戲畫面...76 圖 6-6 過關後警告標語...77 圖 6-7 Storyboard& 遊戲影片...78 圖 6-8 彰化少年警察隊官網遊戲連結...79 圖 6-9 中州深度報導...80 圖 6-10 中央通訊社報導...81 vii

表目錄表 5-1 工作分配與內容...16 表 5-2 遊戲場景與內容設定...17 表 5-3 關卡難度區分...17 表 5-4 人物與共通物件介紹...22 表 5-5 場景物件...23 表 5-6 場景物件 ( 續 )...24 表 5-7 怪物物件...25 表 5-8 文字物件...26 表 5-9 怪物物件...27 表 5-10 怪物物件...28 表 5-11 遊戲變數...29 表 5-12 遊戲變數 ( 續 )...30 表 5-13 初始通用設定...31 表 5-14 第一關設定...31 表 5-15 第二關設定...32 表 5-16 第三關設定...33 表 5-17 警察移動...34 表 5-18 第一關怪物生成...35 viii

表 5-19 第二關吸毒犯生成...36 表 5-20 第二關飆車族生成...37 表 5-21 第三關吸毒犯生成...38 表 5-22 第三關飆車族生成...39 表 5-23 吸毒犯移動...40 表 5-24 飆車族移動...41 表 5-25 怪物攻擊...42 表 5-26 警察攻擊 - 警棍...43 表 5-27 警察攻擊 - 警槍...44 表 5-28 警槍子彈填充...45 表 5-29 分數...46 表 5-30 共通部分...47 表 5-31 玩家死亡 (1)...48 表 5-32 玩家死亡 (2)...49 表 5-33 Z 軸判定...50 表 5-34 關卡轉換...51 表 5-35 音效轉換...52 表 5-36 陰影效果...52 表 5-37 待命...53 ix

表 5-38 索敵...53 表 5-39 攻擊...54 表 5-40 死亡...55 表 5-41 所需音效表...60 表 5-42 BUG 問題與修改...72 表 5-43 遭遇困難與解決...73 x

第一章研究動機學習了將近四年的遊戲相關資訊, 總是要有一個成果出來, 加上從本學習開始系上畢業門檻需要論文 比賽得獎或是產學案從中三選一並且成功完成才給予專題的口試門檻 們這組所接洽的產學案是跟本地的彰化縣警察局少年隊的技術服務案, 內容是需要我們製作出一款關於反毒 反飆車 反幫派的 2D 網頁遊戲 系上的遊戲引擎有目前有 Unity3D ShiVa3D 和 Construct 2 等幾款知名的遊戲引擎, 而我們會選用 Construct 2 這款遊戲引擎是因為它是在 HTML5 架構下的一款遊戲引擎, 可以把完成的作品直接在瀏覽器進行檢驗與遊玩, 加上它要完成一款遊戲相較於其他兩款要來的快速與簡單, 剛好系上在前幾學期有請講師來講課, 我們也就藉著這個資源來完成我們的的第一個產學案也當作是我們在大學四年裡所學到的東西有一個完美的展現 1

第二章文獻探討 2D 遊戲介紹近年來 2D 網頁遊戲蓬勃發展, 尤其以智慧型手機的興起, 也間接的帶動了這股 2D 遊戲風潮, 對於 2D 遊戲的技術在我們這階層的年級其實很熟悉, 知名的俄羅斯方塊 小蜜蜂 小精靈等等都是 80 年代紅極一時的經典 [1] 圖 2-1 左到右依序為俄羅斯方塊 小蜜蜂 小精靈, 取自 Google 圖片 2D 遊戲的製作除了新出爐的 Unity 引擎裡面的 2D 新技術, 再來就是在近幾年裡面剛發表的跨平台 HTML 架構的 2D 遊戲引擎 -Construct 2 Construct 2 遊戲引擎介紹 Construct 2 的前身為 Construct Classic, 而其公司 Scirra 在 2011 年的 5 月成立於倫敦 [2] Construct 2 最早發行的時間為 2007 年發布的 Construct Classic R1 版本, 在來就是 2012 的 R2 版, 而 Construct 2 是在 2013 年的新版本, 比較值得一提的是 Construct 2 有被放上 Steam 平台 ( 一款遊戲與軟體分 2

享 討論與購買的平台 ) 的 Greenlight 系統 ( 由開發者或是公司把該公司的產品或是遊戲提交到此處, 並且由 Steam 平台上的廣大社群來挑選與評價 ), 並且成功登上 Steam[3] Construct 2 與別的引擎不同點在它所使用的是 event sheet( 事件表 ) 方式來製作遊戲, 讓你所製作的遊戲使用編排事件的方式製作, 不能說完全免除程式碼編寫, 可是相比於其他遊戲引擎,Construct 2 可以讓對於製作遊戲的玩家可以有一個概念與入門 [4] Construct 2 雖然問世還沒幾年可是被關注的程度卻是每年都穩定的成長著, 其版本更新也幾乎每個月甚至幾個禮拜就更新一次, 也因為廣納使用者的建議而使其評價很高 3

第三章研究目的毒品的為害從小在學校和新聞中就常常有相關的宣導跟報導, 而且有時候看到吸毒犯跟飆車族有些都還未成年, 讓我們深深的覺得教育跟宣導不能等, 從小時候就灌輸正確的想法才不會後悔莫及, 也很高興的看到現在政府在國中小就開始反毒 反飆車 反幫派的相關資訊 在反毒 反飆車與反幫派為目的下我們所製作的遊戲除了要可以遊玩之外, 還需要有效地達到宣傳反毒 反飆車與反幫派三大訴求 加上這幾年興起的跨平台風氣, 除了要讓遊戲可以在 PC 上面遊玩, 還要使其可以在其他移動裝置上面遊玩, 如何達到該成果是我們所需要去學習的, 更多的是希望藉著這次的學習讓我們可以把各項技能加深加固 4

第四章研究方法 4-1 專題製作環境及設備在大三下系上把原本的 H505 教室改造成一間遊戲工廠, 從分鏡圖 (Storyboard) 美工(Painter Photoshop) 建模(3ds Max Maya) 音效 (Music Maker) 程式(Construct 2 Unity3D) 到成品展示 ( 拳擊機 展示用大螢幕 ) 都可以在遊戲工廠裡面製作完成 軟體沒有硬體來支撐也是開不起來的, 在 H505 遊戲工廠目前設有桌上型電腦 電繪版塊 電繪螢幕 力回饋機台 拳擊機 Kinect 3D 印表機等硬體設施 圖 4-1 遊戲工廠設備平面圖 5

圖 4-2 遊戲工廠實景圖 4-2 使用軟體 下圖為本次專題研究所使用到的相關軟體 圖 4-3 使用軟體圖 6

4-2-1 遊戲引擎 -Construct 2 圖 4-4 Construct 2 我們會採用 Construct 2 來製作我們的專題除了我們要製作的遊戲為 2D 模式之外, 也因為這個軟體本身是採用 HTML5 語言來架構, 可以使其在跨平台上面使用瀏覽器即可運行所製作的成果 Construct 2 別於其他遊戲引擎的地方還有類似於 Google 的 App inventor, 不用去打複雜的程式碼, 而是採用事件表的方式來進行程式的編輯, 可以讓使用者更快並且簡單的製作出一款遊戲 4-2-2 美工 -Adobe PhotoShop 圖 4-5 PhotoShop,Logo 取自 Google 圖片 Adobe PhotoShop 是目前市場上最多人使用的影像處理軟體, 出色的影像合成跟圖像繪製奠定了它的地位, 除此之外它的濾鏡效果更能讓影像變化萬千, 也更方便使用者去製作屬於自己的作品 [5] 目前最新版本為 Adobe PhotoShop CC, 本次專題製作我們使用的為 Adobe PhotoShop CS6 版本來製作角色的動作分鏡圖 7

美工 -Corel Painter 圖 4-6 Corel Painter, 取自 LogoGoogle 圖片 Corel Painter 是目前最為完善與強大的美工繪圖軟體之一, 相較於其他軟件更能達到接近手工繪製的效果, 這歸功於它出色的繪圖工具與自定義筆刷可以幫助使用者更好的發揮繪圖的技巧與製作出更完美的作品 [6] 目前最新版本為 Corel Painter 2015, 本次專題製作我們使用的為 Corel Painter12 版本來製作在遊戲中如毒品 背景 補品等物件 美工 -Adobe Flash 圖 4-7 Adobe Flash,Logo 取自 Google 圖片 Adobe Flash 是款網頁多媒體製作的軟體, 具有向量繪圖與動畫編輯功能, 可以讓使用者製作出連續性的動畫, 而且因為它是採用向量圖形的原因, 不管是將其圖形放大或是縮小都不會失真, 另外他的另外一個抗鋸齒功能更可以讓圖形的成像更平滑 [7] 8

目前最新版本為 Adobe Flash CC, 而我們使用的是 Adobe Flash 6 的版本來製作我們用來觀察人物動畫流暢性的檔案 4-2-3 音效 -Music maker 圖 4-8 Music Maker,Logo 取自 Google 圖片 一款擁有中文介面的音樂編曲軟體, 方便使用中文語系的使用者更快更方便的上手, 更有著龐大的音效庫可供使用者搭配出有著自己風格的專屬音樂, 並且提供了快速編曲的功能讓使用者不用在重新編輯音效 [8] Music maker 版本我們使用 Music Maker 2013 PREMIUM 來製作本專題的相關音效 4-2-4 腳本 -Storyboard 圖 4-9 Toon Boom Storyboard,Logo 取自 Google 圖片 把遊戲要製作的整體構想先用 Storyboard 來製成腳本, 再配合著遊 戲團隊的其他工作人員來開始製作整體的遊戲內容, 方便於在遊戲的製 作過程中有一個清楚的想法 9

我們使用的腳本軟體為 Toon Boom Storyboard 4-2-5 文書 -Microsoft Word 圖 4-10 Microsoft Word,Logo 取自 Google 圖片 文書部分除了用來製作書面資料之外我們發現他的內建圖案可以製作出效果不錯的物件, 如按鈕 箭頭 標語的製作等等, 只是他無法輸出成圖片檔, 只能利用其他軟體來製作圖片檔, 不過對於一些簡單的物件還是可以幫助美工方面分擔一些工作 10

第五章研究步驟 5-1 專題製作流程 圖 5-1 流程圖 11

5-2 遊戲製作分工流程 圖 5-2 遊戲製作流程圖 12

5-3 遊戲腳本 Storyboard 每件事都是從簡單到複雜, 腳本的繪製也不意外, 我們的繪製想法是 從左邊到右邊分別是線稿 未上色 上色來呈現我們從無到有的畫面 圖 5-3 第一關反毒腳本 1 圖 5-4 第一關反毒腳本 2 圖 5-5 第二關反飆車腳本 1 圖 5-6 第二關反飆車腳本 2 13

圖 5-7 第二關反飆車腳本 3 圖 5-8 第二關反飆車腳本 4 圖 5-9 第二關反飆車腳本 5 圖 5-10 第二關反飆車腳本 6 14

圖 5-11 第三關反幫派腳本 1 圖 5-12 第三關反幫派腳本 2 圖 5-13 第三關反幫派腳本 3 15

5-4 組員工作分配 表 5-1 工作分配與內容 組員分配工作工作內容 楊承恩 程式 Construct 2 遊戲引擎 的操作與遊戲的設計 吳禎鎔 / 陳重宇音效背景樂與音效的製作 譚琮耀 張祥助 5-5 甘特圖 美工 文書 腳本的繪製與遊戲物件的繪製會議紀錄與專題事物的訊息整理 圖 5-14 甘特圖 16

5-6 遊戲設定 表 5-2 遊戲場景與內容設定 遊戲場景與內容設定 校園 十字路口 工廠 玩家 警察 警察 警察 敵方吸毒者吸毒者 / 飆車族 吸毒者 / 飆車族 / 幫派 BOSS 勝利條件擊敗全部敵方擊敗全部敵方擊敗全部敵方 失敗條件 玩家生命次數歸 零 玩家生命次數歸 零 玩家生命次數歸 零 表 5-3 關卡難度區分 關卡難度區分 雜魚 勇者 魔王 難度區別 小槍子彈無限 小槍子彈有限 無小槍 17

圖 5-15 遊戲操作按鍵 18

5-7 遊戲進行流程 下表是遊戲一開始到最後結束的流程 圖 5-16 遊戲進行流程圖 19

5-8 遊戲程式部分 5-8-1 製作理念當初在製作的時候原本有想過要製作八方移動的方式, 可是最後因為時間的關係讓我們轉為製作類似 LF2 這款橫向遊戲的方式, 加上所面對的族群為國中小跟一些比較會關心反毒反飆車反幫派的人, 製作的太過複雜可能會讓他們無法過關也就達不到要宣導的初衷了 圖 5-17 LF2 遊戲畫面, 圖片取自 Google 圖片 20

5-8-2 製作內容 1. 遊戲程式設計 圖 5-18 程式設計樹狀圖 21

2. 遊戲中各物件介紹 表 5-4 人物與共通物件介紹 類型 :Sprite 行為 :Pin Flash 動畫 : 待命 移動 攻擊 ( 警棍 ) 攻擊 ( 槍 ) 死亡 變數 : 無 介紹 : 為遊戲玩家角色造型 類型 :Sprite 行為 :8Direction Solid 動畫 : 無 變數 : 死亡 (number:0) 復活 (number:0) 復活次數 (number:3) 介紹 : 為遊戲玩家在移動時所使用的移動判斷物件 類型 :Sprite 行為 :Pin 動畫 : 無 變數 : 無 介紹 : 為遊戲玩家攻擊時子彈方向判斷物件 類型 :Sprite 行為 :Pin 動畫 : 無 變數 : 無 介紹 : 為遊戲玩家子彈填裝時間判斷物件 類型 :Sprite 行為 :Pin Flash 動畫 : 無 變數 : 開槍延遲 (number:0) 警棍延遲 (number:0) 介紹 : 為遊戲玩家角色近戰時攻擊範圍判定基礎物件 類型 :Sprite 行為 :Pin 動畫 : 無 變數 : 玩家陰影 (number:0) 介紹 : 為遊戲角色腳底的陰影 22

表 5-5 場景物件 類型 :Sprite 行為 :Bullet 動畫 : 無 變數 : 無 介紹 : 做為過場時的過場特效 類型 :Sprite 行為 : 無 動畫 : 無 變數 : 無 介紹 : 做為轉換場景時畫面漸暗特效 類型 :Sprite 行為 : 無 動畫 : 剩餘生命 變數 : 無 介紹 : 做為遊戲玩家所剩餘的生命值顯示圖像 類型 :Sprite 行為 : 無 動畫 : 無 變數 : 無 介紹 : 背景 類型 :Sprite 行為 :Solid 動畫 : 無 變數 : 無 介紹 : 做為遊戲玩家轉換關卡時所使用的媒介物件 23

表 5-6 場景物件 ( 續 ) 類型 :Sprite 行為 :Sine 動畫 : 無 變數 : 無 介紹 : 做為遊戲玩家完成關卡時指示玩家移動方向 類型 :Sprite 行為 : 無 動畫 : 無 變數 : 無 介紹 : 做為遊戲玩家選擇難度簡單時顯示子彈無限之物件 類型 :Sprite 行為 :Bullet 動畫 : 無 變數 : 無 介紹 : 做為遊戲玩家使用槍械攻擊時的子彈顯示物件 類型 :Sprite 行為 : 無 動畫 : 無 變數 : 無 介紹 : 做為下方狀態列背景 類型 :Sprite 行為 : 無 動畫 : 無 變數 : 無 介紹 : 做為怪物產生時的判定位置 類型 :Sprite 行為 :Solid 動畫 : 無 變數 : 無 介紹 : 做為防止遊戲玩家使遊戲角色超出畫面外之物件 24

表 5-7 怪物物件 類型 :Sprite 行為 : 無 動畫 : 移動 放毒變數 : 進場 (number:0) 方向變換 1(number:-1) 方向變換 2(number:1) 放毒延遲 (number:0) 放毒(number:0) 介紹 : 做為遊戲玩家的敵對怪物 吸毒怪 類型 :Sprite 行為 : 無 動畫 : 無 變數 : 消失 (number:0) 介紹 : 做為吸毒怪攻擊玩家的手段之一 類型 :Sprite 行為 :pin 動畫 : 無 變數 : 無 介紹 : 做為怪物攻擊範圍 25

表 5-8 文字物件 類型 :Test 行為 : 無 文字 :6 變數 : 無 介紹 : 做為顯示備彈剩餘量 類型 :Test 行為 : 無 文字 : 無 變數 : 無 介紹 : 做為顯示彈夾子彈剩餘量 類型 :Test 行為 : 無 文字 : 分數 :0 變數 : 無 介紹 : 做為顯示分數使用 類型 :Test 行為 : 無 文字 : 生命 : 變數 : 無 介紹 : 做為顯示文字 生命 : 類型 :Test 行為 : 無 文字 :/ 變數 : 無 介紹 : 做為剩餘子彈數與最大子彈數的區隔斜線 類型 :Test 行為 : 無 文字 : 子彈數目 : 變數 : 無 介紹 : 做為顯示文字 子彈數目 : 26

3. 第二關新增物件 表 5-9 怪物物件 類型 :Sprite 行為 :Pin 動畫 : 無 變數 : 變換方向 (number:0) 介紹 : 做為遊戲玩家的敵對怪物 飆車族 類型 :Sprite 行為 :Bullet Sine 動畫 : 無 變數 : 無 介紹 : 做為飆車族移動的輔助物件 27

4. 第三關新增物件 表 5-10 怪物物件 類型 :Sprite 行為 :Pin 動畫 : 無變數 : 待命 (number:1) 索敵(number:0) 攻擊(number:0) 死亡(number:0) 待命冷卻 (number:0) 開始射擊(number:0) 子彈上限(number:0) 子彈冷卻 (number:0) 攻擊結束(number:0) 介紹 : 做為遊戲玩家的敵對怪物 幫派老大 類型 :Sprite 行為 :Bullet 動畫 : 無 變數 : 無 介紹 : 做為幫派老大射擊時子彈物件 類型 :Sprite 行為 : 無 動畫 : 無 變數 : 生命值 (number:10) 介紹 : 做為遊戲玩家使用槍枝攻擊幫派老大時的判定範圍 類型 :Sprite 行為 :Pin 動畫 : 無 變數 : 無 介紹 : 做為遊戲玩家碰觸幫派老大時的判定範圍 28

5. 遊戲變數 表 5-11 遊戲變數 名稱 : 分數 類型 :number 值 :0 介紹 : 作為紀錄分數使用的變數 名稱 : 難度類型 :number 值 :0 介紹 : 作為判斷難易度所使用的變數 名稱 : 復活次數類型 :number 值 :3 介紹 : 作為紀錄玩家紀錄復活次數所使用的變數 名稱 : 彈夾子彈類型 :number 值 :6 介紹 : 作為紀錄玩家手槍彈夾子彈紀錄所使用的變數 名稱 : 剩餘子彈類型 :number 值 :30 介紹 : 作為紀錄玩家手槍剩餘子彈所使用的變數 名稱 : 裝彈冷卻類型 :number 值 :0 介紹 : 作為子彈裝填延遲所使用的變數 名稱 : 吸毒怪產怪延遲類型 :number 值 :0 介紹 : 作為下次產生吸毒怪的延遲時間所使用的變數 名稱 : 吸毒怪擊殺延遲類型 :number 值 :0 介紹 : 作為避免玩家同時擊殺複數吸毒怪所使用的變數 ( 已無使用 ) 名稱 : 第一關場上怪物數類型 :number 值 :0 介紹 : 作為紀錄及限制第一關上場怪物數所使用的變數 名稱 : 第一關怪物最大數類型 :number 值 :0 介紹 : 作為紀錄及限制第一關所有怪物數所使用的變數 名稱 : 第一關一音效類型 :number 值 :0 介紹 : 作為第一關背景音樂轉換時漸強效果所使用的變數 表 5-12 遊戲變數 ( 續 ) 29

名稱 : 前進關卡類型 :number 值 :0 介紹 : 作為判斷目前關卡所使用的變數 名稱 : 飆車族延遲類型 :number 值 :0 介紹 : 作為避免連續產生飆車族所使用的變數 名稱 : 第二關吸毒怪最大數類型 :number 值 :0 介紹 : 作為紀錄及限制第二關吸毒怪數量所使用的變數 名稱 : 第二關飆車族最大數類型 :number 值 :0 介紹 : 作為紀錄及限制第二關飆車族數量所使用的變數 名稱 : 第二關場上怪物數類型 :number 值 :0 介紹 : 作為紀錄及限制第二關上場吸毒怪數量所使用的變數 名稱 : 第二關飆車族上場數類型 :number 值 :0 介紹 : 作為紀錄及限制第二關上場飆車族數量所使用的變數 名稱 : 第二關二音效類型 :number 值 :0 介紹 : 作為第二關背景音樂轉換時漸強效果所使用的變數 名稱 : 第三關場上怪物數類型 :number 值 :0 介紹 : 作為紀錄及限制第三關上場吸毒怪數量所使用的變數 名稱 : 第三關飆車族上場數類型 :number 值 :0 介紹 : 作為紀錄及限制第三關上場飆車族數量所使用的變數 30

6. 遊戲程式 表 5-13 初始設定 / 通用設定 在 layout 開始時執行一次, 進行 pin 設定 陰影位置 填彈補充條與文字框 的初始化, 並在三秒後移除開場效果物件 表 5-14 第一關設定 當 layout 開始且前進關卡變數為零時執行一次, 以 10dB 播放 校園背景 音樂, 設置 tag 為 第一關, 除錯第一隻初始的吸毒怪, 因為除錯一隻吸毒怪會增加 100 分, 導致開始時分數即為 100 分, 因此必須減去, 並將通用變數 第一關場上怪物數 第一關怪物最大數 吸毒產怪延遲 吸毒怪擊殺延遲 以及近戰範圍判定物件警棍的變數 警棍延遲 開槍延遲 初始化 31

表 5-15 第二關設定 當 layout 開始且前進關卡變數為一時執行一次, 以 10dB 播放 第二關背景音樂 音樂, 設置 tag 為 第二關, 除錯第一隻初始的吸毒怪 飆車族與飆車族用箭頭, 因為吸毒怪會增加 100 分, 飆車族會增加 200 分, 導致開始時分數即為 300 分, 因此必須減去, 並將通用變數 第二關場上怪物數 第二關吸毒怪最大數 第二關飆車族最大數 第二關飆車族上場數 飆車族延遲 吸毒產怪延遲 吸毒怪擊殺延遲 以及近戰範圍判定物件警棍的變數 警棍延遲 開槍延遲 初始化 32

表 5-16 第三關設定 當 layout 開始且前進關卡變數為二時執行一次, 以 10dB 播放 最後一戰 音樂, 設置 tag 為 第三關, 除錯第一隻初始的吸毒怪 飆車族與飆車族用箭頭, 因為吸毒怪會增加 100 分, 飆車族會增加 200 分, 導致開始時分數即為 300 分, 因此必須減去, 並將通用變數 第二關場上怪物數 第二關吸毒怪最大數 第二關飆車族最大數 第二關飆車族上場數 飆車族延遲 吸毒產怪延遲 吸毒怪擊殺延遲 以及近戰範圍判定物件警棍的變數 警棍延遲 開槍延遲 初始化 33

表 5-17 警察移動 當移動格物件變數 復活 等於零, 且警棍物件變數 警棍延遲 與 開槍延遲 等於零, 移動格正在進行八方位移時, 重複撥放動畫 移動, 否則重複播放動 畫 待命 當向左鍵按下, 且移動格物件變數 復活 等於零時, 將警察 警棍判定與陰 影鏡射, 且將子彈方向角度設置為一百八十度 當向右鍵按下, 且移動格物件變數 復活 等於零時, 將警察 警棍判定與陰 影回覆鏡射, 且將子彈方向角度設置為零度 34

7. 怪物產生 表 5-18 第一關吸毒犯生成 當通用變數 第一關怪物最大數 小於 20 第一關場上怪物數 小於 5 吸毒 產怪延遲 等於 0 與 前進關卡 等於 0 時, 做以下動作 : 將通用變數 吸毒產怪延遲 設置為 1, 將生產格物件設置 Y 軸為 360 到 540 隨機亂數, 以生產格物件位置產生吸毒怪物件至 layer2, 以吸毒怪位置產生 Sprite29( 吸毒怪攻擊範圍物件 ) 於物件的 point1 且置於 layer2, 以吸毒怪位置產生 Spite31( 吸毒怪腳下陰影 ) 至 layer2, 設置 Spite31 的 Y 軸為本身 Y 軸位置加 5, 將 Spite31 pin 在吸毒怪物件上, 將 Spite31 放置到 layer 中最底層, 將 Spite29 pin 在吸毒怪物件上, 設置吸毒怪物件變數 方向變換 2 為 1 或 -1, 通用變數 第一關場上怪物數 增加 1, 通用變數 第一關怪物最大數 增加 1, 等待 2 秒, 設置通用變數 吸毒產怪延遲 為 0 35

表 5-19 第二關吸毒犯產生 當通用變數 第二關怪物最大數 不等於 20 第二關場上怪物數 不等於 4 吸 毒產怪延遲 等於 0 與 前進關卡 等於 1 時, 做以下動作 : 將通用變數 吸毒產怪延遲 設置為 1, 將生產格物件設置 Y 軸為 210 到 540 隨機亂數, 以生產格物件位置產生吸毒怪物件至 layer2, 以吸毒怪位置產生 Sprite29( 吸毒怪攻擊範圍物件 ) 於物件的 point1 且置於 layer2, 將 Spite29 pin 在吸毒怪物件上, 以吸毒怪位置產生 Spite31( 吸毒怪腳下陰影 ) 至 layer2, 設置 Spite31 的 Y 軸為本身 Y 軸位置加 5, 將 Spite31 pin 在吸毒怪物件上, 將 Spite31 放置到 layer 中最底層, 設置吸毒怪物件變數 方向變換 2 為 1 或 -1, 通用變數 第二關吸毒怪最大數 增加 1, 通用變數 第二關場上怪物數 增加 1, 等待 2 秒, 設置通用變數 吸毒產怪延遲 為 0 36

表 5-20 第二關飆車族產生 當通用變數 第二關飆車族最大數 不等於 10 第二關飆車族上場數 不等於 2 飆車族延遲 等於 0 與 前進關卡 等於 1 時, 做以下動作 : 將通用變數 飆車族延遲 設置為 1, 將生產格物件設置 Y 軸為 210 到 540 隨機亂數, 以生產格物件位置產生機車用物件至 layer2, 以生產格物件位置產生飆車族物件至 layer2, 設置機車用物件位置至飆車族物件座標, 將飆車族物件 pin 在機車用物件上, 以飆車族位置產生 Sprite29( 飆車族攻擊範圍物件 ) 至 layer2, 以飆車族位置產生 Spite31( 飆車族腳下陰影 ) 至 layer2, 設置 Spite31 的 Y 軸為本身 Y 軸位置加 5, 設置 Spite31 的大小為 120*10, 將 Spite31 pin 在飆車族物件上, 將 Spite31 放置到 layer 中最底層, 將 Spite29 pin 在飆車族物件上, 設置 Spite29 寬度為 120, 設置機車用物件角度為 180 度, 通用變數 第二關飆車族上場數 增加 1, 通用變數 第二關飆車族最大數 增加 1, 等待 3 秒, 設置通用變數 飆車族延遲 為 0 37

表 5-21 第三關吸毒犯產生 當通用變數 第三關場上怪物數 不等於 3 吸毒產怪延遲 等於 0 與 前進 關卡 等於 2 時, 做以下動作 : 將通用變數 吸毒產怪延遲 設置為 1, 將生產格物件設置 Y 軸為 350 到 540 隨機亂數, 以生產格物件位置產生吸毒怪物件至 layer2, 以吸毒怪位置產生 Sprite29( 吸毒怪攻擊範圍物件 ) 於物件的 point1 且置於 layer2, 以吸毒怪位置產生 Spite31( 吸毒怪腳下陰影 ) 至 layer2, 設置 Spite31 的 Y 軸為本身 Y 軸位置加 5, 將 Spite31 pin 在吸毒怪物件上, 將 Spite31 放置到 layer 中最底層, 將 Spite29 pin 在吸毒怪物件上, 設置吸毒怪物件變數 方向變換 2 為 1 或 -1, 通用變數 第三關吸毒怪最大數 增加 1, 通用變數 第三關場上怪物數 增加 1, 等待 2 秒, 設置通用變數 吸毒產怪延遲 為 0 38

表 5-22 第三關飆車族產生 當通用變數 第三關飆車族上場數 不等於 2 飆車族延遲 等於 0 與 前進關卡 等於 2 時, 做以下動作 : 將通用變數 飆車族延遲 設置為 1, 將生產格物件設置 Y 軸為 350 到 540 隨機亂數, 以生產格物件位置產生機車用物件至 layer2, 以生產格物件位置產生飆車族物件至 layer2, 設置機車用物件位置至飆車族物件座標, 將飆車族物件 pin 在機車用物件上, 以飆車族位置產生 Sprite29( 飆車族攻擊範圍物件 ) 至 layer2, 以飆車族位置產生 Spite31( 飆車族腳下陰影 ) 至 layer2, 設置 Spite31 的 Y 軸為本身 Y 軸位置加 5, 設置 Spite31 的大小為 120*10, 將 Spite31 pin 在飆車族物件上, 將 Spite31 放置到 layer 中最底層, 將 Spite29 pin 在飆車族物件上, 設置 Spite29 寬度為 120, 設置機車用物件角度為 180 度, 通用變數 第三關飆車族上場數 增加 1, 通用變數 第三關飆車族最大數 增加 1, 等待 3 秒, 設置通用變數 飆車族延遲 為 0 39

8. 怪物移動 表 5-23 吸毒犯移動 關於吸毒怪移動時所使用的事件, 有進場後不再出場 移動不超出範圍與自動折 返的功能, 並且避免了吸毒怪在放置毒品時移動的可能性 40

表 5-24 飆車族移動 關於飆車族移動所使用的事件, 以機車用物件作為移動基準, 在超出畫面後自 動隨機 Y 軸並回到場上 41

9. 怪物攻擊 表 5-25 怪物攻擊 關於吸毒怪隨機施放毒品 播放 放毒 動畫 在 放毒 動畫播放中且動畫偵 數為 7 時放置毒品物件 讓毒品物件在 8 秒後設置毒品物件變數 消失 為 1 與使毒品消失的事件 42

表 5-26 警察攻擊 - 警棍 關於警察使用警棍攻擊時的警棍音效播放 攻擊範圍 小怪消除 隨機產生補品 與 Boss 扣血的事件, 並防止重複攻擊 玩家死亡仍可攻擊以及警棍未擊中即銷 毀物件的問題 43

表 5-27 警察攻擊 - 警槍 關於子彈產生 槍枝音效播放 移動 擊中目標消除或減少生命值 隨機產生補 品, 並防止連續射出問題 無子彈射擊與玩家死亡仍可射擊的問題 44

表 5-28 警槍子彈填充 關於填充時間條的指示方式 彈夾子彈量與備彈子彈量的計算 換彈與關卡判斷 給予子彈數, 並避免了備彈 0 時子彈仍能裝填與填充時間條未結束時子彈以填充 完畢的問題 45

10. 分數計算 表 5-29 分數 關於吸毒怪與飆車族死亡時的分數計算 場上怪物量計算與分數顯示的事件 46

11. 共通部分 表 5-30 共通部分 防止玩家在警棍攻擊或開槍攻擊時仍可移動所設置的事件 47

12. 玩家死亡 表 5-31 玩家死亡 -1 關於玩家碰撞怪物攻擊範圍或物件的事件, 控制玩家死亡次數 死亡動畫與怪物 碰撞外的攻擊死亡 48

表 5-32 玩家死亡 -2 關於玩家生命次數用完時的音樂停止 轉場畫面特效 移動至遊戲結束場景與 補給品的回復事件 49

13.Z 軸判定 表 5-33 Z 軸判定 關於畫面中物件深度 (Z 軸 ) 的設定, 因 Construct 2 本身並沒有 Z 軸, 只能使用 物件互相碰撞時判斷 Y 軸來將其拉到 layer 最上方 50

14. 關卡 / 音效轉換 表 5-34 關卡轉換 關於關卡轉換時的換場特效 音樂停止與關卡轉換的事件 51

表 5-35 音效轉換 關於關卡進行到中間時音樂切換的事件, 以漸強漸弱的特效呈現 15. 陰影效果 表 5-36 陰影效果 關於物件消失時的陰影消除與怪物攻擊判定消除的事件 52

16.BossAI 表 5-37 待命 關於 Boss 原地待命與播放待機動畫並在隨機時間後結束待命的事件 表 5-38 索敵 關於 Boss 進行索敵與移動動畫播放的事件 53

表 5-39 攻擊 關於進入攻擊行動時, 撥放動畫 進行射擊與射擊結束的待命開始的事件 54

表 5-40 死亡 關於當 Boss 死亡時, 進行分數增加 物件消除與畫面轉換特效的事件 55

5-9 遊戲音效部分 5-9-1 製作理念當初在設計音樂時為了考慮到要搭配遊戲的進行, 因此每個場景的背景樂都會去配合, 比如第一關場景設定為校園, 因此我們設計了在音樂裡面添加鈴聲的效果來達到音樂與遊戲的結合 在此之外為了讓玩家更能融入遊戲, 當分數達到一定之後會改變為比較快節奏的音樂來帶動遊戲的樂趣 5-9-2 製作內容我們採用 Music Maker 來製作音效與背景樂, 而 Construct 2 所支援的音訊檔為.OGG.WAV 和.M4A 格式, 因此在匯出的時候要注意一下 56

MusicMaker 音效素材製作流程 - 操作一 : 開啟 MusicMaker 一開始所呈現的畫面 圖 5-19 Music Maker 軟體介面 操作二 : 介面的下方 Soundpools 裡面包含了 MusicMaker 的所有音效素 材, 從中選出覺得適合的拖入音軌編輯區 圖 5-20 從素材區選取素材置入音軌區編輯 57

操作三 : 音軌區分別擺放從素材庫中拉出來的素材, 並且進行音效的剪 輯 圖 5-21 音軌區編輯素材 操作四 : 對著該音效右鍵 其他選項 屬性, 即可觀看該音效的屬性 圖 5-22 開啟素材屬性 58

圖 5-23 素材屬性介面 操作五 : 檔案 匯出, 即可依照需求匯出編輯完成的音效 圖 5-24 匯出音效檔 5-9-3 所需音效 59

表 5-41 所需音效列表 音效列表 音效使用地方 選單音效 所需音效 1. 背景樂 2. 點擊按鈕音效 1. 第一關背景樂 關卡音效 2. 第二關背景樂 3. 第三關背景樂 警察 : 小槍音效 / 警棍音效 / 腳步聲 人物音效 販毒者 : 腳步聲 飆車族 : 引擎音效 BOSS 幫派老大 : 機槍音效 60

5-10 遊戲美工部分 5-10-1 製作理念要呈現一個完整的動態, 如同引擎的汽缸運作, 四種步驟分別為吸入 壓縮 爆發 排氣的產生動能原理 [9] 汽缸的原理舉例來說就如同舉重選手要去握啞鈴 ( 吸入 ) 並且握住啞鈴 ( 壓縮 ), 舉起 ( 爆發 ) 到把亞鈴放掉 ( 排氣 ) 的階段 因為了解了這個原理對於我們在製作人物的分鏡圖有一個基本的想法, 方便於去製作分鏡圖 Construct 2 遊戲引擎裡面所呈現的動作, 需要把 2D 動畫製成分鏡的連續圖片, 就好像在製作動畫影片時, 所需要設定之動畫影格來編輯影片中, 進行微調動作的流暢感, 再利用 Adobe Flash 來製作.GIF 檔 (GIF 檔是方便檢視完成的效果用, 並不是要放進 Construct 2) 61

5-10-2 製作內容 GIF 檔製作流程 圖 5-25 使用 Photoshop 製作遊戲人物與動作 圖 5-26 人物動作製作理念 62

圖 5-27 人物動態分鏡流程 圖 5-28 匯入 Adobe Flash 軟體製作 GIF 檔 63

圖 5-29 由 Adobe Flash 軟體中設定播放影格, 並把用以製成動作的 圖片, 丟進每個影格製成 GIF 檔 64

5-10-3 美工人物繪製部分 - 製作者譚琮耀 警察部分 - 圖 5-30 警察移動分鏡圖 圖 5-31 警棍攻擊分鏡圖 65

圖 5-32 小槍攻擊分鏡圖 圖 5-33 警察死亡分鏡圖 販毒者部分 - 圖 5-34 販毒者移動分鏡圖 66

圖 5-35 放毒者置毒分鏡圖 飆車族部分 - 圖 5-36 飆車族移動部分 67

幫派 BOSS 部分 - 圖 5-37 幫派 BOSS 移動分鏡圖 圖 5-38 幫派 BOSS 舉槍分鏡圖 圖 5-39 幫派 BOSS 射擊分鏡圖 圖 5-40 幫派 BOSS 死亡分鏡圖 68

5-10-4 美工場景繪製部分 - 製作者 : 張祥助 / 吳禎鎔 / 林庭輝 圖 5-41 第一關 : 操場製作者 : 林庭輝 圖 5-42 第二關 : 十字路口製作者 : 吳禎鎔 / 張祥助 69

圖 5-43 第三關 : 工廠製作者 : 張祥助 5-10-5 美工其餘物件繪製部分 - 製作者 : 林庭輝 / 張祥助 圖 5-44 背景製作者 : 林庭輝 圖 5-45 難度選擇按鈕製作者 : 林庭輝 70

圖 5-46 選單背景製作者 : 林庭輝 圖 5-47 開始遊戲按鈕製作者 : 林庭輝 圖 5-48 遊戲說明鈕製作者 : 林庭輝 圖 5-49 下一關指示箭頭製作者 : 張祥助 圖 5-50 毒品製作者 : 林庭輝 圖 5-51 藥品製作者 : 林庭輝 71

5-11 Bug 測試每個遊戲在剛完成的時候都並需經過多次的 bug 檢測來查找問題的所在, 相較於市面上的遊戲公司會有專門的除蟲人員, 我們專題團隊只能每個人一有新的版本就會去反覆的遊玩來查找 bug 並進行修改 以下是在本遊戲製作時所遇到的幾個 bug- 表 5-42 Bug 問題與修改 Bug 問題打不死販毒者關卡通關後切換難度會直接到第三關 修改 子彈的碰撞設定修改 關卡的判定變數沒歸零 發現是最後 BOSS 死亡時會一直重 計分異常 複給分直到關卡結束, 因此取消 BOSS 的重複給分 72

5-12 遭遇到的困難與解決 表 5-43 遭遇困難與解決 所遇到困難 1. 遊戲程式不熟悉 解決方式 1. 上網尋找相關資料 2. 詢問老師 2. 美工方面人手不夠 1. 尋求學弟們協助製作 3. 製作理念與想法有出入 1. 開會 Meeting 2. 尋求指導老師協助 4. 原本八方位的遊戲方式因為過 程中組員跟時間發生了問題導致 1. 改為橫向類型的移動 無法順利製作 73

第六章研究成果歷經了三個月的製作與一次次的修改, 最終在 6 月完成了, 下面所呈現的是此次作品的遊戲畫面與解說 圖 6-1 為此遊戲的開頭畫面, 左下閃著紅燈的警鈴是開始遊戲的按鈕 ; 右邊醫療包則是遊戲的操作說明 圖 6-1 遊戲開頭畫面 74

圖 6-2 為遊戲的操作說明,Z 鍵為警棍的攻擊按鈕,X 鍵為小槍攻擊,C 鍵為補充子彈, 方向鍵為控制腳色的移動 圖 6-2 遊戲操作畫面 圖 6-3 為第一關的遊戲畫面, 吸毒犯會先由右邊出來並且向著左邊採取上下移動的方式並隨機放置毒品在場景中, 角色一旦碰到吸毒犯或是毒品將會失去一條生命, 而如果在移動到最左邊且未被擊殺會再折返回來 圖 6-3 第一關遊戲畫面 75

圖 6-4 為第二關的遊戲畫面, 大至上如第一關只是這關因為是宣導反 飆車所以敵人的類型會增加飆車族 圖 6-4 第二關遊戲畫面 圖 6-5 是這遊戲的最後一關, 將會出現一隻拿著機槍的 BOSS, 需要把他打倒才會過關, 且這關的吸毒犯與飆車族只要 BOSS 還沒被擊敗將會一直的產生 圖 6-5 第三關遊戲畫面 76

下圖 6-6 是在每關過關之後會出現的警語, 按照每個關卡 ( 反毒 反 飆車 反幫派 ) 會分別出現不同的警語 圖 6-6 過關後警告標語 77

另外腳本與遊戲的實際遊玩我們也製成影片, 每一關的腳本配合每一 關的遊戲畫面讓腳本與最後的成果有一個整體的結合 連結如下 http://youtu.be/aiasbztfoms 圖 6-7 Storyboard& 遊戲影片 78

在這次的結果因為是與產學做結合, 因此在與我們合作的彰化縣警察局少年隊的官網有我們這次的反毒 反飆車 反幫派的遊戲連結, 如圖 6-7 所示, 網址如下 : http://www.chpb.gov.tw/part_net.php?group_item=11 圖 6-7 彰化少年警察隊官網遊戲連結 79

證明我們這次的產學除了少年隊官網的資訊支外, 我們也依序在中州深度報導 ( 圖 6-8) 和中央通訊社報導 ( 圖 6-9) 刊登相關的報導 連結如下 : http://www.ccut.edu.tw/adminsection/deepreport/newshow.asp?news_id=1437 圖 6-8 中州深度報導 80

連結如下 : http://www.cna.com.tw/postwrite/detail/161134.aspx#.vjvnkf4bbt 圖 6-9 中央通訊社報導 81

第七章結論與未來展望 7-1 結論一個遊戲往往不是一個人就可以完成的, 而是需要經過很多人的努力下才能夠有所成果, 在經過了這次的專題之後讓我們發現要製作出一款遊戲並不是想像中那麼簡單, 更不用說像那些膾炙人口的經典遊戲了 經過這次的專題與產學結案後, 我們發現我們本身的能力還要再多多加油, 雖然這三年半在學校所學的並不ㄧ定會全部派上用場, 但我想這一次的努力會是值得的, 雖然有時會與自己的團員有意見不合的情況發生, 但也是最主要的關鍵, 沒有所謂的爭議點, 哪來的改善? 換個角度去想, 這也是一種團隊合作的經驗, 因為能各自提出自己的看法和疑點, 才能在有效的時間點當機立斷 7-2 未來展望這次製作的是 2D 模式的遊戲, 內容還是帶著點剛入門不久的感覺, 未來希望可以把這個遊戲進行新的系統優化與美工美化, 並且藉著系上的動作捕捉系統來把這個遊戲轉換成 3D 的遊玩模式 82

第八章參考文獻 [1] 3D 技術與遊戲的發展, 作者 5a, 聯合新聞網數位資訊, 電玩動態觀察,2D 時代 http://mag.udn.com/mag/digital/storypage.jsp?f_art_id=89049 [2] Construct 2 的前身,Construct 2 網站, 關於 Scirra https://www.scirra.com/about [3] Construct 的發展,Wiki http://en.wikipedia.org/wiki/construct_%28game_engine%29 [4] Construct 2 簡介, 南開科技大學, 作者吳錫修 http://www.slideshare.net/sshiouwu/construct 2 [5] PhosoShop 軟體簡介 http://teachhp.cyvs.tyc.edu.tw/d961/teacherpage/ad/data/cg/photo shop%20%e8%bb%9f%e9%ab%94%e7%b0%a1%e4%bb%8b.htm [6] Corel Painter 軟體簡介, 百度 http://baike.baidu.com/view/3632556.htm [7] Adobe Flash 簡介, 金門高職資訊研習 - 動畫設計與應用簡報檔 [8] Music Maker 簡介,Music Maker 代理商網站 http://i-software.com.tw/iscltw/product_magix_musmaker.html [9] 西澤普著, 動感 Comic 素描我最行, 旗標出版股份有限公司 [10] Sprite Database( 人物美工製作參考網站 ) http://spritedatabase.net/system/gba [11] 多媒體與遊戲發展科學系 101 學年度專題, 以動作捕捉技術實現跨平台動作遊戲, 作者張汶祥 張良振 陳建宏 林韋甫 83

附錄 1 組員專長技能介紹 D10036250 楊承恩 專長 : 程式設計 遊戲引擎操作 美工繪製 D10036201 吳禎鎔 專長 : 音效編輯 攝影與影像編修 Mocap 表演 D10036218 陳重宇 專長 : 音效編輯 活動設計與管理 D10036221 譚琮耀 專長 : 美工 / 腳本設計 D10036230 張祥助 專長 : 建模軟體操作 Mocap 軟體操作 84