HTML5를 활용한 Kinect 체성감각 게임 개발 사례에 대한 자세한 설명
- PHPz원래의
- 2017-04-23 10:02:584553검색
1. 소개
어떤 게임을 만들까요?
얼마 전 청두 TGC2016 전시회에서 '나루토 모바일 게임'이라는 체성감각 게임을 개발했는데, 이는 주로 모바일 게임 챕터인 '구미호 공격'을 시뮬레이션한 게임으로, 사용자가 4세대가 되어 대결을 펼칩니다. 구미호 게임(Nine-Tailed Game)에는 많은 플레이어가 참여했습니다. 표면적으로 이 게임은 다른 체성 감각 경험과 다르지 않습니다. 실제로는 Chrome 브라우저에서 실행되었습니다. 즉, 웹 기반 체성 감각 게임을 개발하려면 해당 프런트 엔드 기술만 익히면 됩니다. 키넥트.
2. 구현원리
구현 아이디어는 무엇인가요?
H5를 사용하여 Kinect 기반 체성감각 게임을 개발합니다. 작동 원리는 실제로 매우 간단합니다. Kinect는 플레이어 및 인간의 뼈와 같은 환경 데이터를 수집하고 특정 방법을 사용하여 브라우저가 이러한 데이터에 액세스할 수 있도록 합니다.
1. 데이터 수집
Kinect에는 세 개의 렌즈가 있으며 가운데 렌즈는 일반 카메라와 유사하며 컬러 이미지를 획득합니다. 왼쪽과 오른쪽 렌즈는 적외선을 통해 깊이 데이터를 얻습니다. Microsoft에서 제공하는 SDK를 사용하여 다음 유형의 데이터를 읽습니다.
색상 데이터: 컬러 이미지
깊이 데이터: color try;
인체 골격 데이터: 위의 데이터를 바탕으로 계산하여 인체 골격 데이터를 얻습니다.
2. 브라우저에서 Kinect 데이터에 액세스할 수 있도록 합니다.
제가 시도하고 이해한 프레임워크는 기본적으로 브라우저 프로세스가 서버와 통신할 수 있도록 소켓을 사용합니다. 전송:
Kinect-HTML5 C#을 사용하여 서버를 구축하며, 컬러 데이터, 평가판 데이터, 뼈 데이터가 모두 제공됩니다.
ZigFu; H5, U3D 및 Flash 개발을 지원합니다.
DepthJS는 브라우저 플러그인 형식으로 데이터 액세스를 제공합니다. >
Node-Kinect2는 Nodejs를 사용하여 서버 측을 구축하고 비교적 완전한 데이터와 많은 예제를 제공합니다. - 드디어 Node-Kinect2를 선택했습니다. 비록 문서는 없지만, 프론트엔드 엔지니어들에게 친숙한 Nodejs를 사용하고 있습니다. 상대적으로 빠릅니다.
- Kinect: 깊이 이미지, 컬러 이미지 등 플레이어 데이터 캡처
- Node-Kinect2 : Kinect에서 해당 데이터를 얻고 2차 처리를 수행합니다.
- 브라우저: 노드 애플리케이션의 지정된
- 인터페이스
먼저 Kinect를 구입해야 합니다
1. 이는 어려운 요구 사항이며 요구 사항을 충족하지 못하는 환경에서 너무 많은 시간을 낭비했습니다.
USB3.0
DX11을 지원하는 그래픽 카드
-
win8 이상 시스템
웹 소켓을 지원하는 브라우저
물론 Kinect v2 센서는 필수입니다
2. 환경 설정 프로세스:
Kinect v2 연결
네번째. >예를 들어주는 것보다 더 좋은 것은 없습니다!아래 그림과 같이 인간의 뼈를 채취하여 척추의 중간 부분과 제스처
를 식별하는 방법을 보여줍니다.웹서버를 생성하고 브라우저에 스켈레톤 데이터를 전송합니다. 
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. >브라우저 측 뼈대 데이터를 얻어서
캔버스로 그립니다. 키 코드는 다음과 같습니다.
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++;
}
});
});
코드 몇 줄이면, 어느 정도자바스크립트로 플레이어의 뼈 캡처를 완료했습니다. 기초 지식이 있는 학생들이라면 쉽게 이해할 수 있을 텐데, 도대체 어떤 데이터를 얻을 수 있는지 이해가 안 되는 걸까요? 그것을 얻는 방법? 뼈 노드의 이름은 무엇입니까? 이를 알려주는 node-kienct2에 대한 문서가 없습니다.
5. 개발 문서Node-Kinect2는 다음과 같이 테스트 요약 문서를 편집했습니다. 서버측 사용 가능한
데이터 유형 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 | 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 | 右拇指 |
3、手势，据测识别并不是太准确，在精度要求不高的情况下使用
| 0 | unknown | 不能识别 |
| 1 | notTracked | 未能检测到 |
| 2 | open | 手掌 |
| 3 | closed | 握拳 |
| 4 | lasso | 剪刀手，并合并中食指 |
4、骨骼数据
body [object] {
bodyIndex [number]：索引，允许6人
joints [array]：骨骼节点，包含坐标信息，颜色信息
leftHandState [number]：左手手势
rightHandState [number]：右手手势
tracked [boolean]：是否捕获到
trackingId
}
5、kinect对象
| on | 监听数据 |
| open | 打开Kinect |
| close | 关闭 |
| openBodyReader | 读取骨骼数据 |
| open**Reader | 类似如上方法，读取其它类型数据 |
六、实战总结
火影体感游戏经验总结
接下来，我总结一下TGC2016《火影忍者手游》的体感游戏开发中碰到的一些问题。
1、讲解之前，我们首先需要了解下游戏流程。
|
1.1、通过手势触发开始游戏 |
1.2、玩家化身四代，左右跑动躲避九尾攻击 |
|
1.3、摆出手势“奥义”，触发四代大招 |
1.4、用户扫描二维码获取自己现场照片 |
2、服务器端
游戏需要玩家骨骼数据（移动、手势），彩色图像数据（某一手势下触发拍照），所以我们需要向客户端发送这两部分数据。值得注意的是，彩色图像数据体积过大，需要进行压缩。
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、客户端
客户端业务逻辑较复杂，我们提取关键步骤进行讲解。
3.1、用户拍照时，由于处理的数据比较大，为防止页面出现卡顿，我们需要使用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.2、接投影仪后，如果渲染面积比较大，会出现白屏，需要关闭浏览器硬件加速。
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.4、当玩家站立，只是左右少量晃动时，我们认为玩家是站立状态。
// 保留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();
}
七、展望
1、使用HTML5开发Kinect体感游戏，降低了技术门槛，前端工程师可以轻松的开发体感游戏；
2、大量的框架可以应用，比如用JQuery、CreateJS、Three.js（三种不同渲染方式）；
3、无限想象空间，试想下体感游戏结合webAR，结合webAudio、结合移动设备，太可以挖掘的东西了……想想都激动不是么！
위 내용은 HTML5를 활용한 Kinect 체성감각 게임 개발 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!