HTML 5 2D 游戏开发:碰撞检测和 sprite 动画 - 面向对象网,web开发,html,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Html > 正文

HTML 5 2D 游戏开发:碰撞检测和 sprite 动画

来源: www.bianceng.cn 阅读:

碰撞检测和 sprite 动画是所有视频游戏的主要成分。Snail Bait(本系列文章中构建的游戏)也不例外 。图 1 显示了 Snail Bait 的跑步小人与左上角的蜜蜂碰撞后发生爆炸。

图 1. 碰撞检测的实际应用

\

在本文中,学习如何:

检测碰撞

将 HTML5 Canvas 上下文用于碰撞检测

将碰撞检测实现为 sprite 行为

处理碰撞

实现 sprite 动画,比如爆炸

碰撞检测过程

碰撞检测是一个 4 步过程,第一步是实际检测碰撞:

在游戏的 sprite 上进行迭代

排除不适合碰撞检测的 sprite

检测候选 sprite 之间的碰撞

处理碰撞

碰撞检测可能需要很高的计算量,所以,避免对不可能碰撞的 sprite 进行检测非常重要。例如,在 sprite 爆炸时,Snail Bait 的跑步小人会穿过其他 sprite。因为检查一个 sprite 是否在爆炸比执行碰撞 检测所需的时间更少,Snail Bait 从碰撞检测中排除了爆炸的 sprite。

我们首先将概述一下碰撞检 测技术。

碰撞检测技术

可通过多种方式检测 sprite 之间的碰撞。可采用的三种流行技术(按 先进程度和复杂度递增顺序排列)是:

边界区域(在 3D 游戏中称为包围体)

光线投射

分离轴定理 (Separating Axis Theorem)

使用边界区域的碰撞检测,检测圆圈或多边形的交点。在 图 2 中的示例中,小圆圈是表示一个 sprite( 一个小球)的边界区域,大圆圈是一个桶的 sprite 的边界区域,桶比球大。当两个圆形边界区域相交时,球 就会掉落到桶中。

图 2. 边界区域:圆圈之间的碰撞

\

Tags:
相关文章列表: