一、簡(jiǎn)介

我們要做的是怎樣一款游戲？

　　在前不久成都TGC2016展會(huì)上，我們開(kāi)發(fā)了一款《火影忍者手游》的體感游戲，主要模擬手游章節(jié)《九尾襲來(lái) 》，用戶化身四代，與九尾進(jìn)行對(duì)決，吸引了大量玩家參與。 表面上看，這款游戲與其它體感體驗(yàn)無(wú)異，實(shí)際上，它一直運(yùn)行于瀏覽器Chrome下，也就是說(shuō)，我們只需要掌握前端相應(yīng)技術(shù)，就可以開(kāi)發(fā)基于Kinect的網(wǎng)頁(yè)體感游戲。

 

二、實(shí)現(xiàn)原理

實(shí)現(xiàn)思路是什么？

　　使用H5開(kāi)發(fā)基于Kinect的體感游戲，其實(shí)工作原理很簡(jiǎn)單，由Kinect采集到玩家及環(huán)境數(shù)據(jù)，比如人體骨骼，使用某種方式，使瀏覽器可以訪問(wèn)這些數(shù)據(jù)。


1、采集數(shù)據(jù)
　　Kinect有三個(gè)鏡頭，中間鏡頭類(lèi)似普通攝像頭，獲取彩色圖像。左右兩邊鏡頭則是通過(guò)紅外線獲取深度數(shù)據(jù)。我們使用微軟提供的SDK去讀取以下類(lèi)型數(shù)據(jù)：

  • 色彩數(shù)據(jù)：彩色圖像；

  • 深度數(shù)據(jù)：顏色嘗試信息；

  • 人體骨骼數(shù)據(jù)：基于以上數(shù)據(jù)經(jīng)計(jì)算，獲取到人體骨骼數(shù)據(jù)。

 


2、使瀏覽器可訪問(wèn)到Kinect數(shù)據(jù)
我嘗試和了解過(guò)的框架，基本上是以socket讓瀏覽器進(jìn)程與服務(wù)器進(jìn)行通信 ，進(jìn)行數(shù)據(jù)傳輸：

  • Kinect-HTML5 用C#搭建服務(wù)端，色彩數(shù)據(jù)、嘗試數(shù)據(jù)、骨骼數(shù)據(jù)均有提供；

  • ZigFu 支持H5、U3D、Flash進(jìn)行開(kāi)發(fā)，API較為完整，貌似收費(fèi)；

  • DepthJS  以瀏覽器插件形式提供數(shù)據(jù)訪問(wèn)；

  • Node-Kinect2 以Nodejs搭建服務(wù)器端，提供數(shù)據(jù)比較完整，實(shí)例較多。

我最終選用Node-Kinect2，雖然沒(méi)有文檔，但是實(shí)例較多，使用前端工程師熟悉的Nodejs，另外作者反饋比較快。