《体感游戏——墙来了.pptx》由会员分享，可在线阅读，更多相关《体感游戏——墙来了.pptx（33页珍藏版）》请在三一文库上搜索。
1、揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 体感游戏墙来了 何骏腾讯Alloyteam成员 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 墙来了是什么？ 简单的说，墙来了是一款基于HTML5的体感游戏。 其采用canvas, CSS3, camera等全新web技术构建了一个在 线的体感游戏，只要有一个浏览器和一个摄像头，就可以通 过摆出不同的造型，体验穿墙的刺激和乐趣。 游戏地址：http:/ 运行平台：Chrome 语言支持：中英文 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得
2、过多源动力与更大的推动力！ 现实中的墙来了 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ web体感游戏“墙来了” 希望利用H5带来的新特性，开发一款与传统游戏体验不一样的体感游 戏。 游戏的出发点仅限于技术探讨和研究，不涉及商业利益。 优势 成本低成本低 社交性强社交性强 跨平台跨平台 趣味性强趣味性强 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 传统游戏 让玩家利用鼠标、键盘控制游戏中的 角色，达到交互的效果，如dota、 CS等。 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得
3、过多源动力与更大的推动力！ 体感游戏 用身体去感受的游戏。 突破以往单纯以鼠标、键盘的操作方式，是一种通过肢体动作 变化来进行操作的游戏，一般依 赖于体感游戏机，如Wii，Kinect 等。 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ web体感游戏 体感游戏机的价格一般在10003000元不等 而web体感游戏只需要一个现代浏览器和一个摄像头 ，成本低，每个人都可以随时与朋友一起游戏。 基于web的另一个优势就是更新快，不用安装版本补 丁之类的，在H5有了离线机制之后，断网也可以 玩。 VSVS 揭示研发管理白金定律，分享那些激动人心的创新与变
4、革，使得团队获得过多源动力与更大的推动力！ 应用场景 家庭娱乐 团建破冰 保健恢复 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 设计理念 1. “江南Style”风格的游戏场景 a) 江南Style背景音乐 b) 取自MV中的墙洞形状 c) 统一的牛仔风格配色 d) 随音乐跳动的灯光动画 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 设计理念 2. 模拟真实游戏场景 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 设计理念 3. 及时鲜明的游戏反馈 揭示研发
5、管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 设计理念 4. 排行榜 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 设计理念 5. 游戏相册与微博分享 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 游戏组成 动画 像素检测 背景检测 重合度计 算 生成玩家 影像 得分反馈 墙移动 粒子动画 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 游戏过程 1.获取摄像头数据 利用H5的getUserMedia接口请求用户授权 将获
6、取到的stream用video标签渲染，完成采集工作 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 游戏过程 2. 截取背景 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 游戏过程 2. 倒计时后截取体验不好 还未离开摄像头区 域 背景还未稳定，存在干扰因素 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 游戏过程 2. 优化后的截取方案 一定时间内，背景趋向稳定则成功截取 ，不稳定则持续循环更新背景，直至稳 定。 后加入手动截取，更加灵活。 ctx.draw
7、Image() ctx.getImageData() 像素灰度处理 差值后与阀值比较 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 游戏过程 3. 人影成像 获取每帧像素数据 与背景差值后得到人影像素点 渲染到屏幕上 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 游戏过程 3. 人影成像 降噪处理 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 游戏过程 4. 重合度计算：穿过了吗？ 获取人影像素数据 计算人影区域与墙洞区域的重合 根据重合度给出结果 揭示研发
8、管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 游戏过程 4. 得分规则 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 技术细节 1.更新画布图像 脏矩阵机制 减少不必要的绘制与清除操作 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 技术细节 2. 画布分层 分层渲染，不同层使用不同的绘制频率，减少不必要绘制操作。 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 技术细节 3. 粒子动画 揭示研发管理白金定律，分享那些激动人
9、心的创新与变革，使得团队获得过多源动力与更大的推动力！ 技术细节 3. 粒子动画 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 技术细节 4. 繁重的UI线程 如何减负？ 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 技术细节 4.繁重的UI线程 采用worker优化性能 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 未来展望 多人模式 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 未来展望 对战模式 引入“房间”的概念 用websocket实现实时对战 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ 未来展望 更多主题的场景可供选择 你画洞，我穿越 完全体感化，手势识别 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！ Q&A Thank you! 揭示研发管理白金定律，分享那些激动人心的创新与变革，使得团队获得过多源动力与更大的推动力！