崑 山 科 技 大 學
資 訊 工 程 系 專題製作報告
體感遊戲
指導老師：黃慶祥
學生：曾宥翔、葉柏鈞、莊明浩
2015年 11月
KUN SHAN UNIVERSITY
A Report Submitted to Department of Information Engineering
Motion sensing game
Advisor:黃慶祥
Student：曾宥翔、葉柏鈞、莊明浩
致謝
很榮幸能邀請到黃慶祥擔任指導，在我們研究的過程中 一步一步提供建議跟指導，使我們的研究可以獲得改善的方 向。
目錄
第一章 緒論 6
1. 1.1 摘要 6
2. 1.2 研究背景 7
3. 1.3 研究動機 7
4. 1.4 研究目的 8
5. 1.5 研究內容與方法 8
第二章 系統開發與平台 9
6. 2.1 配備需求 9
7. 2.2 開發工具 notepad++ 10
2.2.1 簡介 10
8. 2.3 開發工具 Visual Studio 2010 10
2.3.1 簡介 10
9. 2.4 Kinect硬體介紹 11
第三章 研究方法與步驟 12
10. 3.1 系統架構 12
11. 3.2 系統流程 12
12. 3.3實作過程(PC端) 13
3.3.2 畫面帶動的運算 15
3.3.3 人物資源讀取 16
3.3.4 音源資源讀取 17
3.3.5 載入緩衝機制 18
3.3.6 關卡選擇 19
3.3.7 關卡產生 21
3.3.8 連線遊玩 22
13. 3.4 Kinect遙控端 23
3.4.1 WPF專案建置、控制項 23 3.4.2 Kinect UI介面設計 25 3.4.3 Kinect 肢體語言設計 26 3.4.3 Kinect 骨架偵測 28 3.4.4 Kinect關節點程式 29
3.4.5 遊戲控制方式 32
14. 3.5 美術製作 33
第四章 結果與討論 35
15. 4.1 遇到的問題： 35
16. 4.2 未來展望： 35
參考文獻 36
第一章 緒論
1.1 摘要
本專題研究為利用kinect捕捉肢體功能與HTML5、Javasript的高 平台相容性，製作一款主動捕捉使用者肢體動作，而藉此操作遊戲人 物的體感遊戲。
kinect端需特別注意如何讓使用者順手順暢的操作，與角色動作 的一致度是我們非常在乎的一個重點，關係到玩家融入遊戲設定的程 度；而遊戲端不採用現有引擎，記憶體運用、架構、物理運算與程式 可能產生的盲點都是特別要小心的重點，關係到開發速度、遊戲的運 行順暢度與硬體需求；美術與音效方面，因為沒有專業的知識與經 驗，則只能倚賴網路素材與些微的自製。
1.2 研究背景
科技日益進步，隨著時代變遷虛擬已逐漸取代日常生活的許多功 能，而就娛樂遊戲這塊的發展也不斷進化。台灣近年的遊戲業也成長 不少，其周邊如主題曲、畫冊同時也具有額外的市場，擁有龐大的市 場。
而在硬體上，從滑鼠鍵盤、手把到體感手把，最近更是往肢體捕 捉、虛擬實境、頭戴式顯示器發展。結合實際動作的方式，令玩家更 加深刻的體會到進入場景及人物的代入感，比起以往的硬體控制器而 言不再是單純使用手部，其臨場感使玩家擁有全新的遊戲體驗。
1.3 研究動機
近年來電玩產業快速成長，研究組員們曾經也是對體感遊戲非常 熱血，並對其抱持高度期待，卻深感其推出數量過少，而分析其原因 一為開發成本過高，大廠不敢冒然投資，小廠能力僅能製作小遊戲；
二為小廠無法掌握玩家想要的要素，使目前大多遊戲缺乏高度結合，
即其操控並無讓玩家覺得深入其境而產生共鳴。因此導致很多體感遊 戲銷量不佳，而產生更不願意投資的循環。
1.4 研究目的
本專題研究目的旨在活用 kinect 捕捉人體動作，並設法順暢與 設備連動的方法；同時對 HTML5(少許)與 javascript 進行研究，設 計出適合編寫、開發簡單 2D 遊戲的函式庫，並以此為基礎開發簡單 的闖關遊戲，以供開發參考。
1.5 研究內容與方法
研究內容主要就是以有較高相容性、支援多平台的方式撰寫遊 戲，並以各種可以捕捉體感的裝置進行連動，控制遊玩。
而本組決定遊戲以HTML5撰寫，並針對PC平台使用kinect進行體 感捕捉、遊玩。
第二章 系統開發與平台
2.1 配備需求
Kinect for windows感應器 PC需求如下：
硬體需求：
2.66-GHz、雙核心以上的CPU 支援DirectX® 9.0c的顯示卡
2GB以上的記憶體(建議加到4G以上) 軟體需求：
Windows 7 (32位元或64位元版本皆可)
Visual Studio 2010 Express (或是其他版本的Visual Studio 2010) Microsoft .NET Framework 4.0
圖一：kinect
2.2 開發工具 notepad++
2.2.1 簡介
Notepad++是一款純文字編輯器，相較系統內建的文字編輯軟體而言 其功能更適合用來撰寫程式時使用。因可以辨別語法，並使其依據不 同功能以自訂的顏色跟自行來凸顯，且具有摺疊功能，對於程式的編 寫是當下十分常見的工具。
2.3 開發工具 Visual Studio 2010
2.3.1 簡介
Visual Studio 是 用 來 建 置 ASP.NET Web 應 用 程 式 、 XML Web Services、桌面應用程式及行動應用程式的一套完整開發工具。Visual Basic 、 Visual C# 和 Visual C++ 都 使 用 相 同 的 整 合 式 開 發 環 境 (IDE)，如此一來便可以共用工具，並且可以簡化混合語言方案的建 立程序。此外，這些語言可使用 .NET Framework 強大的功能，簡化 ASP Web 應用程式與 XML Web Services 開發的工作。
2.4 Kinect硬體介紹
Kinect for Xbox 360，簡稱Kinect，是由微軟開發，應用於Xbox 360 主 機的周邊設備。它讓玩家不需要手持或踩踏控制器，而是使用語音指 令或手勢來操作Xbox360 的系統界面。它也能捕捉玩家全身上下的動 作，用身體來進行遊戲，帶給玩家“免控制器的遊戲與娛樂體驗”。
Kinect有三個鏡頭，中間的鏡頭是RGB 彩色攝影機，用來錄製彩色圖 像。左右兩邊鏡頭則分別為紅外線發射器和紅外線CMOS 攝影機所構 成的3D結構光深度感應器，用來擷取深度數據（場景中物體到攝影機 的距離）。彩色攝影機的最高解析度為1280*960，紅外攝影機的最高 解析度則為640*480成像。Kinect還搭配了追焦技術，底座馬達會隨著 對焦物體移動跟著轉動。
上圖為由kinect抓去地面圖像示意圖
第三章 研究方法與步驟
3.1 系統架構
3.2 系統流程
3.3實作過程(PC端)
3.3.1 引擎的基礎與單位設計
設計遊戲核心函式(引擎)，先設計一個擁有多項參數的物件當作 原型，以此為標準產生各個人物、地圖物件。每秒30次計算各個人物 的圖像處理、判定速度、判定物體碰撞，最後將結果顯示出來。
下圖為引擎的物理運算可以賦予物體速度與加速度的演示。
施放一個一秒後提高速度的火箭技能，擊殺對象。
物理運算並非直接將腳色於畫面中移動，而是實際計算了各個物件的 實際座標，再經由鏡頭處理顯示的位置，並決定地圖事件的觸發與 否。
3.3.2 畫面帶動的運算
自己設計的智慧鏡頭移動，根據全部玩家計算適合的鏡頭控制，
避免有玩家超出畫面不知道自己在哪個位置；地圖無縫捲動設計經由 兩次的影像運算，將兩張圖片無縫的銜接在一起。達到多張圖片連續 顯示成一長幅畫的效果。引擎會依序自動讀取，只要在素材資料夾按 照數字排列圖片即可，無須手動設定各個圖片的編號。下圖為當腳色 往右移動時，背景往左的運作方式。
輸出1 輸出2
3.3.3 人物資源讀取
人物圖片資源的讀入，採取了最流行最有效率的方法，先將整張 的人物動作表讀入以後，再以程式進行分割顯示，可以將畫面轉換的 瑕疵降到最低。並且也設有邊界補正，彌補角色視覺上跟實際運算不 同的不良遊戲體驗。
輸出1 輸出2
3.3.4 音源資源讀取
對於聲音表現上，一開始遇上了 iOS 平台無法正常播放的情況，
調查以後發現 iOS 環境必須要先讓使用者有操作以後才允許播放聲 音。因此這邊直接採用 howler 聲音函式庫，其周詳的考量，特別針 對了 iOS 上面多加了一道手續，在使用者開始遊戲時就先觸發，播放 無聲的聲音檔案，而使接下來的聲音可以正確的播放出來。
示意圖↑：多種利用 howler 函式庫的遊戲範例，顯示其高度的相容 性。
3.3.5 載入緩衝機制
作為WEB遊戲的可能性，同時還有考量到網路載入的問題，因此 特別多了一道緩衝的機制，當全部的物件都確定載入完畢以後，才會 開始執行遊戲。考量到開發速度與便利性，使用了LL的函式庫。
於製作後期時，考量到使用資源並不大，因此隱藏此載入的畫面。
圖↑：載入過程 圖↓：載入完畢以後
3.3.6 關卡選擇
關卡部分，使用者一開始是可以經由地圖移動的方式選擇關卡，
地圖配置是隨機產生的，因此每一次都可以有不同的體驗。
目前的演算法其實主要是地圖的配置、不同方向的交界點會有邊緣補 正（垂直轉彎的地方會用特殊的圖案，使其看起來較自然）
然而，還是有改進的空間，如下圖為兩次隨機產生的對照組，
第二張圖左方的部份產生了一個不必要的回字地型安排，
這條道路並不是玩家前往最終目標（城堡）的必經路徑，
也沒有獎勵安排（黑色外框圖案的關卡），變成一個多餘的關卡布局。
3.3.7 關卡產生
遊戲實際內容的部份，關卡經由程式計算隨機產生，
主要內容分為前景、前背景、後背景。
兩個背景主要是以不同的速度進行捲動，以產生動態感；
而前景的部份則是由地型與角色、怪物組成。地型的部份也如關卡選 擇雷同，會在地形交界處進行特殊處理，多個種類的怪物增加趣味度。
道具的部份則隨機分布在可以撞擊的磚塊中，
角色可以由這些關卡中的道具獲得傷害免疫或者具有特殊能力。
3.3.8 連線遊玩
利用upgrade指令，web socket 技術可以為我們的遊戲降低流量 的需求、降低玩家遊玩的延遲。連線方法方面，我們利用了一個伺服 器來蒐集各個節點的IP與port訊息，再回傳配對到的玩家。這麼做的 意思即為玩家自身才是處理Host的傳輸，伺服器僅僅是負責配對，好 處就是我們不必負擔玩家遊玩的流量。同時，在遊戲一開始的選單中 玩家可以自創房間，就可以與自己約好的朋友一起玩耍。
3.4 Kinect遙控端
3.4.1 WPF專案建置、控制項
(1)首先建立一個WPF Application專案，自行命名
圖為新建WPF專案 (2)在專案加入Microsoft.Kinect參考
圖為增加Microsoft.Kinect 參考
(3)完成後的參考資料
圖為匯入完成圖
3.4.2 Kinect UI介面設計
先建立MainWindow.xaml的畫面擋
圖為建立畫面
圖為MainWindow.xaml程式代碼
3.4.3 Kinect 肢體語言設計
(1)優化骨架追蹤
優化骨架追蹤方式，載入平滑處理參數，若無此舉，還滿容易受雜 訊干擾。
圖為減少kinect干擾誤差 (2)取得骨架結點
宣告取得各骨架結點
圖為宣告取得個格骨架關節點
(3螢幕圖案位置建立
圖為3D座標在畫面螢幕位置處理成2D坐標
(3)以常數定義肢體動作判斷設定值，用於動作捕捉事件觸發
定義手臂垂直舉起設定值、手臂水平延伸設定值、跳躍的落差設定 值
圖為所宣告的各個動作初始值跟用於判斷值
3.4.3 Kinect 骨架偵測
圖2 骨架
計算人體骨架的支點，並所使用的有手部與頭部支點，屬與開發上半 身供遊戲使用。
3.4.4 Kinect關節點程式
(1)角色移動
圖為判斷身體跟手距離以下圖做變化
圖為判斷身體跟手X軸距離差異
以左右手X軸移動判斷來看，抓取到雙手與身體座標關節點，判斷雙 手X關節點是否有大於手臂水平延長距離，若有則判斷為左右移動。
圖為判斷雙手是否有大餘手臂水平距離差異
圖為判斷左移與右移觸發電腦鍵盤來控制遊戲角色左移或右移 (2)技能設定
以左右手向前Z軸移動判斷來看，抓取到雙手與身體座標關節點，判 斷雙手Z軸關節點是否有大於身體Z軸關節點，若有則判斷為技能施 放。
圖為判斷雙手Z軸是否有大餘身體Z軸以及雙手Y軸大餘設定值
圖為判斷技能觸發電腦鍵盤來控制遊戲角色施放技能
(3)跳躍設定
圖為判斷頭部位置升高距離觸發跳躍
圖為判斷跳躍觸發電腦鍵盤來控制遊戲角色跳躍
3.4.5 遊戲控制方式
遊戲角色動作 玩家動作 向右前進 右手水平伸出 向左前進 左手水平伸出
跳躍 雙腳離地向上跳躍
攻擊 右手或左手向前揮動
3.5 美術製作
1.將模組匯入。
2.透過下面的功能攔來調整人物的動作。
3.藉由調整X軸Y軸Z軸來調整人物各個關節的角度藉此來自做各種動 作。
4.最後將所製作的畫格整合成一套動作
第四章 結果與討論
4.1 遇到的問題：
在難度上是本次作品較難拿捏的部份。地圖產生上如果過難，對 於體感遊戲來說會變得沒有快感(消耗過多時間在移動高低差與過關 上)，但如果過於簡單，也一樣會變得乏味，盡管關卡是隨機產生的。
然而，隨機關卡是本組認為提高遊戲趣味度與耐玩度的一大部分，因 此不希望取捨這部份。
在體感操作部分在決策上也花費許多時間討論與測試，人物的移 動如果全權給玩家操作，自由度上面固然是比較高的，但當使用者要 同時進行其他動作（如攻擊、跳躍）就會比較難操作；若改成人物自 動向右跑，則必須降低地形的難度。
4.2 未來展望：
未來開發上可以增加更多的角色，以不同的屬性給玩家有不同的 遊玩體驗，攻擊方式也可以更多樣更絢麗。
參考文獻
Kinect for Windows 開發 網站
網址 : http://msdn.microsoft.com/zh-tw/hh367958 Kinect SDK
網址 :
http://www.dotblogs.com.tw/ouch1978/category/5195.aspx Kinect for Windows 開發網站
網址 : http://msdn.microsoft.com/zh-tw/hh367958 C# 程式設計網站 網址 :
http://msdn.microsoft.com/zh-tw/library/aa288435(VS.71).asp x
Stackoverflow 國外最大程式論壇 網址 :http://stackoverflow.com MMD 介紹
http://goo.gl/Fwx3rl
網
址 :http://viml.nchc.org.tw/blog/sub_class.php?SUB_ID=1&CLA SS_ID=1
Kinect for Windows SD 開發入門(六)：骨骼追踪基礎 網址 :
http://www.cnblogs.com/yangecnu/archive/2012/04/06/KinectSD K_Skeleton_Tracking_Part1.html
官方的 API 介紹，寫作程式時少不了的 Kinect for Windows Programming Guide：
http://msdn.microsoft.com/en-us/library/hh855348.aspx Kinect SDK 的教學影片：
http://channel9.msdn.com/Series/KinectSDKQuickstarts?sort=r ecent#tab_sortBy_recent
Kinect SDK 的開發指南：
http://research.microsoft.com/en-us/um/redmond/projects/kin ectsdk/guides.aspx
Kinect SDK 的官方論壇：
http://social.msdn.microsoft.com/Forums/en-US/kinectsdk/thr eads
一群來自卡內基梅隆的學生使用 Kinect 的互動特點實現了 18 個有趣 的想法。
原文及影片連結：
http://golancourses.net/2011spring/projects/project-3-inter action/ 1. Comic
1. Comic Kinect
此示例主要應用了 Kinect 的骨架追蹤技術和玩家分段數據，將拳 擊和腳踢的動作透過可視的漫畫效果表現出來，並且同步發出一 些音效。
2. Mario Boo
當 Kinect 傳感器檢測到有人出現在視角範圍內時，會出現一個幽 靈保持在人的背後，隨著人的運動而運動，並且會根據深度的遠 近而改變自身大小。
3. Magrathea Magrathea
使用 Kinect 根據桌上的任何物體動態的產生地形圖。是影機讀取 桌上物體的不斷變化深度資訊，可以展現出類似地球地形逐漸進 化的過程。
從中國舞獅中獲取靈感，運用 Kinect 的骨架追蹤技術，兩個人分別 同坐自己的四肢操縱虛擬怪獸的四肢和頭尾。
5. Mix&Match Interaction Toy
使用了 Kinect/OpenNI 骨架技術，使得 3 張卡片組成的人體可以跟 玩家互動，並且透過手的滑動更換圖片。
6. Kinect Flock
作者創建了一個微粒系統，當用戶移動時，像棉絮一樣的東西會隨之 動作，當用戶靜止時，則聚集到參與者的深度區域。
7. roboScanroboScan
是一個 3D 模型+掃描儀，將一個 Kinect 設備固定在一個 ABB 4400 機 械手上。設定好的動作和操作者同時控制機器人和攝影機的 3D 位置。
Kinect 的深度數據用來產生一個精確的外部環境的模型。
8. Neurospasta Neurospasta
是一個需要全身投入的自由形態遊戲平台。參與者可以控制他們各自 基於 Kinect 的木偶，也可以透過功能設定控制別人的化身。
9. Will-o-the-Wisp
這個設計充滿了神秘色彩，玩家可以控制一個發光的球體，球體根據 玩家手的運動而動，根據深度資訊變大或變小。
10. Balloon Grab
透過檢測手掌張開還是握緊的手勢，作者開發了一個基於模擬氣球飛 行的簡易小遊戲。
11. Hand-Tracking Visualization
該軟體使用手勢控制音頻的可視化效果，結合偵測到場景中手距 Kinect 的深度資訊。參與者手的位置，速度以及其他參數被用來建 立一個交互式的聲音的可視化效果。
