使用HTML5開發Kinect體感遊戲

1、簡介

咱們要作的是怎樣一款遊戲？

　　在前不久成都TGC2016展會上，咱們開發了一款《火影忍者手遊》的體感遊戲，主要模擬手遊章節《九尾襲來 》，用戶化身四代，與九尾進行對決，吸引了大量玩家參與。 表面上看，這款遊戲與其它體感體驗無異，實際上，它一直運行於瀏覽器Chrome下，也就是說，咱們只須要掌握前端相應技術，就能夠開發基於Kinect的網頁體感遊戲。

 

2、實現原理

實現思路是什麼？

　　使用H5開發基於Kinect的體感遊戲，其實工做原理很簡單，由Kinect採集到玩家及環境數據，好比人體骨骼，使用某種方式，使瀏覽器能夠訪問這些數據。

一、採集數據
　　Kinect有三個鏡頭，中間鏡頭相似普通攝像頭，獲取彩色圖像。左右兩邊鏡頭則是經過紅外線獲取深度數據。咱們使用微軟提供的SDK去讀取如下類型數據：

• 色彩數據：彩色圖像；
• 深度數據：顏色嘗試信息；
• 人體骨骼數據：基於以上數據經計算，獲取到人體骨骼數據。

 

二、使瀏覽器可訪問到Kinect數據
我嘗試和了解過的框架，基本上是以socket讓瀏覽器進程與服務器進行通訊 ，進行數據傳輸：

• Kinect-HTML5 用C#搭建服務端，色彩數據、嘗試數據、骨骼數據均有提供；
• ZigFu 支持H五、U3D、Flash進行開發，API較爲完整，貌似收費；
• DepthJS  以瀏覽器插件形式提供數據訪問；
• Node-Kinect2 以Nodejs搭建服務器端，提供數據比較完整，實例較多。

我最終選用Node-Kinect2，雖然沒有文檔，可是實例較多，使用前端工程師熟悉的Nodejs，另外做者反饋比較快。

• Kinect： 捕獲玩家數據，好比深度圖像、彩色圖像等；
• Node-Kinect2： 從Kinect獲取相應數據，並進行二次加工；
• 瀏覽器： 監聽node應用指定接口，獲取玩家數據並完成遊戲開發。

 

3、準備工做

先得買個Kinect啊

一、系統要求：
這是硬性要求，我曾在不符合要求的環境下浪費太多時間。

• USB3.0
• 支持DX11的顯卡
• win8及以上系統
• 支持Web Sockets的瀏覽器
• 固然Kinect v2傳感器是少不了的

 

二、環境搭建流程：

1. 鏈接上Kinect v2
2. 安裝 KinectSDK-v2.0
3. 安裝 Nodejs
4. 安裝 Node-Kinect2 

npm install kinect2

　　

4、實例演示

說什麼都不如給我一個例子！

以下圖所示，咱們演示如何獲取人體骨骼，並標識脊椎中段及手勢：

一、服務器端
建立web服務器，並將骨骼數據發送到瀏覽器端，代碼以下：

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()) {
	// 監聽8000端口
	server.listen(8000);
	// 指定請求指向根目錄
	app.get('/', function(req, res) {
		res.sendFile(__dirname + '/public/index.html');
	});
	// 將骨骼數據發送給瀏覽器端
	kinect.on('bodyFrame', function(bodyFrame){
		io.sockets.emit('bodyFrame', bodyFrame);
	});
	// 開始讀取骨骼數據
	kinect.openBodyReader();
}

　　

二、瀏覽器端
瀏覽器端獲取骨骼數據，並用canvas描繪出來，關鍵代碼以下：

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;
	// 遍歷全部骨骼數據
	bodyFrame.bodies.forEach(function(body){
		if(body.tracked) {
			for(var jointType in body.joints) {
				var joint = body.joints[jointType];
				ctx.fillStyle = colors[index];
				// 若是骨骼節點爲脊椎中點
				if(jointType == 1) {
					ctx.fillStyle = colors[2];
				}
				ctx.fillRect(joint.depthX * 512, joint.depthY * 424, 10, 10);
			}
			// 識別左右手手勢
			updateHandState(body.leftHandState, body.joints[7]);
			updateHandState(body.rightHandState, body.joints[11]);
			index++;
		}
	});
});

　　

很簡單的幾行代碼，咱們便完成了玩家骨骼捕獲，有必定 javascript基礎的同窗應該很容易能看明白，但不明白的是咱們能獲取哪些數據？如何獲取？骨骼節點名稱分別是什麼？而node-kienct2並無文檔告訴咱們這些。

 

5、開發文檔

 

Node-Kinect2並無提供文檔，我將我測試總結的文檔整理以下：

一、服務器端能提供的數據類型；

kinect.on('bodyFrame', function(bodyFrame){}); //還有哪些數據類型呢？

　　

bodyFrame	骨骼數據
infraredFrame	紅外數據
longExposureInfraredFrame	相似infraredFrame，貌似精度更高，優化後的數據
rawDepthFrame	未經處理的景深數據
depthFrame	景深數據
colorFrame	彩色圖像
multiSourceFrame	全部數據
audio	音頻數據，未測試

 

二、骨骼節點類型

body.joints[11] // joints包括哪些呢？

　　

節點類型	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	右拇指

 

三、手勢，據測識別並非太準確，在精度要求不高的狀況下使用

