PIXI 碰撞检测-PIXI文档翻译(6)

你现在知道如何制作各种各样的图形对象，但你能用他们做什么？一个有趣的事情是构建一个简单的碰撞检测系统。你可以使用一个自定义函数 hitTestRectangle来检查任何两个矩形Pixi sprites是否接触。

hitTestRectangle(spriteOne, spriteTwo)

如果它们重叠，hitTestRectangle将返回true。您可以使用hitTestRectangle与if语句来检查两个精灵这样的之间的冲突：

if (hitTestRectangle(cat, box)) {
  //There's a collision
} else {
  //There's no collision
}

正如你将看到的，hitTestRectangle是进入庞大宇宙的游戏设计的前门。

在collisionDetection.html文件examples夹中运行该文件，获取如何使用的工作示例hitTestRectangle。使用箭头键移动猫。如果猫碰到盒子，盒子变红，“打！由文本对象显示。




你已经看到了创建所有这些元素的所有代码，以及使猫移动的键盘控制系统。唯一新的东西是在函数hitTestRectangle内部使用的方式play来检查冲突。

function play() {

  //use the cat's velocity to make it move
  cat.x += cat.vx;
  cat.y += cat.vy;

  //check for a collision between the cat and the box
  if (hitTestRectangle(cat, box)) {

    //if there's a collision, change the message text
    //and tint the box red
    message.text = "hit!";
    box.tint = 0xff3300;

  } else {

    //if there's no collision, reset the message
    //text and the box's color
    message.text = "No collision...";
    box.tint = 0xccff99;
  }
}

因为该play函数每秒由游戏循环调用60次，所以这个if语句不断地检查cat和box之间的冲突。如果hitTestRectangle是true，文本message对象用于setText显示“Hit”：

message.text = "hit!";

然后通过将框的tint属性设置为十六进制红色值，将框的颜色从绿色更改为红色。

box.tint = 0xff3300;

如果没有冲突，消息和框保持在其原始状态：

message.text = "no collision...";
box.tint = 0xccff99;

这段代码很简单，但是突然间，你创建了一个似乎完全活跃的互动世界。它几乎像魔术！也许，令人惊讶的是，你现在有所有你需要的技能开始制作游戏与Pixi！

hitTestRectangle函数

但是hitTestRectangle功能怎么样？它做什么，它是如何工作的？关于如何工作的碰撞检测算法的细节略微超出了本教程的范围。最重要的是你知道如何使用它。但是，仅供参考，如果你好奇，这里是完整的 hitTestRectangle函数定义。你能从评论中知道它在做什么吗？

function hitTestRectangle(r1, r2) {

  //Define the variables we'll need to calculate
  var hit, combinedHalfWidths, combinedHalfHeights, vx, vy;

  //hit will determine whether there's a collision
  hit = false;

  //Find the center points of each sprite
  r1.centerX = r1.x + r1.width / 2;
  r1.centerY = r1.y + r1.height / 2;
  r2.centerX = r2.x + r2.width / 2;
  r2.centerY = r2.y + r2.height / 2;

  //Find the half-widths and half-heights of each sprite
  r1.halfWidth = r1.width / 2;
  r1.halfHeight = r1.height / 2;
  r2.halfWidth = r2.width / 2;
  r2.halfHeight = r2.height / 2;

  //Calculate the distance vector between the sprites
  vx = r1.centerX - r2.centerX;
  vy = r1.centerY - r2.centerY;

  //Figure out the combined half-widths and half-heights
  combinedHalfWidths = r1.halfWidth + r2.halfWidth;
  combinedHalfHeights = r1.halfHeight + r2.halfHeight;

  //Check for a collision on the x axis
  if (Math.abs(vx) < combinedHalfWidths) {

    //A collision might be occuring. Check for a collision on the y axis
    if (Math.abs(vy) < combinedHalfHeights) {

      //There's definitely a collision happening
      hit = true;
    } else {

      //There's no collision on the y axis
      hit = false;
    }
  } else {

    //There's no collision on the x axis
    hit = false;
  }

  //`hit` will be either `true` or `false`
  return hit;
};