使用HTML5开发Kinect体感游戏

时间 2019-11-18

标签使用 html5 html 开发 kinect 体感游戏栏目 HTML5 繁體版

原文原文链接

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传感器是少不了的

二、环境搭建流程：

链接上Kinect v2
安装 KinectSDK-v2.0
安装 Nodejs
安装 Node-Kinect2

1	`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描绘出来，关键代码以下：javascript

 
            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并无文档告诉咱们这些。html

5、开发文档

Node-Kinect2并无提供文档，我将我测试总结的文档整理以下：

一、服务器端能提供的数据类型；

1	`kinect.on(` `'bodyFrame'` `,` `function` `(bodyFrame){});` `//还有哪些数据类型呢？`

bodyFrame	骨骼数据
infraredFrame	红外数据
longExposureInfraredFrame	相似infraredFrame，貌似精度更高，优化后的数据
rawDepthFrame	未经处理的景深数据
depthFrame	景深数据
colorFrame	彩色图像
multiSourceFrame	全部数据
audio	音频数据，未测试

二、骨骼节点类型

1	`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.二、玩家化身四代，左右跑动躲避九尾攻击java

1.三、摆出手势“奥义”，触发四代大招node

1.四、用户扫描二维码获取本身现场照片git

二、服务器端 游戏须要玩家骨骼数据（移动、手势），彩色图像数据（某一手势下触发拍照），因此咱们须要向客户端发送这两部分数据。值得注意的是，彩色图像数据体积过大，须要进行压缩。

 
            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 workergithub

 
            ( 
            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.二、接投影仪后，若是渲染面积比较大，会出现白屏，须要关闭浏览器硬件加速。 web

3.三、现场光线较暗，其它玩家干扰，在追踪玩家运动轨迹的过程当中，可能会出现抖动的状况，咱们须要去除干扰数据。（当忽然出现很大位移时，须要将数据移除）express

 
            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.四、当玩家站立，只是左右少许晃动时，咱们认为玩家是站立状态。npm

 
            // 保留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、结合移动设备，太能够挖掘的东西了……想一想都激动不是么！

此文转载！！！