0	unknown	不能識別
1	notTracked	未能檢測到
2	open	手掌
3	closed	握拳
4	lasso	剪刀手，併合並中食指

 

四、骨骼數據
body [object] {
  bodyIndex [number]：索引，容許6人
  joints [array]：骨骼節點，包含座標信息，顏色信息
  leftHandState [number]：左手手勢
  rightHandState [number]：右手手勢
  tracked [boolean]：是否捕獲到
  trackingId
} 

 

五、kinect對象

on	監聽數據
open	打開Kinect
close	關閉
openBodyReader	讀取骨骼數據
open**Reader	相似如上方法，讀取其它類型數據

 

6、實戰總結

火影體感遊戲經驗總結

接下來，我總結一下TGC2016《火影忍者手遊》的體感遊戲開發中碰到的一些問題。

一、講解以前，咱們首先須要瞭解下游戲流程。

1.一、經過手勢觸發開始遊戲	1.二、玩家化身四代，左右跑動躲避九尾攻擊
1.三、擺出手勢「奧義」，觸發四代大招	1.四、用戶掃描二維碼獲取本身現場照片

 

二、服務器端
遊戲須要玩家骨骼數據（移動、手勢），彩色圖像數據（某一手勢下觸發拍照），因此咱們須要向客戶端發送這兩部分數據。值得注意的是，彩色圖像數據體積過大，須要進行壓縮。

var emitColorFrame = false;
io.sockets.on('connection', function (socket){
	socket.on('startColorFrame', function(data){
		emitColorFrame = true;
	});	
});
kinect.on('multiSourceFrame', function(frame){

	// 發送玩家骨骼數據
	io.sockets.emit('bodyFrame', frame.body);

	// 玩家拍照
	if(emitColorFrame) {
		var compression = 1;
		var origWidth = 1920;
		var origHeight = 1080;
		var origLength = 4 * origWidth * origHeight;
		var compressedWidth = origWidth / compression;
		var compressedHeight = origHeight / compression;
		var resizedLength = 4 * compressedWidth * compressedHeight;
		var resizedBuffer = new Buffer(resizedLength);
		// ...
		// 照片數據過大，須要壓縮提升傳輸性能
		zlib.deflate(resizedBuffer, function(err, result){
			if(!err) {
				var buffer = result.toString('base64');
				io.sockets.emit('colorFrame', buffer);
			}
		});			
		emitColorFrame = false;
	}
});
kinect.openMultiSourceReader({
	frameTypes: Kinect2.FrameType.body | Kinect2.FrameType.color
});

　　

三、客戶端
客戶端業務邏輯較複雜，咱們提取關鍵步驟進行講解。
3.一、用戶拍照時，因爲處理的數據比較大，爲防止頁面出現卡頓，咱們須要使用web worker

(function(){
    importScripts('pako.inflate.min.js'); 

    var imageData;
    function init() {
        addEventListener('message', function (event) {
            switch (event.data.message) {
                case "setImageData":
                    imageData = event.data.imageData;
                    break;
                case "processImageData":
                    processImageData(event.data.imageBuffer);
                    break;
            }
        });
    }
    function processImageData(compressedData) {
        var imageBuffer = pako.inflate(atob(compressedData));
        var pixelArray = imageData.data;
        var newPixelData = new Uint8Array(imageBuffer);
        var imageDataSize = imageData.data.length;
        for (var i = 0; i < imageDataSize; i++) {
            imageData.data[i] = newPixelData[i];
        }
        for(var x = 0; x < 1920; x++) {
            for(var y = 0; y < 1080; y++) {
                var idx = (x + y * 1920) * 4;
                var r = imageData.data[idx + 0]; 
                var g = imageData.data[idx + 1]; 
                var b = imageData.data[idx + 2]; 
            }
        }
        self.postMessage({ "message": "imageReady", "imageData": imageData });
    }
    init();
})();  

　　

3.二、接投影儀後，若是渲染面積比較大，會出現白屏，須要關閉瀏覽器硬件加速。

3.三、現場光線較暗，其它玩家干擾，在追蹤玩家運動軌跡的過程當中，可能會出現抖動的狀況，咱們須要去除干擾數據。（當忽然出現很大位移時，須要將數據移除）

var tracks = this.tracks;
var len = tracks.length;

// 數據過濾
if(tracks[len-1] !== window.undefined) {
	if(Math.abs(n - tracks[len-1]) > 0.2) {
		return;
	}
}
this.tracks.push(n);

　　

3.四、當玩家站立，只是左右少許晃動時，咱們認爲玩家是站立狀態。

// 保留5個數據
if(this.tracks.length > 5) {
	this.tracks.shift();
} else {
	return;
}

// 位移總量
var dis = 0;
for(var i = 1; i < this.tracks.length; i++) {
	dis += this.tracks[i] - this.tracks[i-1];
}
if(Math.abs(dis) < 0.01) {
	this.stand();
} else {
	if(this.tracks[4] > this.tracks[3]) {
		this.turnRight();
	} else {
		this.turnLeft();
	}
	this.run();
}

　　

 

7、展望

　

一、使用HTML5開發Kinect體感遊戲，下降了技術門檻，前端工程師能夠輕鬆的開發體感遊戲； 二、大量的框架能夠應用，好比用JQuery、CreateJS、Three.js（三種不一樣渲染方式）； 三、無限想象空間，試想下體感遊戲結合webAR，結合webAudio、結合移動設備，太能夠挖掘的東西了……想一想都激動不是麼！