崑山科技大學

(1)

崑山科技大學

資訊工程系

擴增實境(AR)守塔遊戲

Tower Defense of Augmented Reality

學生：4010E081 李清穎 4010E107 王珀唯 4010E029 江政忠 4010E008 莊淳甫 4010E020 周謙信

指導老師：李宗儒老師

(2)

第一章、緒言... 9

1.1 研究動機與目的 ... 9

1.2 研究背景與系統概述 ... 9

1.3 專題內容概述 ... 10

第二章、相關研究資料... 12

2.1 –3ds Max ... 12

2.2 –擴增實境(Augmented Reality，簡稱 AR) ... 14

2.3 –Unity3D ... 16

2.4–Adobe Illustrator ... 18

2.5–威力導演 ... 20

第三章、系統架構... 21

3.1 系統架構 ... 21

3.2 需求分析 ... 22

3.3 設計分析 ... 22

3.4 流程圖 ... 23

第四章、系統實現... 24

4.1 角色腳本、場景 ... 24

4.2 角色外觀、介面 ... 41

4.3 遊戲動畫、劇情 ... 71

4.4 遊戲功能製作、設定 ... 83

第五章、結論... 98

參考文獻... 100

(3)

圖表目錄

圖 1 - 3DS MAX ... 12

圖 2-Unity 使用介面 ... 13

圖 3-擴增實境範例 1 ... 14

圖 4-擴增實境範例 2 ... 15

圖 5-擴增實境範例 3 ... 15

圖 6-AR 插件 ... 16

圖 7-Unity ... 16

圖 8-Unity 介面 1 ... 17

圖 9- Unity 介面 2 ... 18

圖 10- Unity 介面 3 ... 18

圖 11-AI ... 19

圖 12-威力導演 1 ... 20

圖 13-威力導演 2 ... 20

圖 14-架構圖 ... 21

圖 15-進度表 ... 錯誤! 尚未定義書籤。 圖 16-流程圖 ... 23

圖 17-劍士腳本 1 ... 26

圖 18-劍士腳本 2 ... 27

(4)

圖 19-劍士腳本 3 ... 29

圖 20-城堡腳本 1 ... 30

圖 21-城堡腳本 2 ... 31

圖 22-城堡腳本 3 ... 33

圖 23-城堡腳本 4 ... 35

圖 24-遊戲介面影片跳轉 1 ... 35

圖 25-遊戲介面影片跳轉 2 ... 36

圖 26-播放影片 ... 37

圖 27-設定畫面 1 ... 38

圖 28-設定畫面 2 ... 38

圖 29-實機展示畫面 1 ... 39

圖 30-實機展示畫面 2 ... 39

圖 31-實機展示畫面 3 ... 40

圖 32-實機展示畫面 4 ... 40

圖 33-實機展示畫面 5 ... 41

圖 34-木板 1 ... 42

圖 35-木板 2 ... 42

圖 36-主畫面製作 1 ... 43

圖 37-主畫面製作 2 ... 43

(5)

圖 38-主畫面製作 3 ... 44

圖 39-主畫面製作 4 ... 44

圖 40-主畫面製作 5 ... 45

圖 41-主畫面製作 6 ... 45

圖 42-倒秒製作 1 ... 47

圖 43-倒秒製作 2 ... 47

圖 44-倒秒製作 3 ... 49

圖 45-音效製作 1 ... 50

圖 46-按鈕製作 1 ... 50

圖 47-按鈕製作 2 ... 51

圖 48-按鈕製作 3 ... 52

圖 49-按鈕製作 4 ... 52

圖 50-按鈕製作 5 ... 53

圖 51-按鈕製作 6 ... 53

圖 52-按鈕製作 7 ... 54

圖 53-按鈕製作 8 ... 54

圖 54-按鈕製作 9 ... 55

圖 55-按鈕製作 10 ... 55

圖 56-按鈕製作 11 ... 56

(6)

圖 57-按鈕製作 12 ... 56

圖 58-按鈕製作 13 ... 57

圖 59-按鈕製作 14 ... 58

圖 60-按鈕製作 15 ... 58

圖 61-按鈕製作 16 ... 59

圖 62-按鈕製作 17 ... 59

圖 63-按鈕製作 18 ... 60

圖 64-按鈕製作 19 ... 60

圖 65-按鈕製作 20 ... 61

圖 66-按鈕製作 21 ... 61

圖 67-按鈕製作 22 ... 62

圖 68-按鈕製作 23 ... 62

圖 69-按鈕製作 24 ... 63

圖 70-按鈕製作 25 ... 63

圖 71-按鈕製作 26 ... 64

圖 72-按鈕製作 27 ... 64

圖 73-外框製作 1 ... 65

圖 74-外框製作 2 ... 65

圖 75--外框製作 3 ... 66

(7)

圖 76--外框製作 4 ... 66

圖 77-外框製作 5 ... 67

圖 78-外框製作 6 ... 67

圖 79-外框製作 7 ... 68

圖 80-外框製作 8 ... 68

圖 81-外框製作 9 ... 69

圖 82-遊戲介面製作 1 ... 69

圖 83-遊戲介面製作 2 ... 70

圖 84-遊戲介面製作 3 ... 70

圖 85-遊戲介面製作 4 ... 71

圖 86-動畫製作 1 ... 76

圖 87-動畫製作 2 ... 77

圖 88-動畫製作 3 ... 77

