原文鏈接:https://www.cnblogs.com/wanbo/archive/2016/12/26/6222993.html
一、簡介
我們要做的是怎樣一款遊戲?
在前不久成都TGC2016展會上,我們開發了一款《火影忍者手遊》的體感遊戲,主要模擬手遊章節《九尾襲來 》,用戶化身四代,與九尾進行對決,吸引了大量玩家參與。 表面上看,這款遊戲與其它體感體驗無異,實際上,它一直運行於瀏覽器Chrome下,也就是說,我們只需要掌握前端相應技術,就可以開發基於Kinect的網頁體感遊戲。
二、實現原理
實現思路是什麼?
使用H5開發基於Kinect的體感遊戲,其實工作原理很簡單,由Kinect採集到玩家及環境數據,比如人體骨骼,使用某種方式,使瀏覽器可以訪問這些數據。
1、採集數據 Kinect有三個鏡頭,中間鏡頭類似普通攝像頭,獲取彩色圖像。左右兩邊鏡頭則是通過紅外線獲取深度數據。我們使用微軟提供的SDK去讀取以下類型數據:
- 色彩數據:彩色圖像;
- 深度數據:顏色嘗試信息;
- 人體骨骼數據:基於以上數據經計算,獲取到人體骨骼數據。
2、使瀏覽器可訪問到Kinect數據 我嘗試和了解過的框架,基本上是以socket讓瀏覽器進程與服務器進行通信 ,進行數據傳輸:
- Kinect-HTML5 用C#搭建服務端,色彩數據、嘗試數據、骨骼數據均有提供;
- ZigFu 支持H5、U3D、Flash進行開發,API較爲完整,貌似收費;
- DepthJS 以瀏覽器插件形式提供數據訪問;
- Node-Kinect2 以Nodejs搭建服務器端,提供數據比較完整,實例較多。
我最終選用Node-Kinect2,雖然沒有文檔,但是實例較多,使用前端工程師熟悉的Nodejs,另外作者反饋比較快。
- Kinect: 捕獲玩家數據,比如深度圖像、彩色圖像等;
- Node-Kinect2: 從Kinect獲取相應數據,並進行二次加工;
- 瀏覽器: 監聽node應用指定接口,獲取玩家數據並完成遊戲開發。
三、準備工作
先得買個Kinect啊
1、系統要求: 這是硬性要求,我曾在不符合要求的環境下浪費太多時間。
- USB3.0
- 支持DX11的顯卡
- win8及以上系統
- 支持Web Sockets的瀏覽器
- 當然Kinect v2傳感器是少不了的
2、環境搭建流程:
- 連接上Kinect v2
- 安裝 KinectSDK-v2.0
- 安裝 Nodejs
- 安裝 Node-Kinect2
1 |
|
四、實例演示
說什麼都不如給我一個例子!
如下圖所示,我們演示如何獲取人體骨骼,並標識脊椎中段及手勢: 1、服務器端 創建web服務器,並將骨骼數據發送到瀏覽器端,代碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
2、瀏覽器端 瀏覽器端獲取骨骼數據,並用canvas描繪出來,關鍵代碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
很簡單的幾行代碼,我們便完成了玩家骨骼捕獲,有一定 javascript基礎的同學應該很容易能看明白,但不明白的是我們能獲取哪些數據?如何獲取?骨骼節點名稱分別是什麼?而node-kienct2並沒有文檔告訴我們這些。
五、開發文檔
Node-Kinect2並沒有提供文檔,我將我測試總結的文檔整理如下:
1、服務器端能提供的數據類型;
1 |
|
bodyFrame | 骨骼數據 |
infraredFrame | 紅外數據 |
longExposureInfraredFrame | 類似infraredFrame,貌似精度更高,優化後的數據 |
rawDepthFrame | 未經處理的景深數據 |
depthFrame | 景深數據 |
colorFrame | 彩色圖像 |
multiSourceFrame | 所有數據 |
audio | 音頻數據,未測試 |
2、骨骼節點類型
1 |
|
節點類型 | JointType | 節點名稱 |
0 | spineBase | 脊椎基部 |
1 | spineMid | 脊椎中部 |
2 | neck | 頸部 |
3 | head | 頭部 |
4 | shoulderLeft | 左肩 |
5 | elbowLeft | 左肘 |
6 | wristLeft | 左腕 |
7 | handLeft | 左手掌 |
8 | shoulderRight | 右肩 |
9 | elbowRight | 右肘 |
10 | wristRight | 右腕 |
11 | handRight | 右手掌 |
12 | hipLeft | 左屁 |
13 | kneeLeft | 左膝 |
14 | ankleLeft | 左踝 |
15 | footLeft | 左腳 |
16 | hipRight | 右屁 |
17 | kneeRight | 右膝 |
18 | ankleRight | 右踝 |
19 | footRight | 右腳 |
20 | spineShoulder | 頸下脊椎 |
21 | handTipLeft | 左手指(食中無小) |
22 | thumbLeft | 左拇指 |
23 | handTipRight | 右手指 |
24 | thumbRight | 右拇指 |
3、手勢,據測識別並不是太準確,在精度要求不高的情況下使用
0 | unknown | 不能識別 |
1 | notTracked | 未能檢測到 |
2 | open | 手掌 |
3 | closed | 握拳 |
4 | lasso | 剪刀手,併合並中食指 |
4、骨骼數據 body [object] { bodyIndex [number]:索引,允許6人 joints [array]:骨骼節點,包含座標信息,顏色信息 leftHandState [number]:左手手勢 rightHandState [number]:右手手勢 tracked [boolean]:是否捕獲到 trackingId }
5、kinect對象
on | 監聽數據 |
open | 打開Kinect |
close | 關閉 |
openBodyReader | 讀取骨骼數據 |
open**Reader | 類似如上方法,讀取其它類型數據 |
六、實戰總結
火影體感遊戲經驗總結
接下來,我總結一下TGC2016《火影忍者手遊》的體感遊戲開發中碰到的一些問題。
1、講解之前,我們首先需要了解下游戲流程。
1.1、通過手勢觸發開始遊戲 |
1.2、玩家化身四代,左右跑動躲避九尾攻擊 |
1.3、擺出手勢“奧義”,觸發四代大招 |
1.4、用戶掃描二維碼獲取自己現場照片 |
2、服務器端 遊戲需要玩家骨骼數據(移動、手勢),彩色圖像數據(某一手勢下觸發拍照),所以我們需要向客戶端發送這兩部分數據。值得注意的是,彩色圖像數據體積過大,需要進行壓縮。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
|
3、客戶端 客戶端業務邏輯較複雜,我們提取關鍵步驟進行講解。 3.1、用戶拍照時,由於處理的數據比較大,爲防止頁面出現卡頓,我們需要使用web worker
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
|
3.2、接投影儀後,如果渲染面積比較大,會出現白屏,需要關閉瀏覽器硬件加速。
3.3、現場光線較暗,其它玩家干擾,在追蹤玩家運動軌跡的過程中,可能會出現抖動的情況,我們需要去除干擾數據。(當突然出現很大位移時,需要將數據移除)
1 2 3 4 5 6 7 8 9 10 |
|
3.4、當玩家站立,只是左右少量晃動時,我們認爲玩家是站立狀態。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
七、展望
1、使用HTML5開發Kinect體感遊戲,降低了技術門檻,前端工程師可以輕鬆的開發體感遊戲; 2、大量的框架可以應用,比如用JQuery、CreateJS、Three.js(三種不同渲染方式); 3、無限想象空間,試想下體感遊戲結合webAR,結合webAudio、結合移動設備,太可以挖掘的東西了……想想都激動不是麼!