HTML5 2D 游戏开发 碰撞检测和 sprite 动画（4）细化边界框

look_w

细化边界框从   中可以看到，碰撞检测边界框封装了它表示的 sprite。但是，在接近这些边界框的角的地方，边界框内部常常是透明的。跑步小人 sprite 就属于这种情况，如 图 7 所示。这些透明区域可能导致错误碰撞，这在两个透明区域碰撞时尤为明显。
图 7. 原始的跑步小人边界框消除透明角区域导致的错误碰撞的一种方法是，缩小 sprite 的边界框大小，如 图 8 中所示。
图 8. 修改后的跑步小人边界框Snail Bait 通过修改的 didCollide() 方法缩小了跑步小人的边界框的大小，如 清单 7 中所示。
清单 7. 修改跑步小人的边界框

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

var SnailBait =  function () { ... didCollide: function (sprite,      // runner                        otherSprite, // candidate for collision                        context) {   // for context.isPointInPath()       var MARGIN_TOP = 10,           MARGIN_LEFT = 10,           MARGIN_RIGHT = 10,           MARGIN_BOTTOM = 0,           left = sprite.left + sprite.offset + MARGIN_LEFT,           right = sprite.left + sprite.offset + sprite.width - MARGIN_RIGHT,           top = sprite.top + MARGIN_TOP,           bottom = sprite.top + sprite.height - MARGIN_BOTTOM,           centerX = left + sprite.width/2,           centerY = sprite.top + sprite.height/2;        ...    },    ... };

缩小跑步小人的边界框，会使 Snail Bait 的碰撞检测更准确，因为它消除了错误碰撞。接下来看看如何让碰撞检测更有效地执行。
空间分割有关空间分割的更多信息Snail Bait 的空间分割就是简单的空间分割实现。空间分割的更复杂实现包括八叉树 和二进制空间分割，它们适用于拥有大量碰撞检测单元时。请参阅  ，了解空间分割的更多信息。

空间分割 涉及到将一个游戏的空间分割为单元，使得只有同一个单元中的 sprite 可能发生碰撞。通过消除对位于不同单元格中的 sprite 的碰撞检测，空间分割通常会显著提高性能。Snail Bait 就是通过分割空间来提高性能的，如 图 9 中所示。
图 9. Snail Bait 的空间分割如 清单 8 所示，Snail Bait 将   中右侧区域中的所有 sprite 排除在碰撞检测之外，这显著减少了游戏执行的碰撞检测次数。
清单 8. 细化用于碰撞检测的 sprite 选择

1 2 3 4 5 6 7 8

this.isCandidateForCollision: function (sprite, otherSprite) {    return sprite !== otherSprite &&           sprite.visible && otherSprite.visible &&           !sprite.exploding && !otherSprite.exploding &&           otherSprite.left - otherSprite.offset < sprite.left + sprite.width; },

现在您已了解如何高效地检测碰撞，让我们看看 Snail Bait 如何处理碰撞。