HTML5开发Kinect体感游戏的实例应用
一、简介
我们要做的是怎样一款游戏？
在前不久成都TGC2016展会上，我们开发了一款《火影忍者手游》的体感游戏，主要模拟手游章节《九尾袭来 》，用户化身四代，与九尾进行对决，吸引了大量玩家参与。 表面上看，这款游戏与其它体感体验无异，实际上，它一直运行于浏览器Chrome下，也就是说，我们只需要掌握前端相应技术，就可以开发基于Kinect的网页体感游戏。
二、实现原理
实现思路是什么？
使用H5开发基于Kinect的体感游戏，其实工作原理很简单，由Kinect采集到玩家及环境数据，比如人体骨骼，使用某种方式，使浏览器可以访问这些数据。
1、采集数据
Kinect有三个镜头，中间镜头类似普通摄像头，获取彩色图像。左右两边镜头则是通过红外线获取深度数据。我们使用微软提供的SDK去读取以下类型数据：
色彩数据：彩色图像；
深度数据：颜色尝试信息；
人体骨骼数据：基于以上数据经计算，获取到人体骨骼数据。
2、使浏览器可访问到Kinect数据
我尝试和了解过的框架，基本上是以socket让浏览器进程与服务器进行通信 ，进行数据传输：
我最终选用Node-Kinect2，虽然没有文档，但是实例较多，使用前端工程师熟悉的Nodejs，另外作者反馈比较快。
Kinect： 捕获玩家数据，比如深度图像、彩色图像等；
Node-Kinect2： 从Kinect获取相应数据，并进行二次加工；
浏览器： 监听node应用指定接口，获取玩家数据并完成游戏开发。
三、准备工作
先得买个Kinect啊
1、系统要求：
这是硬性要求，我曾在不符合要求的环境下浪费太多时间。
USB3.0
支持DX11的显卡
win8及以上系统
支持Web Sockets的浏览器
当然Kinect v2传感器是少不了的
2、环境搭建流程：
npm install kinect2
四、实例演示
说什么都不如给我一个例子！
如下图所示，我们演示如何获取人体骨骼，并标识脊椎中段及手势：
1、服务器端
创建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('https://www.jb51.net/', function(req, res) { res.sendFile(__dirname + '/public/index.html'); }); // 将骨骼数据发送给浏览器端 kinect.on('bodyFrame', function(bodyFrame){ io.sockets.emit('bodyFrame', bodyFrame); }); // 开始读取骨骼数据 kinect.openBodyReader(); }
2、浏览器端
浏览器端获取骨骼数据，并用canvas描绘出来，关键代码如下：
var socket = io.connect('https://www.jb51.net/'); 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并没有文档告诉我们这些。
五、开发文档
Node-Kinect2并没有提供文档，我将我测试总结的文档整理如下：
1、服务器端能提供的数据类型；
kinect.on('bodyFrame', function(bodyFrame){}); //还有哪些数据类型呢？
bodyFrame
骨骼数据
infraredFrame
红外数据
longExposureInfraredFrame
类似infraredFrame，貌似精度更高，优化后的数据
rawDepthFrame
未经处理的景深数据
depthFrame
景深数据
colorFrame
彩色图像
multiSourceFrame
所有数据
audio
音频数据，未测试
2、骨骼节点类型
body.joints[11] // joints包括哪些呢？