HTML 5 Kinect 체감 게임 의 인 스 턴 스 응용 개발
프로필
우리 가 해 야 할 게임 은 어떤 게임 입 니까?
얼마 전 청 두 TGC 2016 전시회 에서 우 리 는'화 영 닌 자 모 바 일 게임'의 체감 게임 을 개 발 했 는데 주로 모 바 일 게임 장절 인'구미 습격'을 모 의 했다. 》，사용자 가 4 세대 로 변신 하여 9 미 와 대결 하여 많은 게이머 들 이 참여 하 게 되 었 습 니 다.겉으로 볼 때 이 게임 은 다른 체감 체험 과 다 름 이 없다.실제로 브 라 우 저 크롬 에서 계속 운영 되 고 있다.즉,우 리 는 전단 의 해당 기술 만 파악 하면 Kinect 기반 웹 체감 게임 을 개발 할 수 있다 는 것 이다.
2.실현 원리
사고방식 을 실현 하 는 것 은 무엇 입 니까?
H5 를 사용 하여 Kinect 기반 의 체감 게임 을 개발 합 니 다.사실은 작업 원 리 는 매우 간단 합 니 다.Kinect 에서 게이머 와 환경 데 이 터 를 수집 합 니 다.예 를 들 어 인체 뼈,특정한 방식 으로 브 라 우 저가 이러한 데 이 터 를 방문 할 수 있 도록 합 니 다.
1.데이터 수집
Kinect 는 세 개의 렌즈 가 있 는데 중간 렌즈 는 일반 카메라 와 유사 하여 컬러 이미 지 를 가 져 옵 니 다.좌우 양쪽 렌즈 는 적외선 을 통 해 깊이 있 는 데 이 터 를 얻는다.저 희 는 마이크로소프트 가 제공 하 는 SDK 를 사용 하여 다음 과 같은 유형의 데 이 터 를 읽 습 니 다.
내 가 시도 하고 이해 한 프레임 워 크 는 기본적으로 socket 으로 브 라 우 저 프로 세 스 를 서버 와 통신 시 켜 데이터 전송 을 하 는 것 입 니 다.
Kinect 부터 사 야 지.
1.시스템 요구:
이것 은 딱딱 한 요구 이다.나 는 요구 에 부합 되 지 않 는 환경 에서 너무 많은 시간 을 낭비 한 적 이 있다.
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();
}브 라 우 저 에서 골격 데 이 터 를 가 져 오고 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++;
}
});
});개발 문서
Node-Kinect 2 는 문 서 를 제공 하지 않 았 습 니 다.제 가 테스트 한 문 서 를 다음 과 같이 정리 하 겠 습 니 다.
1.서버 에서 제공 할 수 있 는 데이터 형식;
kinect.on('bodyFrame', function(bodyFrame){}); // ？골격 데이터
infraredFrame
적외선 데이터
longExposureInfraredFrame
인 프 라 프레임 과 유사 하여 정밀도 가 높 고 최 적 화 된 데이터 인 것 같 습 니 다.
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
}
on
감청 데이터
open
Kinect 열기
close
닫다
openBodyReader
골격 데이터 읽 기
open**Reader
위 와 같은 방법 으로 다른 유형의 데 이 터 를 읽 습 니 다.
6.실전 총화
화 영 체감 게임 경험 총화
다음은 TGC 2016 의 체감 게임 개발 에서 겪 은 문제점 들 을 정리 해 보 겠 습 니 다.
1.설명 하기 전에 우 리 는 먼저 게임 절 차 를 알 아야 합 니 다.
1.1,제스처 터치 로 게임 시작
1.2,유저 가 4 세대 로 변신,좌우 로 달 려 가 9 꼬리 공격 을 피한다.
1.3、손짓"오의"를 하여 4 세대 의 큰 수 를 발동
1.4 사용자 가 QR 코드 를 스 캔 하여 자신의 현장 사진 을 가 져 옵 니 다.
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.1 사용자 가 사진 을 찍 을 때 처리 한 데이터 가 비교적 크기 때문에 페이지 가 끊 기 는 것 을 방지 하기 위해 저 희 는 웹 워 커 를 사용 해 야 합 니 다.
(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.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);
// 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.HTML 5 를 이용 하여 Kinect 체감 게임 을 개발 하고 기술 의 문턱 을 낮 추 며 전단 엔 지 니 어 는 체감 게임 을 쉽게 개발 할 수 있 습 니 다.
2.대량의 프레임 워 크 를 응용 할 수 있 습 니 다.예 를 들 어 JQuery,CreateJS,Three.js(세 가지 서로 다른 렌 더 링 방식)를 사용 합 니 다.
3.무한 상상 공간,하체 감 게임 과 webAR 을 결합 해 보 세 요.webAudio 와 모 바 일 장 치 를 결합 하면 발굴 할 수 있 는 것 이 너무 많 습 니 다...............................................
궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 의 커 뮤 니 티 에 가서 토론 을 교류 하 세 요.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
fontawesome을 바삭하게 짜넣기 위한 라이브러리 「wonderful.js」를 만들어 보았다체크 박스나 라디오 버튼을 간편하게(세련되게) 편입할 수 없는가 생각했을 때, → Jquery 의존적이거나 한다 → 코피페라고 해도 힘든 .. fontawesome은 아이콘 포함에 뭔가 사용되는 것이 많다고 생각합니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
