• 碰撞检测
    • 碰撞检测函数

    碰撞检测

    现在你知道了如何制造种类繁多的图形对象，但是你能用他们做什么？一个有趣的事情是利用它制作一个简单的 碰撞检测系统 。你可以用一个叫做：hitTestRectangle 的自定义的函数来检测两个矩形精灵是否接触。

    1. hitTestRectangle(spriteOne, spriteTwo)

    如果它们重叠， hitTestRectangle 会返回 true。你可以用 hitTestRectangle 结合 if 条件语句去检测两个精灵是否碰撞：

    1. if (hitTestRectangle(cat, box)) {
    2.   //There's a collision
    3. } else {
    4.   //There's no collision
    5. }

    正如你所见， hitTestRectangle 是走入游戏设计这片宇宙的大门。

    运行在 examples 文件夹的 collisionDetection.html 文件，看看怎么用 hitTestRectangle工作。用方向按键去移动猫，如果猫碰到了盒子，盒子会变成红色，然后 “Hit!” 文字对象会显示出来。

    Displaying text

    你已经看到了创建这些所有元素的代码，让猫移动的键盘控制。唯一的新的东西就是 hitTestRectangle 函数被用在 play 函数里检测碰撞。

    1. function play(delta) {
    3.   //use the cat's velocity to make it move
    4.   cat.x += cat.vx;
    5.   cat.y += cat.vy;
    7.   //check for a collision between the cat and the box
    8.   if (hitTestRectangle(cat, box)) {
    10.     //if there's a collision, change the message text
    11.     //and tint the box red
    12.     message.text = "hit!";
    13.     box.tint = 0xff3300;
    15.   } else {
    17.     //if there's no collision, reset the message
    18.     //text and the box's color
    19.     message.text = "No collision...";
    20.     box.tint = 0xccff99;
    21.   }
    22. }

    play 函数被每秒调用了60次，每一次这个 if 条件语句都会在猫和盒子之间进行碰撞检测。如果 hitTestRectangle 为 true，那么文字 message 对象会用 setText 方法去显示 “Hit”：

    1. message.text = "Hit!";

    这个盒子的颜色改变的效果是把盒子的 tint 属性改成一个16进制的红色的值实现的。

    1. box.tint = 0xff3300;

    如果没有碰撞，消息和盒子会保持它们的原始状态。

    1. message.text = "No collision...";
    2. box.tint = 0xccff99;

    代码很简单，但是你已经创造了一个看起来完全活着的互动的世界！它简直跟魔术一样！令人惊讶的是，你大概已经拥有了你需要用Pixi制作游戏的全部技能！

    碰撞检测函数

    hitTestRectangle 函数都有些什么呢？它做了什么，还有它是如何工作的？关于碰撞检测算法的细节有些超出了本教程的范围。最重要的事情是你要知道如何使用它。但是，只是作为你的参考资料，不让你好奇，这里有全部的 hitTestRectangle 函数的定义。你能从注释弄明白它都做了什么吗？

    1. function hitTestRectangle(r1, r2) {
    3.   //Define the variables we'll need to calculate
    4.   let hit, combinedHalfWidths, combinedHalfHeights, vx, vy;
    6.   //hit will determine whether there's a collision
    7.   hit = false;
    9.   //Find the center points of each sprite
    10.   r1.centerX = r1.x + r1.width / 2;
    11.   r1.centerY = r1.y + r1.height / 2;
    12.   r2.centerX = r2.x + r2.width / 2;
    13.   r2.centerY = r2.y + r2.height / 2;
    15.   //Find the half-widths and half-heights of each sprite
    16.   r1.halfWidth = r1.width / 2;
    17.   r1.halfHeight = r1.height / 2;
    18.   r2.halfWidth = r2.width / 2;
    19.   r2.halfHeight = r2.height / 2;
    21.   //Calculate the distance vector between the sprites
    22.   vx = r1.centerX - r2.centerX;
    23.   vy = r1.centerY - r2.centerY;
    25.   //Figure out the combined half-widths and half-heights
    26.   combinedHalfWidths = r1.halfWidth + r2.halfWidth;
    27.   combinedHalfHeights = r1.halfHeight + r2.halfHeight;
    29.   //Check for a collision on the x axis
    30.   if (Math.abs(vx) < combinedHalfWidths) {
    32.     //A collision might be occuring. Check for a collision on the y axis
    33.     if (Math.abs(vy) < combinedHalfHeights) {
    35.       //There's definitely a collision happening
    36.       hit = true;
    37.     } else {
    39.       //There's no collision on the y axis
    40.       hit = false;
    41.     }
    42.   } else {
    44.     //There's no collision on the x axis
    45.     hit = false;
    46.   }
    48.   //`hit` will be either `true` or `false`
    49.   return hit;
    50. };