圖 89-動畫製作 4 ... 77

圖 90-動畫製作 4 ... 78

圖 91-動畫製作 5 ... 78

圖 92-動畫製作 6 ... 79

圖 93-動畫製作 7 ... 79

圖 94-動畫製作 8 ... 80

(8)

圖 95-動畫製作 9 ... 80

圖 96-動畫製作 10 ... 81

圖 97-動畫製作 11 ... 81

圖 98-動畫製作 12 ... 82

圖 99-動畫製作 13 ... 82

圖 100-遊戲功能連接 ... 83

圖 101-建塔 1 ... 88

圖 102-建塔 2 ... 88

圖 103-建塔 3 ... 88

圖 104-建塔 4 ... 90

圖 105 ... 90

圖 106-建塔 5 ... 91

圖 107-建塔 6 ... 91

圖 108-建塔 7 ... 92

圖 109-滑鼠圖形 1 ... 94

圖 110-滑鼠圖形 2 ... 95

圖 111-角色旋轉 1 ... 96

圖 112-角色旋轉 2 ... 96

(9)

擴增實境(AR)守塔遊戲

Tower Defense of Augmented Reality

學生：4010E081 李清穎 4010E107 王珀唯 4010E029 江政忠 4010E008 莊淳甫 4010E020 周謙信

指導老師：李宗儒老師

摘要

現在大多人的生活簡單分為兩個部分，１.工作、２.休閒娛樂，那在休閒娛樂裡遊戲又佔了一大部分，如果遊戲都是大同小異，使用者很快就會膩了，那這個遊戲在市場就會迅速的被淘汰。

我們的小組是製作 APP 遊戲，主程式是以 C#去撰寫，為了提升遊戲的品質，我們使用 unity 這個繪圖軟體來製作遊戲中所需要的物件，而這個遊戲是以 3D 來呈現，再使用擴增實境(Augmented Reality；AR)技術，將實際資訊以虛擬方式重疊至現實場景。

(10)

第一章、緒言

1.1 研究動機與目的

隨著時代的演進，科技的發展，手機的進步，以前我們所使用的手機，

從一開始擁有基本接聽功能，慢慢演變可以傳遞訊息、聽音樂、玩小遊戲，

錄影、拍照等功能漸漸取代一般相機，而這些功能都達到了，當然就是要將這些功能更加的優化方便，慢慢的演進的我們現在所使用的智慧型手機，而智慧型手機裡的遊戲也做得越來越好，進而漸漸得快取代掌上型遊戲機的市場，但我們發現手機遊戲也慢慢的走到換湯不換藥的概念，沒有新的遊玩方式出現，然而我們團隊發現！如果將擴增實境(AR)結合在手機遊戲內一定會讓遊戲更佳的有趣以及生動。

1.2 研究背景與系統概述

擴增實境（Augmented Reality，簡稱 AR），是一種實時地計算攝影機影像的位置及角度並加上相應圖像的技術，這種技術的目標是在螢幕上把虛擬世界套在現實世界並進行互動。

這種技術估計由 1990 年提出。隨著隨身電子產品運算能力的提升，預期擴增實境的用途將會越來越廣。

所謂擴增實境（Augmented reality），是一種把虛擬化技術加到使用者感官知覺上再來觀察世界的方式。例如把一個虛擬的三維的玫瑰花影像放在一個真實的花瓶裡，而且隨著使用者在房間裡走動，還要讓這個虛擬玫瑰花固定在那個位置。直接來看，擴增實境能為我們提供現實中無法直接獲知的信息。但是，更深層次來講，這種信息實際上又讓每個人眼中的世界更加多樣性。同樣的大樓在我們的擴增實境視線里，會披上完全不同的『信息外套』，這或許又是一種『長尾現象』。另外，海淀的百貨大樓和朝陽的百貨大樓，在地理上沒有任何關聯，可是卻在擴增實境中可以以信息的形式連接到一起。這些都是目前擴增實境已經顯現出來的一些特點。當然隨著技術的發展，未來的擴增實境可能會更加先進。

(11)

擴增實境應當被歸為一種地理位置信息服務 GIS，是地圖、GPS 地圖導航的升級。在 GPS 地圖導航中，類似 PAPAGO!等導航軟體提供商通過在他們的導航地圖中嵌入相關的一些商業信息可也賺錢。AR 產品展示，應用 AR 技術將產品模型疊加到現實場景中。

擴增實境或許不僅被歸為一種地理位置信息服務 GIS，他並不只是地圖、GPS 地圖導航的升級。

地理位置信息服務 GIS 所指的其實只是一種所謂的 LBS 擴增實境系統，與真正以視覺為基礎的擴增實境系統並不相同。它算是一種「很有創意、很有巧思」的 LBS 應用，但僅只能做到表層街景的應用，與「真正的擴增實境」是不同的。

LBS 擴增實境並未直接在攝影機的影像上做辨認對應，也有直接關聯性。攝影機基本上只是提供畫面，沒有任何作用。假設今天攝影機鏡頭歪掉，或衛星定位偏差了，那所呈現的 LBS 擴增實境對應資訊都將是錯誤的（因為二者本立存在」無關聯性的）。LBS 擴增實境與視覺為基礎的擴增實境最大的差異，在於後者的應用是更廣泛、更貼近人類自然生活。目前更進階的擴增實境則是大量編碼式與快速內容編製式的視覺為基礎擴增實境，這樣的技術將可以大量應用於日常生活之中。

