HTML5 예제 개발 Kinect 체성감각 게임 공유

이 글은 주로 Kinect 체성감각 게임 개발을 위한 HTML5 예제 적용에 대한 관련 정보를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

Kinect 체성감각 게임 개발을 위한 HTML5 예제 애플리케이션

1. 소개

어떤 게임을 만들까요?

얼마 전 청두 TGC2016 전시회에서 우리는 모바일 게임 챕터 "구미호 공격"을 주로 시뮬레이션한 체성감각 게임인 "나루토 모바일 게임"을 개발했습니다. 사용자가 4세대가 되어 구미호와 경쟁하게 됩니다. , 많은 플레이어가 참여하여 많은 관심을 끌었습니다. 표면적으로 이 게임은 다른 체성 감각 경험과 다르지 않습니다. 실제로는 Chrome 브라우저에서 실행되었습니다. 즉, 웹 기반 체성 감각 게임을 개발하려면 해당 프런트 엔드 기술만 익히면 됩니다. 키넥트.

2. 구현 원칙

구현 아이디어는 무엇인가요?

H5를 사용하여 Kinect 기반 체성감각 게임을 개발하세요. 실제로 작동 원리는 매우 간단합니다. Kinect는 플레이어 및 인간 골격과 같은 환경 데이터를 수집하고 특정 방법을 사용하여 브라우저가 이러한 데이터에 액세스할 수 있도록 합니다.

1. 데이터 수집

Kinect에는 세 개의 렌즈가 있으며 가운데 렌즈는 일반 카메라와 유사하며 컬러 이미지를 획득합니다. 왼쪽과 오른쪽 렌즈는 적외선을 통해 깊이 데이터를 얻습니다. Microsoft에서 제공하는 SDK를 사용하여 다음 유형의 데이터를 읽습니다.

• 색상 데이터: 색상 이미지; 위의 데이터를 통해 인간 골격 데이터를 얻습니다.

2. 브라우저가 Kinect 데이터에 액세스할 수 있도록 합니다.

• 
  

  제가 시도하고 이해한 프레임워크는 기본적으로 브라우저 프로세스가 데이터 전송을 위해 서버와 통신할 수 있도록 소켓을 사용합니다.

Kinect-HTML5 C#을 사용하여 서버를 구축하고 컬러 데이터, 평가판 데이터, 스켈레톤 데이터가 모두 제공됩니다.

ZigFu는 H5, U3D 및 Flash 개발을 지원하며 API가 비교적 완벽하며 유료인 것 같습니다. DepthJS는 브라우저를 사용하여 플러그인 형태로 데이터 액세스를 제공합니다.

• Node-Kinect2는 Nodejs를 사용하여 서버 측을 구축하여 비교적 완전한 데이터와 많은 예제를 제공합니다.

• 드디어 Node-Kinect2를 선택했습니다. 비록 문서는 없지만, 프론트엔드 엔지니어들에게 친숙한 Nodejs를 사용하고 있으며, 작성자의 피드백도 비교적 빠릅니다.

• Kinect: 깊이 이미지, 컬러 이미지 등과 같은 플레이어 데이터를 캡처합니다.

Node-Kinect2: Kinect에서 해당 데이터를 얻고 2차 처리를 수행합니다.

Browser: 청취 노드. 지정된 인터페이스를 적용하여 플레이어 데이터를 얻고 게임 개발을 완료합니다.

• 3. 준비

• 먼저 Kinect를 구입해야 합니다

1. 시스템 요구사항:

어려운 요구사항이 충족되지 않는 환경에서 너무 많은 시간을 낭비했습니다. 요구 사항.

USB3.0

DX11

win8 이상 시스템을 지원하는 그래픽 카드

• 웹 소켓을 지원하는 브라우저

• 물론 Kinect v2 센서는 필수입니다.

• 2, 환경 구축 과정:
Kinect v2 연결
KinectSDK-v2.0 설치

Nodejs 설치

• Node-Kinect2 설치

• npm install kinect2

• 넷. 예제를 통한 시연

• 예시를 보여주는 것보다 더 좋은 것은 없습니다!

아래 그림과 같이 인간의 골격을 확보하고 척추의 중간 부분과 동작을 식별하는 방법을 보여줍니다.

1. 서버 측

웹 서버를 생성하고 뼈 데이터를 브라우저 터미널로 보내면 코드는 다음과 같습니다.

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++;
    }
  });
});

아주 간단한 라인 코드로 플레이어 스켈레톤 캡처가 완성되었습니다. 특정 JavaScript 기반을 갖춘 학생들은 쉽게 이해할 수 있어야 하지만, 어떤 데이터를 얻을 수 있는지 이해하지 못합니다. 그것을 얻는 방법? 뼈 노드의 이름은 무엇입니까? 이를 알려주는 node-kienct2에 대한 문서가 없습니다.

5. 개발 문서

Node-Kinect2는 다음과 같이 테스트 요약 문서를 편집했습니다.

1. 서버가 제공할 수 있는 데이터 유형;

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开发中viewport进行屏幕适配

有关HTML5开发的文章推荐10篇

html5开发手机打电话发短信功能代码实例分享

위 내용은 HTML5 예제 개발 Kinect 체성감각 게임 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!