欧美亚洲中文,在线国自产视频,欧洲一区在线观看视频,亚洲综合中文字幕在线观看

      1. <dfn id="rfwes"></dfn>
          <object id="rfwes"></object>
        1. 站長資訊網(wǎng)
          最全最豐富的資訊網(wǎng)站

          HTML5開發(fā)Kinect體感游戲?qū)嵗斀?/a>


          一、簡介

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

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

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

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

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

          1、采集數(shù)據(jù)

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

          • 色彩數(shù)據(jù):彩色圖像;

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

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

          2、使瀏覽器可訪問到Kinect數(shù)據(jù)

          我嘗試和了解過的框架,基本上是以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)行開發(fā),API較為完整,貌似收費(fèi);

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

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

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

          HTML5開發(fā)Kinect體感游戲?qū)嵗斀?/></p>
<ul>
<li>
<p>Kinect: 捕獲玩家數(shù)據(jù),比如深度圖像、彩色圖像等;</p>
</li>
<li>
<p>Node-Kinect2: 從Kinect獲取相應(yīng)數(shù)據(jù),并進(jìn)行二次加工;</p>
</li>
<li>
<p>瀏覽器: 監(jiān)聽node應(yīng)用指定接口,獲取玩家數(shù)據(jù)并完成游戲開發(fā)。</p>
</li>
</ul>
<h3><strong>三、準(zhǔn)備工作</strong></h3>
<p>先得買個(gè)Kinect啊</p>
<p>1、系統(tǒng)要求:</p>
<p>這是硬性要求,我曾在不符合要求的環(huán)境下浪費(fèi)太多時(shí)間。</p>
<ul>
<li>
<p>USB3.0</p>
</li>
<li>
<p>支持DX11的顯卡</p>
</li>
<li>
<p>win8及以上系統(tǒng)</p>
</li>
<li>
<p>支持Web Sockets的瀏覽器</p>
</li>
<li>
<p>當(dāng)然Kinect v2傳感器是少不了的</p>
</li>
</ul>
<p>2、環(huán)境搭建流程:</p>
<ol>
<li>
<p>連接上Kinect v2</p>
</li>
<li>
<p>安裝  KinectSDK-v2.0</p>
</li>
<li>
<p>安裝 Nodejs</p>
</li>
<li>
<p>安裝 Node-Kinect2 </p>
</li>
</ol>
<pre>npm install kinect2</pre>
</p>
<h3><strong>四、實(shí)例演示</strong></h3>
<p>說什么都不如給我一個(gè)例子!</p>
<p>如下圖所示,我們演示如何獲取人體骨骼,并標(biāo)識(shí)脊椎中段及手勢:</p>
<p style=HTML5開發(fā)Kinect體感游戲?qū)嵗斀?/></p>
<p>1、服務(wù)器端</p>
<p>創(chuàng)建web服務(wù)器,并將骨骼數(shù)據(jù)發(fā)送到瀏覽器端,代碼如下:</p>
<pre>var Kinect2 = require('../../lib/kinect2'),  	express = require('express'),  	app = express(),  	server = require('http').createServer(app),  	io = require('socket.io').listen(server);    var kinect = new Kinect2();  // 打開kinect  if(kinect.open()) {  	// 監(jiān)聽8000端口  	server.listen(8000);  	// 指定請(qǐng)求指向根目錄  	app.get('/', function(req, res) {  		res.sendFile(dirname + '/public/index.html');  	});  	// 將骨骼數(shù)據(jù)發(fā)送給瀏覽器端  	kinect.on('bodyFrame', function(bodyFrame){  		io.sockets.emit('bodyFrame', bodyFrame);  	});  	// 開始讀取骨骼數(shù)據(jù)  	kinect.openBodyReader();  }</pre>
</p>
<p>2、瀏覽器端</p>
<p>瀏覽器端獲取骨骼數(shù)據(jù),并用canvas描繪出來,關(guān)鍵代碼如下:</p>
<pre>var socket = io.connect('/');  var ctx = canvas.getContext('2d');  socket.on('bodyFrame', function(bodyFrame){  	ctx.clearRect(0, 0, canvas.width, canvas.height);  	var index = 0;  	// 遍歷所有骨骼數(shù)據(jù)  	bodyFrame.bodies.forEach(function(body){  		if(body.tracked) {  			for(var jointType in body.joints) {  				var joint = body.joints[jointType];  				ctx.fillStyle = colors[index];  				// 如果骨骼節(jié)點(diǎn)為脊椎中點(diǎn)  				if(jointType == 1) {  					ctx.fillStyle = colors[2];  				}  				ctx.fillRect(joint.depthX * 512, joint.depthY * 424, 10, 10);  			}  			// 識(shí)別左右手手勢  			updateHandState(body.leftHandState, body.joints[7]);  			updateHandState(body.rightHandState, body.joints[11]);  			index++;  		}  	});  });</pre>
</p>
<p>很簡單的幾行代碼,我們便完成了玩家骨骼捕獲,有一定 javascript基礎(chǔ)的同學(xué)應(yīng)該很容易能看明白,但不明白的是我們能獲取哪些數(shù)據(jù)?如何獲???骨骼節(jié)點(diǎn)名稱分別是什么?而node-kienct2并沒有文檔告訴我們這些。</p>
<h3><strong>五、開發(fā)文檔</strong></h3>
<p>Node-Kinect2并沒有提供文檔,我將我測試總結(jié)的文檔整理如下:</p>
<p>1、服務(wù)器端能提供的數(shù)據(jù)類型;</p>
<pre>kinect.on('bodyFrame', function(bodyFrame){}); //還有哪些數(shù)據(jù)類型呢?</pre>
</p>
<table>
<tbody>
<tr>
<td>bodyFrame</td>
<td>骨骼數(shù)據(jù)</td>
</tr>
<tr>
<td>infraredFrame</td>
<td>紅外數(shù)據(jù)</td>
</tr>
<tr>
<td>longExposureInfraredFrame</td>
<td>類似infraredFrame,貌似精度更高,優(yōu)化后的數(shù)據(jù)</td>
</tr>
<tr>
<td>rawDepthFrame</td>
<td>未經(jīng)處理的景深數(shù)據(jù)</td>
</tr>
<tr>
<td>depthFrame</td>
<td>景深數(shù)據(jù)</td>
</tr>
<tr>
<td>colorFrame</td>
<td>彩色圖像</td>
</tr>
<tr>
<td>multiSourceFrame</td>
<td>所有數(shù)據(jù)</td>
</tr>
<tr>
<td>audio</td>
<td>音頻數(shù)據(jù),未測試</td>
</tr>
</tbody>
</table>
<p>2、骨骼節(jié)點(diǎn)類型</p>
<pre>body.joints[11] // joints包括哪些呢?</pre>
</p>
<table>
<tbody>
<tr>
<td>節(jié)點(diǎn)類型</td>
<td>JointType</td>
<td>節(jié)點(diǎn)名稱</td>
</tr>
<tr>
<td>0</td>
<td>spineBase</td>
<td>脊椎基部</td>
</tr>
<tr>
<td>1</td>
<td>spineMid</td>
<td>脊椎中部</td>
</tr>
<tr>
<td>2</td>
<td>neck</td>
<td>頸部</td>
</tr>
<tr>
<td>3</td>
<td>head</td>
<td>頭部</td>
</tr>
<tr>
<td>4</td>
<td>shoulderLeft</td>
<td>左肩</td>
</tr>
<tr>
<td>5</td>
<td>elbowLeft</td>
<td>左肘</td>
</tr>
<tr>
<td>6</td>
<td>wristLeft</td>
<td>左腕</td>
</tr>
<tr>
<td>7</td>
<td>handLeft</td>
<td>左手掌</td>
</tr>
<tr>
<td>8</td>
<td>shoulderRight</td>
<td>右肩</td>
</tr>
<tr>
<td>9</td>
<td>elbowRight</td>
<td>右肘</td>
</tr>
<tr>
<td>10</td>
<td>wristRight</td>
<td>右腕</td>
</tr>
<tr>
<td>11</td>
<td>handRight</td>
<td>右手掌</td>
</tr>
<tr>
<td>12</td>
<td>hipLeft</td>
<td>左屁</td>
</tr>
<tr>
<td>13</td>
<td>kneeLeft</td>
<td>左膝</td>
</tr>
<tr>
<td>14</td>
<td>ankleLeft</td>
<td>左踝</td>
</tr>
<tr>
<td>15</td>
<td>footLeft</td>
<td>左腳</td>
</tr>
<tr>
<td>16</td>
<td>hipRight</td>
<td>右屁</td>
</tr>
<tr>
<td>17</td>
<td>kneeRight</td>
<td>右膝</td>
</tr>
<tr>
<td>18</td>
<td>ankleRight</td>
<td>右踝</td>
</tr>
<tr>
<td>19</td>
<td>footRight</td>
<td>右腳</td>
</tr>
<tr>
<td>20</td>
<td>spineShoulder</td>
<td>頸下脊椎</td>
</tr>
<tr>
<td>21</td>
<td>handTipLeft</td>
<td>左手指(食中無小)</td>
</tr>
<tr>
<td>22</td>
<td>thumbLeft</td>
<td>左拇指</td>
</tr>
<tr>
<td>23</td>
<td>handTipRight</td>
<td>右手指</td>
</tr>
<tr>
<td>24</td>
<td>thumbRight</td>
<td>右拇指</td>
</tr>
</tbody>
</table>
<p>3、手勢,據(jù)測識(shí)別并不是太準(zhǔn)確,在精度要求不高的情況下使用</p>
<table>
<tbody>
<tr>
<td>0</td>
<td>unknown</td>
<td>不能識(shí)別</td>
</tr>
<tr>
<td>1</td>
<td>notTracked</td>
<td>未能檢測到</td>
</tr>
<tr>
<td>2</td>
<td>open</td>
<td>手掌</td>
</tr>
<tr>
<td>3</td>
<td>closed</td>
<td>握拳</td>
</tr>
<tr>
<td>4</td>
<td>lasso</td>
<td>剪刀手,并合并中食指</td>
</tr>
</tbody>
</table>
<p>4、骨骼數(shù)據(jù)</p>
<p>body [object] {</p>
<p>bodyIndex [number]:索引,允許6人</p>
<p>joints [array]:骨骼節(jié)點(diǎn),包含坐標(biāo)信息,顏色信息</p>
<p>leftHandState [number]:左手手勢</p>
<p>rightHandState [number]:右手手勢</p>
<p>tracked [boolean]:是否捕獲到</p>
<p>trackingId</p>
<p>} </p>
<p>5、kinect對(duì)象</p>
<table>
<tbody>
<tr>
<td>on</td>
<td>監(jiān)聽數(shù)據(jù)</td>
</tr>
<tr>
<td>open</td>
<td>打開Kinect</td>
</tr>
<tr>
<td>close</td>
<td>關(guān)閉</td>
</tr>
<tr>
<td>openBodyReader</td>
<td>讀取骨骼數(shù)據(jù)</td>
</tr>
<tr>
<td>open**Reader</td>
<td>類似如上方法,讀取其它類型數(shù)據(jù)</td>
</tr>
</tbody>
</table>
<h3><strong>六、實(shí)戰(zhàn)總結(jié)</strong></h3>
<p>火影體感游戲經(jīng)驗(yàn)總結(jié)</p>
<p>接下來,我總結(jié)一下TGC2016《火影忍者手游》的體感游戲開發(fā)中碰到的一些問題。</p>
<p>1、講解之前,我們首先需要了解下游戲流程。</p>
<table>
<tbody>
<tr>
<td>
<p><img src= 贊(0)

          分享到: 更多 (0)
          網(wǎng)站地圖   滬ICP備18035694號(hào)-2    滬公網(wǎng)安備31011702889846號(hào)