塔防遊戲（Tower Defense Games）即指一類通過在地圖上建造炮塔或類似建築物，以阻止遊戲中敵人抵達堡壘的即時戰略電腦遊戲。一般而言，敵人並不會主動攻擊炮塔。當敵人被消滅時，玩家可一獲得獎金或積分，用於購買砲塔或升級砲塔。敵人以一波波進攻，大部分塔防會在一波後暫停以讓玩家以積分升級或增加炮塔。塔防約有 50 波或更多。玩家一般有數量生命，如果砲塔不能消滅敵人，敵人到達指定地方後，就會減少生命。隨著玩家提升炮塔能力，怪物的數量、能力也會提升。一般而言怪物的提升速度比炮塔快。此類遊戲的目標是生存若干時間或盡可能生存下去。

1.3 專題內容概述

第一章緒論，主要是介紹本系統的研究動機與目的以及研究的方法和系統的概述；第二章是相關資料及研究，主要是介紹系統實作時參考的相關技術如 3ds Max, Adobe Illustrator, 威力導演等；第三章系統架構，主要是介紹本系統所規劃的系統架構；第四章系統實現，主要是介紹實際操作步驟及操作。

本專題利用擴增實境(AR)的效果結合守塔遊戲，遊戲進行的方式就是在一開始會看到在遊戲的中央有一座城堡，而我們的目的就是在於守護這一座

(12)

城堡，不讓它遭受攻擊而摧毀，慢慢會隨著關卡的演進而加強難度，新增怪物攻擊方式以及數量出現的方式，透過擴增實境的方式讓裡面的腳色能更加的生動立體。

Chapter 1 Introduction

1.1 research motive

Now mostly the life of person is divided into two parts simply.First.work.Second, enterainment.Then played in the rest and recreation has accounted for a major part, if the game were mostly the same except for minor differences, the user will be quickly greasy, that this game in market rapid was eliminated.

Our teams produce the APP, the main program writes by C#, to enhance the quality of game, we use Unity this graphics software to manufacture the thing that in the game needs, but this game presents by 3D, uses to increase the solid boundary again (Augmented Reality; AR) technology, overlaps in the virtual mode actual information to the realistic scene.

1.2 research objective

Before along with the evolution of time, the development of science and technology, the progress of cell phone, the cell phone that we used, from the beginning has the basic answering function, slowly evolves can the bush telegraph, listen to the music, to play the small game, video recording, photograph and other functions substitutes for the common camera gradually, but these functions have achieved, certainly must be convenient these function optimizations, wisdom cell phone that evolution we of slowly currently use, but the game in wisdom cell phone also does more and more well, then gradually quickly substitutes for the market of hand-held mechanical games, but we discovered concept that cell phone game also arriving slowly changes in form but not in content, not new. The playing way appears, however our team discovered! If will increase the solid boundary (Ar) union certainly to let play a better interest in the cell phone game as well as vivid.

1.3 Content description

This special use increases the effect union of solid boundary (Ar) to defend the tower to play, the way that the game is conducted from the beginning will see that has a castle in the central committee of game, but our goals are to lie in protect this castle, does not make it suffer the attack to destroy, slowly will strengthen the difficulty along with the evolution of checkpoint, increases way that the monster

(13)

forms of defensive action as well as the quantity present, by increasing the way of solid boundary enables inside foot color vivid three-dimensional.

第二章、相關研究資料

2.1 –3ds Max

本專題所使用到的繪圖軟體 3DMAX(原名：3D Studio Max)[1]，是 Autodesk 傳媒娛樂部開發的全功能的三維計算機圖形軟體。它運行在 Win32 和 Win64 平台上。3D Studio Max + Windows NT 組合的出現一下子降低了 CG 製作的門檻，首選開始運用在電腦遊戲中的動畫製作，後更進一步開始參與影視片的特效製作。

特點：

基於 PC 系統的低配置要求人性化的界面設計，入門簡單快捷。安裝外掛可提供 3D Studio Max 所沒有的功能，以及增強原本的功能強大的角色動畫製作能力。

可堆疊的建模步驟，使製作模型有非常大的彈性。支援

Maxscript

內建腳本控制語言，讓使用者有自訂工具的能力。Maxscript 是內建在

autodesk

相關產品中的比如

Autodesk VIZ、3ds Max、Plasma、GMax

等軟體中的腳本語言。為 3ds Max 開發的第三方外掛中也多半有支援以 Maxscript 來控制。

圖 1 - 3DS MAX

應用：

(14)

本專題主要將 3ds Max 應用於製作遊戲裡的角色模組以及動作，場景的製作編排，再經由結合 Unity3D 遊戲製作平台加上 Qualcomm 公司的 AR 開發套件，讓我們在 3ds Max 製作出來的模組透過 Unity 遊戲製作平台製作出想呈現的遊戲。

[2]

圖 2-Unity 使用介面

(15)

2.2 –擴增實境(Augmented Reality，

簡稱 AR)

擴增實境（Augmented Reality，簡稱 AR），是一種實時地計算攝影機影像的位置及角度並加上相應圖像的技術，這種技術的目標是在螢幕上把虛擬世界套在現實世界並進行互動。

定義：

 將虛擬物與現實結合

 即時互動

 三維

應用：

1.行動設備

