电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: HTML5 2D 游戏开发碰撞检测和 sprite 动画（1） [打印本页]

作者: look_w 时间: 2018-10-19 18:51 标题: HTML5 2D 游戏开发碰撞检测和 sprite 动画（1）

碰撞检测和 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. 边界区域：圆圈之间的碰撞

检测两个圆圈的碰撞是所有碰撞检测技术中最简单的。如果两个圆圈中心之间距离小于圆圈的半径之和，就会相交，sprite 就会爆炸。
边界区域碰撞检测很简单，但当边界区域太小或移动得太快时，检测可能失败。在这两种情况下，sprite 可在单个动画帧中彼此穿过，进而避免检测。
对于小型、快速移动的 sprite，更加可靠的一种技术是光线投射，如图 3 所示。光线投射检测两个 sprite 的速度向量的焦点。在图 3 中的 5 个帧中，球的速度向量是以蓝色绘制的对角线，桶的速度向量是红色的水平线（桶水平移动）。在这些向量的交点位于桶顶部的开口内，并且球在开口下方时，球就会落入桶中，如图 3 中最右边的屏幕截图中所示。
图 3. 光线投射

先验或后验碰撞检测可在碰撞发生之前（先验）或之后（后验）它们。如果在碰撞发生之前进行检测，必须预测 sprite 未来将位于何处。如果在碰撞发生之后检测，通常需要将已碰撞的 sprite 分开。这两种方法孰优孰劣并不明显。

光线投射非常适合以下环境中的简单形状（比如中球落在桶中），其中给出了两个形状的速度向量的焦点，很容易确定它们是否已经发生碰撞。
对于更复杂的场景，比如任意大小和形状的多边形之间的碰撞，分离轴定理是最可靠的（和最复杂的）碰撞检测技术之一。分离轴定理是将光线从两个不同的角度照射到两个多边形上的数学描述，如图 4 中所示。如果多边形背后的墙上的影子露出空隙，那么多边形没有发生碰撞。
图 4. 分离轴定理

本文不会进一步介绍光线投射或分离轴定理。您可以在 Core HTML5 Canvas（Prentice Hall，2012 年）中查阅每种方法的深入讨论。（请参阅，获取相关链接。）

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)