靠谱 的软件外包伙伴

您的位置:首页 > 新闻动态 > 基于HTML5的Kinect体感游戏开发分析!

基于HTML5的Kinect体感游戏开发分析!

2017-01-03 20:53:11

 

一、简介

  在前不久成都TGC2016展会上,一款《火影忍者手游》的体感游戏,主要模拟手游章节《九尾袭来 》,用户化身四代,与九尾进行对决,吸引了大量玩家参与。 表面上看,这款游戏与其它体感体验无异,实际上,它一直运行于浏览器Chrome下,也就是说,我们只需要掌握前端相应技术,就可以开发基于Kinect的网页体感游戏。

 


(视频地址:https://v.qq.com/x/page/a03594v37wi.html)

 

二、实现原理

 使用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应用指定接口,获取玩家数据并完成游戏开发。

 

三、准备工作

 

1、系统要求:
这是硬性要求,我曾在不符合要求的环境下浪费太多时间。

  • USB3.0

  • 支持DX11的显卡

  • win8及以上系统

  • 支持Web Sockets的浏览器

  • 当然Kinect v2传感器是少不了的

 

2、环境搭建流程:

  1. 连接上Kinect v2

  2. 安装 KinectSDK-v2.0

  3. 安装 Nodejs

  4. 安装 Node-Kinect2 

 

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('/', 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('/');
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包括哪些呢?

节点类型 JointType 节点名称
0 spineBase 脊椎基部
1 spineMid  脊椎中部
2 neck 颈部
3 head 头部
4 shoulderLeft 左肩
5 elbowLeft 左肘
6 wristLeft 左腕
7 handLeft 左手掌
8 返回首页] [打印] [返回上页]   下一篇