目前在 iPhone 手機，WindowsPhone 手機以及 GoogleAndroid 手機上，已經出現不少的擴增實境的應用。[3]

圖 3-擴增實境範例 1

2.醫療

醫生可以利用擴增實境技術，輕易地進行手術部位的精確定位。[4]

(16)

3.工業

目前擴增實境在工業上的應用也已經出現了不少。目前主要用於大型器械的維修和製造上。通過為維修人員裝備頭戴式顯示器，維修人員可以在維修時輕鬆獲取對他們有用的很多幫助信息。

4.娛樂擴增實境在遊戲和娛樂中的應用同樣很多。[5]

(17)

實用：

本專題使用的擴增實境(AR)使用的開發套件，由美國 Qualcom[6]所提供的，QCAR QualComm AR 免費行動裝置擴增實境開發套件，而此套件需透過結合 Unity 3D 遊戲開發平台，先以 3ds MAX 繪畫模組進而透過 Unity3D 撰寫遊戲腳本，再結合此 QCAR 套件呈現畫面。

2.3 –Unity3D

圖 6-AR 插件

Unity3D[7]是一個用於創建諸如三維視訊遊戲、建築可視化、實時三維動畫等類型互動內容的綜合型創作工具，而在 unity 裡可以用 C# script、javascript 和 BOO script 來撰寫程式。[8]

圖 7-Unity

(18)

圖 8-Unity 介面 1

Unity 類似於 Director，Blender，Virtools 或 Torque Game Builder 等利用交互的圖型化開發環境為首要方式的軟體其編輯器執行在 Windows 和 Mac OS X 下，可發布遊戲至 Windows、Wii、OSX 或 iOS 平台。也可以利用 Unity web player 外掛程式發布網頁遊戲，支援 Mac 和 Windows 的網頁瀏覽。它的網頁播放器也被 Mac widgets 所支援。[9][10]

Unity 3D 提供人性化的操作介面，支援 PhysX 物理、粒子系統，並且提供網路多人連線功能，不需要學習復雜的程式語言，符合遊戲製作上的各項需求。

Unity 大幅降低遊戲開發的門檻，即使是個人工作室製坐遊戲也不再是夢想。對於遊戲公司而言，只用 Unity 3D 也可以縮短遊戲的開發時間，並且降低遊戲的製作成本司而言，只用 Unity 3D 也可以縮短遊戲的開發時間，並且降低遊戲的製作成本。

(19)

圖 9- Unity 介面 2

圖 10- Unity 介面 3

2.4–Adobe Illustrator

Adobe Illustrator，俗稱「AI」，是Adobe系統公司推出的基於向量的圖形製作軟體。軟體的優點是在於貝茲曲線的使用,讓使用者用簡單操作向量繪圖。

「AI」還有文書處理、上色等功能，在插圖還有一些傳單、小本子的設計製作也廣泛的使用。貝茲曲線方法，在「AI」中就是通過「鋼筆工具」設定「錨點」和

「方向線」實作的。

(20)

圖 11-AI

(21)

2.5–威力導演

威力導演是一款非線性視頻編輯軟體。使用者可以使用它匯入、編輯、匯出視訊，它也具有適合普通用戶的半專業功能。優點: 支援編輯 4K ultra HD

（4096x3072 及 3840x2160）超高畫質的影片。 100 個時間軸。支援各大相機照片 RAW 檔、FLV 檔（H.264）、MKV 檔、Dolby Digital+及 dts 5.1 聲道環繞音效，支援燒錄藍光 BDXL 可達 128GB。

圖 12-威力導演 1

圖 13-威力導演 2

(22)

第三章、系統架構

3.1 系統架構

圖 14-架構圖

本專題系統主要經由 3DS MAX 繪製人物場景，透過 Unity 3D 製作開發遊戲，

最後再透過手機辨識圖片開啟遊戲，並以擴增實境的效果呈現於手機畫面內。

(23)

3.2 需求分析

基本需求：

1.android 系統需 4.0 版 2.外部鏡頭 800 萬畫素

3.擴增實境所需辨識圖大小約 A5 以上，辨識成功即可開始執行遊戲軟體。

3.3 設計分析

有別於一般大眾手機遊戲的設計概念，透過擴增實境(AR)增加遊戲互動，畫面更加生動有趣，讓使用者更能融入遊戲劇情，體驗出遊戲的臨場感與真實感。

(24)

3.4 流程圖

圖 15-流程圖

(25)

第四章、系統實現

此專題將主要分成 2 個部分進行，分別為擴增實境與 3DS MAX 繪圖。

個人電腦端先於 Unity 中使用 3DS MAX 將須使用的場景，

角色，攻擊特效等等繪製，於 C#軟體將腳本撰寫完成後，套用至角色及場景上，最後利用擴增實境的技術投影呈現。

起始先由負責 3DS MAX 繪圖的同學，繪製遊戲開始畫面，

我方及敵方士兵的模型構思製作，和主要城堡的整體架構。

另外由組員於 C#軟體上撰寫士兵們的移動路徑腳本，攻擊方式，生命值控制等，主要城堡的生命值，顯示位置，及與敵方碰撞之影響等等…。

最後將撰寫的軟體套用至士兵、兵營、城堡、主畫面，再行將其匯出 Unity，完成顯示於行動裝置或個人電腦端。

4.1 角色腳本、場景

