您所在的位置:开发 > Web > 热点推荐 > HTML 5体感游戏《守护拉普达》诞生记

HTML 5体感游戏《守护拉普达》诞生记

2012-07-06 10:19 SNS应用设计中心 腾讯 字号:T | T
一键收藏,随时查看,分享好友!

关于运动捕方式有很多,于是就存在算法选型问题。我们先后实验过三种方式:色域跟踪、Mean shift、帧差。最终综合了一套方案。下面简单介绍下实现方案。

AD:

拉普达是什么?

《守护拉普达》是一款基于HTML5的体感塔防游戏,是腾讯编程马拉松的优胜作品。

拉普达(Laputa)是天空之城的意思。玩家以保护拉普达为目标,通过肢体运动控制准星杀死不断靠近总部的小怪。杀怪可以获取游戏积分,连杀或触发道具都能得到更多积分!分数最终会存入服务器,列入宇宙排名。

演示视频

实现原理

视频体感游戏的核心在于运动的捕获与识别,主要的问题是如何实现运动捕获算法。

关于运动捕方式有很多,于是就存在算法选型问题。我们先后实验过三种方式:色域跟踪、Mean shift、帧差。最终综合了一套方案。下面简单介绍下实现方案。

原理:分析连续关键帧间差异来确定运动区域。再通过运动特征系数加权,最终得到较为准确的坐标。

优点:环境干扰相对较小,且无需特征录入。

处理流程:

1.通过浏览器getUserMediaAPI启动摄像头并获取视频流

2.利用canvas转化图像数据格式

3.利用帧差原理获取运动区域(这里用到(grayscale公式)

灰度 = R*.299+G*.587+B*.114;

我们预先设定了一个亮度敏感度值 sen = 15;

当Math.abs(像素亮度1-像素亮度2)>sen 时,这个点将被纳入运动区域。

4、降噪

栅格化图像,判断每个栅格的运动点密度,排除低于设定值的栅格。这样就得到比较干净的运动区域。

5.运动区域平衡分析

上一步返回的是坐标点阵群,游戏需要的是唯一坐标。数据需要进一步处理。经过观察发现运动点阵分布在画面的区间与动作目的有一定关联性。也就是以画面中心点为基准,判断运动点阵距离中心点距离。以距离为加权因素,越靠边缘因素值越大。最终得出唯一坐标。

6. 每个图像算法最终都会遇到性能问题

这里我们用到了 worker。关于worker:THE BASICS OF WEB WORKERS

以上便是《守护拉普达》实现体感控制的基本原理。在比赛最后一刻我们还在不断优化算法,是一件很磨人的事情。不过结果还算令人满意,带走3个奖项 杰出项目、优秀创新、优秀技术。

PS:Demo代码正在整理,体验地址会稍后放出。

团队靓照

《守护拉普达》已经入驻深圳腾讯形象店- @Image,欢迎前往体验。

【编辑推荐】

【责任编辑:张伟 TEL:(010)68476606】



分享到:

热点职位

更多>>

热点专题

更多>>

读书

网管员必读——网络安全(第2版)
本书是在《网管员必读—网络安全》第1版的基础上修改而成的。新版在保留第1版实用内容的基础上增加了大量新的实用内容,同时删除

51CTO旗下网站

领先的IT技术网站 51CTO 领先的中文存储媒体 WatchStor 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i