角色模組的製作與角色動作指令的撰寫，應用到 3DS

MAX 繪圖工具設計角色場景規劃，Unity 3D 遊戲開發平

台設計角色動作腳本。

(26)

在製作遊戲的人物角色、場景，所使用的軟體 3DS MAX 對於繪圖軟體對於我們資工領域真的是比較少再接觸到的，困難是一定有，但也有許多新鮮感在裏頭，而這是對角色模組的貢獻部分，但是經過討論與努力之後，對於自己製作角色模組太過耗時，以及美術方面較弱的關西，改以使用免費人家所建置好的模組，而遊戲製作方面也是一大課題，雖然在角色動作腳本上所使用 C#程式語言，而這也是一個重新學習的機會，進而將我們所需的腳本設計出來。

經過半學期的嘗試過後，我們將使用 3DS MAX 的部分的重要性去除了，將專題的重心著重在人物動作的腳本上，以及遊戲的豐富性。

然而遊戲腳本方面經過半學期的使用之後已經有更

佳的熟悉了解，使用 Nav Mesh Agent 的尋進組件結合

Animator 的動畫組件，讓遊戲裡的角色有自動搜尋方位

的功能，以及攻擊的動畫，再透過使用 canvas 組件加上

text 組件製作遊戲血條的功能。

(27)

1.劍士腳本：

（搜尋目標點）DS

圖 16-劍士腳本 1

（攻擊腳本）（移動）

(28)

（攻擊距離判斷）

（移動）

（腳色對於目標旋轉角度）

(29)

（攻擊動畫）

(30)

（死亡動作）（血量）（銷毀）腳本

（血量顯示）

（死亡動作）

(31)

（物件銷毀）

2.城堡腳本 (受到攻擊)

圖 19-城堡腳本 1

(32)

(城堡生命值歸零)(生命歸零城堡動畫)

(33)

3 敵方腳本:

(尋進腳本)

當有劍士在將劍士當第一目標

(34)

(當有劍士在將劍士當第一目標)(圖)

(當沒有劍士時)

(35)

(當沒有劍士時) (圖)

(36)

4.遊戲介紹影片跳轉

圖 23-遊戲介面影片跳轉 1

(37)

(透過點擊遊戲介紹)

圖 24-遊戲介面影片跳轉 2

(38)

(播放預置影片)

圖 25-播放影片

(播放預置影片腳本)

(39)

圖 26-設定畫面 1

(smart terrain 使用) 設定畫面 1

圖 27-設定畫面 2

(smart terrain 使用)設定畫面 2

(40)

圖 28-實機展示畫面 1

(實機展示畫面先掃描預設圖片)

(掃描周圍障礙物體預設白色方塊)

(41)

按下 DONE 按鈕後遊戲開始預設白色方塊轉變成障礙物

執行畫面當角色移動到轉變障礙物的物件無法通過

(42)

成果畫面

4.2 角色外觀、介面

這個專題我負責的是遊戲的程式與遊戲介面的架構，我所使用的程式語言是 C#cript，C#再一年級就有學過了，但是太久沒使用，也花了一些時間來複習，而遊戲介面的架構式使用 unity 3D 來製作，

這個軟體因為沒學過，所以花很多時間來學習他的介面控制以及各種功能。

1. 遊戲主畫面：

製作模組，先是使用 Adobe illustrator 來製作模組

(43)

圖 33-木板 1

製作完成在各別匯出：

圖 34-木板 2

再來使用 Iclone 製作主畫面場景模組

興建道具至場景

(44)

圖 35-主畫面製作 1

建立攝影機

(45)

建立平行光

新增天候

(46)

完成品

最後用 unity 來整合

將模組匯入進來與程式結合讓 button 能運作

(47)

2. 製作計時器

製作定時器是為了每一關有定時間,才不會讓每一個管卡的時間過長，在進入 5 秒倒數前都是以白色顯示。

(48)

圖 41-倒秒製作 1

當進入 5 秒倒數時就會將字體以紅色顯示並發出聲音來提示玩家開始倒數。

(49)

(50)

頁面跳轉

在計時器歸 0 時,自動跳轉到下一個頁面.

(51)

建立一個 GUI 來與音效連結

圖 44-音效製作 1

製作按鈕造型

圖 45-按鈕製作 1

(52)

1. *打開 PS 然後開啟圖片

2. 使用魔術棒,點選圖片

(53)

3. 使用增加/減少來描繪圖片

(54)

4. 選取→反轉

5. 複製貼上，刪掉原圖層

6. 檔案→另存新檔→存成 TIFF 檔

(55)

換 Ai

點選圓角矩形工具拉一個圓角矩形

1. 檔案置入剛剛做的弓

(56)

2. 開始製作弓箭點選多邊形工具拉一個三角形(Z)

(57)

3. 點選矩形工具,拉一個矩形(X)

4. 選取 Z,X 然後點路徑管理員裡的聯集

(58)

5. 點選矩形工具拉一個矩形放在 Z,X 的中心,案路徑管理員裡的切割將上下分割

6. 點選右鍵分解群組

(59)

7. 點選右邊的色票來調顏色

8. 點選矩形工具拉兩個矩形並換顏色

(60)

9. 複製剛剛的矩形並對齊 Z,X 中心

10.點選右鍵群組

(61)

11.點選鏡射工具,複製並翻轉

12.使用漸層

(62)

13.使用透明度色彩增值

14.檔案→儲存檔案→存成 JPG 檔換 ps

(63)

15.開啟 PS,將剛剛的 JPG 丟進去

16. 使用魔術棒,點選白色部分

(64)

17.選取→反轉

18.複製貼上，刪掉原圖層

(65)

19.檔案→另存新檔→存成 TIFF 檔製作時間框開啟 ps

27 開新檔案設定寬與高

(66)

圖 72-外框製作 1

28 點選矩形工具畫一個矩形

29 點選選取修改縮減

(67)

圖 74--外框製作 3

30 選擇顏色使用油漆桶上色

圖 75--外框製作 4

31 點選濾鏡濾鏡收藏館

(68)

32 選擇你要的濾鏡調整系數

33 選取影像調整色相/飽和度

(69)

34 將上色打勾,調整係數

35 點選左下角 fx 選擇斜角與浮雕

(70)

36 選擇加漆工具,增加暗色立體感

製作遊戲起始畫面

圖 81-遊戲介面製作 1

將人物和背景和用 AI 所設計的文字匯入 unity

(71)

拉時間軸讓人物依照時間去動作

(72)

拉時間軸讓字體依照時間去動作

完成

 4.3 遊戲動畫、劇情

本次專題主要是以遊戲劇情、遊戲動畫製作以及後製剪接影片和剪接音效對於這次專題是製做遊戲，所以會有構想出整個遊戲的劇情想法，有了劇情整個主題架構之後我嘗試用了 ICLONE5 動畫製作這套軟體，畫質比原先構想的還要好，

再由分鏡圖逐一完成前製動畫的部分，後製的部分我使用了威力導演這套免費試用軟體做影片後製剪接的動作，再來音效部分則由網路上免費提供無版權的音檔，

進行影片所需要的音效以及背景音樂的剪接。

遊戲劇情

一個氣候溫暖空氣潮濕的孤島，有一個小村落，村落的女王深得人民尊敬與愛戴，在女王英明的領導下，這個村落很快就達到前所未有的輝煌時期，慢慢的村落發展越來越大，漸漸形成一個小小的國家，村民為了感念女王的恩德，便將國家的名稱以女王的名字命名，至此”伊諾法爾”這個國家就這樣誕生了。

(73)

伊諾法爾的街道上，時常傳來噠噠的聲響，這是商人駕著馬車趕往市集的馬蹄聲，我們往城鎮裡瞧，商人們正熱情的招呼客人，滿街的叫賣聲早已成為伊諾法爾繁華的象徵。伊諾法爾的子民主要以物農、漁牧、紡織為主，閒暇之餘人們會在廣場上跳跳土風舞，到酒吧裡喝杯清涼的啤酒，暢聊著一天生活上的瑣事。

在這座美麗祥和的城鎮上人民和睦相處，親密友好幸福的過著每一天，直到了…..

那男孩的出現。

一個寂靜的夜晚，涼風徐徐吹過，大地上黯淡無光，除了聽到幾聲蛙鳴聲外，

似乎這座城市上的生靈早已沉醉在自己甜美的夢鄉，女王殿下正自己一人在城堡的空中花園上，痴痴的俯瞰這片美麗的城市，當殿下覺得自己有點睡意，正要轉身離去時，眼角突然泛起一道紅色的強光，女王殿下立刻轉身朝著光源看像了夜空，那是一棵發出碧血色光芒的星星，在這片黑夜籠罩的大地上顯得格外耀眼，

忽然，它劃破天際一道赤紅色的光芒墜落在伊諾法爾的邊境，這撞擊力道之大彷彿能撼動大地，奇怪的是卻一點聲響也沒有，女王殿下皺著眉頭表情凝重的看著眼前發生的異相，似乎在心裡思索著什麼….。隔天早晨，鎮上依舊充滿吵雜的叫賣聲，人民依然辛勤的工作，好像沒發生什麼事一般，只是鎮上突然出現了一個孤兒。善良的伊諾法爾居民，拿著家裡剛烘焙好的麵包，遞給了這位不曉得從哪裡來的小男孩，而小男孩像是餓壞了，他狼吞虎嚥的吃著剛出爐的麵包，小男孩的話不多，只是從他口中得知他的名字叫”庫德爾”，至於他從哪裡來、身世背景是什麼他自己也一概不知。

日子久了，庫德爾漸漸發現了自己是孤兒，也體會到寂寞痛苦的感覺。這天早晨他來到了城鎮的市集，拿著居民送給他的早餐，躲在屬於自己的秘密基地，

那是一條非常狹小陰暗的防火巷，也只有像庫德爾這樣瘦小的男孩才進得去，正當庫德爾邊吃早餐邊看著眼前熱鬧得市集時，他看到了一對父子，而這父親正在攤販前，挑著一粒看起來又大又甜的橘子給自己的兒子吃，庫德爾看著那小孩臉

(74)

上幸福的表情，心裡真是羨慕忌妒極了，從這一刻起，庫德爾決定摧毀眼前這副景象。庫德爾離開了伊諾法爾，開始在世界各大種族遊說，精靈、矮人、獸族一些對於人類這噁心的種族恨之入骨的生靈慢慢地開始聚集起來，終於形成了一個龐大的軍隊，而庫德爾眼中的目標只有一個，那就是摧毀這名叫”伊諾法爾”的國家。

由於庫德爾非常了解，伊諾法爾的地理位置、交通樞紐以及軍事要塞，從首戰時，伊諾法爾軍就被打的節節敗退，似乎沒有任何反擊的餘地，庫德爾軍因此士氣大增，爾後幾場戰役也戰無不勝，終於，庫德爾軍一路攻打到了伊諾法爾的首都(自由)，眼看這最後之役，隨時一觸及發，女王殿下終於下定決心派出庫德爾軍從未見過的底牌，----伊諾法爾皇家禁衛軍，這群皇家禁衛軍各個驍勇好戰、

視死如歸，早已知道自己的國家正面臨危急存亡之際，他們各個蓄勢待發，恨不得立刻奉上自己最忠心的鮮血，然而，此時此刻，耳邊傳來鋪天蓋地的號角聲，

這名為自由之役的最後一戰已經悄悄的拉開序幕了，現在正需要你統領著這批驍勇好戰的皇家禁衛軍，一起捍衛這美麗的國家"伊諾法爾"...。

(75)

動畫劇情製作(ICLONE 5)

動畫分鏡腳本

鏡頭時間圖片內容

1 5s

伊諾法爾邊境

2 5s

庫德爾率領百萬獸人突掠村莊

3 7s

村莊被大軍襲擊慘烈

(76)

4 5s

庫德爾軍行進之處猶如人間地獄

5 25s

庫德爾率領大軍即將進攻伊諾法爾主城

6 5s

伊諾法爾號角聲響起

7 10s

伊諾法爾皇家禁衛軍備戰

(77)

ICLONE5 動畫製作過程

圖 85-動畫製作 1

選擇攝影機做鏡頭語言調整

上排選擇天候然後調整HDR畫面品質

(78)

選擇左下角燈光調整燈光位置

選擇上排動作層選取所需素材動作

(79)

選擇上排動態效果之後滑鼠點右排編輯動作層畫面會跳出動態模擬人偶之後照著使用者動作所需做細微調整

動畫有陰影才會顯得動畫逼真右下角陰影類席選擇字體投影解析度 4096x4096

(80)

時間軸的部分是整個動畫的大彙整鏡頭切換、燈光、HDR...等都要透過時間軸做最後的調整

最後是輸出的部分整個動畫專案完成後選擇所需格式畫質則建議調成 HD1080P (1920x1080)

(81)

動畫影片後製(威力導演)

匯入整個專案黨進行編輯

上層是把所有專案依照動

畫順序匯入

下層是匯入所需音軌

(82)

剪輯影片

剪輯音效音軌

(83)

影片剪輯特效選擇

威力導演編輯畫面

(84)

4.4 遊戲功能製作、設定

本次專題負責製作遊戲功能製作部分，使用軟體為 Unity 3D，

使用程式語言 C#來製作出腳本，本專題製作出(1)開始介面連接遊戲、

離開遊戲按鍵(2)冷卻按鍵(3)開關按鍵(4)建塔效果(5)怪物固定路線(6)鼠標設定，這五大遊戲所需功能，接下來介紹製作的功能簡介：

1. 開始介面連接遊戲、離開遊戲按鍵：

以下是介面按鍵的基本功能解說：

I. 按下「遊戲開始按鍵」連接遊戲腳本。

II. 遊戲當中也可按下「主畫面按鍵」回到主畫面。

III. 按下「離開遊戲按鍵」即可離開。

圖 99-遊戲功能連接

(互相連接)

(按下即可離開遊戲)

(85)

2. 冷卻按鍵：

一般我們在玩遊戲時，有些技能需要一定的冷卻時間。例如：技能釋放後許要幾秒鐘才能使用一次。那們我們就必須製作出所謂冷卻按鍵，冷卻按鍵顧名思義就是冷卻時，不可再使用此按鍵。

+ +

按鍵外框按鍵底圖冷卻時跑動灰圖

=

^{按鍵冷卻中的型態}

(86)

3. 開關按鍵：

在遊戲當中，需要基本的啟動/關閉按鍵，也可以當作轉換按鍵使用，

例如：攻擊轉為防禦←→防禦轉為攻擊、走動←→停止。以下是開關按鍵解說：

I. 按鍵移到滑鼠游標時(無需按下)，底圖會馬上變色。

II. 按下按鍵時，啟動開關，此時底突變色。

III.按下預設按鍵 F3，關閉按鍵功能，此時底圖顏色回到原本圖形顏色。

(87)

原圖按鍵

當滑鼠碰觸時(無需按下)，罵上變色

滑鼠按下時，馬上變色

(

按下 F3

關閉開關

，

恢

復

原

圖

顏

色 )

(88)

4. 建塔效果：

建塔功能目前還未在我們專題中使用，但是我相信我們以後改良會使用到，以下讓我來說明建塔功能的效果：

I. 按下我方預設地盤點 II. 立即跳出選單

III.按下菜單選項：建塔 IV. 即可建立防禦塔

(89)

圖 100-建塔 1

圖 101-建塔 2

圖 102-建塔 3

我方預設地盤點

跳出選單

點選建塔，成功建立防禦塔

(90)

(91)

5. 怪物固定路線

可自己設定怪物路線所經過的地方，也可以調整怪物行走的速度快慢，

目前使用腳本可直接顯示自己所設定的怪物路線。以下是怪物固定路線說明：

圖 103-建塔 4

圖 104

地形

點選已完成腳本選項

(92)

圖 105-建塔 5

圖 106-建塔 6

怪物開始行走

藍色線為路線 (預先設好路線)

(93)

圖 107-建塔 7

路線無誤

(94)

(95)

6. 鼠標設定

鼠標是我們遊戲中的重點之一，能夠做出精美作出鼠標，更能提高玩家興趣。以下就讓我們來解說：

我們目前預訂鼠標圖片：

圖 108-滑鼠圖形 1

(96)

程式碼/設定：

圖 109-滑鼠圖形 2

7. 角色模組旋轉展示

(97)

圖 110-角色旋轉 1

圖 111-角色旋轉 2

角色經過細膩處理，包括打光，旋轉展示，讓玩家可以更看清楚我們製作出來的角色，並且有攝影機高度、攝影機角度、攝影機前後距離、角色旋轉速度，任玩家自己調配，想看角色的每一個角度都可以，並解標示出我們角色的能力值，角色名稱、攻擊力、防禦力，讓玩家在遊戲中更清楚角色的善於哪種能力。

攝影機高度程式碼：

GUI.Label (new Rect (0, 60, 100, 30), "攝影機高度");

GUI.Label (new Rect (0, 80, 100, 30), "________________________");

(98)

hSliderValue1 = GUI.HorizontalSlider (new Rect (0, 80, 100, 30), hSliderValue1, 0f, 3);

攝影機角度程式碼：

GUI.Label (new Rect (0, 120, 100, 30), "攝影機角度");

hSliderValue2 = GUI.HorizontalSlider (new Rect (0, 140, 100, 30), hSliderValue2, -80f, 80);

攝影機距離程式碼：

GUI.Label (new Rect (0, 180, 100, 30), "攝影機距離");

hSliderValue3 = GUI.HorizontalSlider (new Rect (0, 200, 100, 30), hSliderValue3, 1f, 5f);

角色選轉速度程式碼：

GUI.Label (new Rect (0, 240, 100, 30), "旋轉速度");

Speed = GUI.HorizontalSlider (new Rect (0, 260, 100, 30), Speed, -60, 60);

回到原本預設攝影機角度程式碼：

if( GUI.Button(new Rect (0, 300, 80, 30), "回到預設"))

(99)

第五章、結論

從以前的工業化社會到現今的資訊化時代，由於科技的進步，對於遊戲的遊玩方式也有了很大的不同，利用 3C 科技的產品結合現今軟體的開發，改變已往侷限於手機裡或個人電腦上的呈現方式，創新出不同的遊戲體驗。現今不只出門在外的設備，就連傳統遊戲的表現方式，也都逐漸加入了科技層面的應用，擴增實境的應用，不僅可增加使用者對於遊玩的樂趣，也能改善舊式遊戲的呈現方式，給予玩家不一樣的視覺效果。另一方面，科技業者也開始逐漸與傳統遊樂業者做結合，將傳統遊樂的方式做改良，創新結合現今科技的利用，更方便，更快速的呈現傳統遊樂的新面貌。現今伴隨著擴增石井等相關技術的熱門發展，要建構出一個科技結合視覺化的遊樂環境也將不再是個空談。而如何將擴增實境整合到不同的產業及相關研發技術，建立一個共通的平台，也是未來各領導技術人員需要共同努力的方向。

雖然我們沒有用過 unity 3D 這個程式，但是 unity 這個程式有提供人性化的操作介面，支援 PhysX 物理、粒子系統，並且提供網路多人連線功能，不需要學習復雜的程式語言，符合遊戲製作上的各項需求，讓我們在短時間內可以學會使用這套軟體。

(100)

除了 unity 之外我們還有用了 3D Max 來繪製遊戲中人物、建築物及各種物件，我們在 3D Max 所花的時間不會少於 unity，畢竟我們不是視訊類的，不太會使用繪圖軟體，所以要花更多的努力來學習與專研這套軟體。

最後我們把做出來的遊戲結合擴增實境（AR），讓我們的遊戲能透過螢幕將遊戲畫面與現實結合，增加遊戲臨場感與豐富度。

(101)

參考文獻

http://www.autodesk.com.tw/products/3ds-max/overview

[1][2]

http://www.android-hk.com/news/ar-and-p2p/

[3]

http://www.waalii.com/home/wfree/201306/20130626-11-ar-liver-viewer

[4]

http://games.brothersoft.com/android/toyota_86_ar-323326.html

[5]

https://www.qualcomm.com/company

[6]

http://unity3d.com/

[7]

http://2.bp.blogspot.com/-A9DJA-1SEGA/T2KnEc2EQTI/AAAAAAAAIx0/jo_jayY ah7o/s1600/unity35-01.jpg

[8]

http://blogs.unity3d.com/wp-content/uploads/2012/10/ShadowGun_WP8-168 0_1050.png

[9]

http://www.itsartmag.com/features/itsart/wp-content/uploads/2013/05/u nity-3D.png

[10]

http://yig3c.com/wp-content/uploads/2015/04/%E5%A8%81%E5%8A%9B%E5%B0%

8E%E6%BC%94.jpgnity-3D.png

(102)

[11]

http://yig3c.com/wp-content/uploads/2015/04/%E5%A8%81%E5%8A%9B%E5%B0%

8E%E6%BC%94.jpgitsartmag.com/features/itsart/wp-content/uploads/2013/

05/unity-3D.png

[12]

崑山科技大學