摘要：說明碰撞檢測，用來檢查兩個精靈是否接觸。如果沒有碰撞到返回值就是。示例發生碰撞時的回調函數如果發生碰撞，顯示哪邊的邊界發生碰撞邊界左側發生碰撞邊界右側發生碰撞邊界

碰撞檢測，用來檢查兩個精靈是否接觸。

Pixi 沒有內置的碰撞檢測系統， 所以這里我們使用一個名為 Bump 的庫，Bump 是一個易于使用的2D碰撞方法的輕量級庫，可與 Pixi 渲染引擎一起使用。它提供了制作大多數2D動作游戲所需的所有碰撞工具。

要開始使用 Bump，首先直接用 script 標簽，引入 js 文件

然后創建它的實例

let b = new Bump(PIXI);

變量 b 現在代表 Bump 實例。可以使用它來訪問 Bump 的所有碰撞方法。

hit 方法是一種通用碰撞檢測功能。它會自動檢測碰撞中使用的精靈種類，并選擇適當的碰撞方法。這意味著你不必記住要使用 Bump 庫中的許多碰撞方法的哪一個，你只需要記住一個 hit 。但是為了避免 hit 方法最后產生的效果和你想象的不一樣，最好還是要了解一下 Bump 庫中其他的方法。

以下是 hit 方法最簡單的使用形式：

b.hit(sprite1, sprite2);

如果兩個精靈碰撞到了，就返回 true，沒有碰撞到，則返回 false。

查看示例

在碰撞檢測時，Bump 的方法默認精靈是矩形的，使用矩形碰撞檢測的算法，如果你想讓方法把一個精靈當做圓形，使用圓形碰撞檢測的算法，需要將精靈的 circular 屬性設置為 true 。

anySprite.circular = true;

如果你使用 hit 方法檢測兩個圓形精靈是否碰撞，你還需要將兩個精靈的 diameter 屬性設置為 true 。

查看示例

如果你希望精靈對碰撞作出反應，使它們不重疊，請將第三個參數設置為 true 。

b.hit(sprite1, sprite2, true);

這個防止重疊的功能，對于制作墻壁，地板或任何其他類型的邊界非常有用。

查看示例

如果你想讓精靈碰撞后反彈，請將第四個參數設置為 true。

b.hit(sprite1, sprite2, true, true);

注意：
如果需要精靈反彈，精靈還必須有速度屬性，也就是 vx 和 vy 屬性。

查看示例

設置第五個參數為 true 使 hit 方法使用精靈的全局坐標。在檢測不同父容器的精靈之間的碰撞時，這很有用。

b.hit(sprite1, sprite2, true, true, true);

精靈的全局坐標是相對于畫布左上角的位置。
精靈的局部坐標是相對于其父容器的左上角的位置。

如果要檢查點對象是否與精靈碰撞，將點對象作為第一個參數，如下所示：

b.hit({x: 200, y:120}, sprite);

點對象是一個具有 x 和 y 兩個屬性的對象，x 和 y 表示了畫布中一個點的坐標。

查看示例

hit 方法還允許你檢查精靈和精靈組之間的碰撞。只需將精靈組作為第二個參數即可。在此示例中，精靈組是 spriteArray。

b.hit(sprite, spriteArray, true, true, true);

你將看到 hit 方法自動遍歷精靈組中的所有精靈，并根據參數中的第一個精靈檢測它們。這意味著你不必自己編寫 for 循環或 forEach 循環。

查看示例

你還可以使用回調函數作為第六個參數。這對于檢查單個精靈和精靈組之間的碰撞特別有用。如果發生碰撞，回調函數將運行，你可以訪問碰撞返回值和碰撞中涉及的精靈。下面是如何使用這個特性來檢測一個名為 sprite 的精靈和一個名為 spriteArray 的精靈組之間的碰撞。

b.hit(
    sprite,
    spriteArray,
    true, true, true,
    function (collision, platform) {
        //collision 表示 sprite 的哪一邊發生碰撞
        //platform 表示 sprite 正在碰撞的精靈組中的精靈
        console.log(collision);
        console.log(platform);
    }
);

這是一種執行復雜碰撞檢測的簡潔方式，可以為你提供大量信息和低級控制，但不必手動遍歷數組中的所有精靈。

查看示例

hit 方法的返回值會與你正在檢查的精靈的種類相匹配。例如，如果兩個精靈都是矩形，并且 hit 方法的第三個參數是 true，碰撞后，返回值表示參數中第一個矩形發生碰撞的一側，如果沒有發生碰撞，返回值就是 undefined 。

示例：

let collision = b.hit(rectangleOne, rectangleTwo, true);
message.text = "參數中第一個矩形的碰撞側是: " + collision;

查看示例

hit 方法只是 Bump 的許多低級碰撞方法的高級包裝器。如果你更喜歡使用較低級別的方法，接下來會列出所有的這些方法。

最基本的碰撞檢測是檢查點對象是否與精靈碰撞。hitTestPoint 方法將幫助你解決這個問題。
hitTestPoint 方法需要兩個參數：

示例：

let collision = b.hitTestPoint(
    { x: 180, y: 128 },  //具有 x 和 y 屬性的點對象 
    sprite          //需要檢測的精靈
)

如果點對象與精靈碰撞，hitTestPoint 方法返回 true，否則返回 false。

查看示例

上面示例中的精靈被當作是矩形的，但 hitTestPoint 方法同樣適用于圓形精靈。如果精靈具有 radius 屬性，則 hitTestPoint 方法假定精靈是圓形的并且對它應用圓形碰撞檢測算法。如果精靈沒有 radius 屬性，則該方法假定它是矩形。你可以給任何精靈一個 radius 屬性。而一個更簡單的方法是給精靈一個 circular 屬性并將其設置為 true 。

anySprite.circular = true;

這樣精靈就會應用圓形碰撞檢測算法，并具有一個 radius 屬性，該屬性的值等于精靈寬度的一半。

查看示例

hitTestCircle 方法用來檢測兩個圓形精靈之間的碰撞。

b.hitTestCircle(sprite1,sprite2)

作為參數傳入 hitTestCircle 方法的精靈需要有 radius 屬性，如果精靈碰撞則返回 true，因此你可以將其與 if 語句一起使用來檢測碰撞，如下所示：

if(b.hitTestCircle(sprite1,sprite2)){
    message.text = "碰撞到了!";
    //碰撞到后，將 vx 設置為0，停止移動
    sprite1.vx=0;
}

查看示例

當移動的圓形精靈碰到沒有移動的圓形精靈時，你可以使用 circleCollision 方法創建碰撞反應。

參數：

注意：
如果你希望參數中第一個精靈碰撞到第二個精靈時反彈，那第一個精靈必須有速度屬性，也就是 vx 和 vy 屬性。

查看示例

movingCircleCollision 方法可以讓兩個移動的圓形精靈在碰撞時彈開，它們會以一種非常逼真的方式將速度傳遞給對方，從而使它們彈開。

參數：

b.movingCircleCollision(circle1, circle2)

如果圓形精靈具有 mass 屬性，則該值將用于幫助確定圓形精靈應該相互反彈的力。

查看示例

如果你有一堆移動的圓形精靈，你希望這些精靈都在碰撞后進行反彈，這個時候你需要把這些精靈進行兩兩檢查，判斷它們是否碰撞，這需要把這些精靈放在一個數組中，使用兩層 for 循環，并且內層 for 循環的計數器比外層的 for 循環大1，這樣就可以檢測所有圓形精靈的碰撞情況。

for (let i = 0; i < container.children.length; i++) {
  //碰撞檢查中使用的第一個圓形精靈
  var c1 = container.children[i];
  for (let j = i + 1; j < container.children.length; j++) {
    //碰撞檢查中使用的第二個圓形精靈
    let c2 = container.children[j];
    //檢查碰撞情況，如果精靈發生碰撞，將精靈彈開
    b.movingCircleCollision(c1, c2);
  }
}

你可以看到內層 for 循環的計數器開始就是一個大于外層 for 循環的數字：

let j = i + 1

這可以防止對任何一對精靈進行多次碰撞檢測。

Bump 庫還有一個方便的方法 multipleCircleCollision，使用這個方法可以替代 for 循環的方式。這個方法會對每對精靈自動調用 movingCircleCollision，使它們互相反彈。 你可以在游戲循環中使用它來檢查數組中的所有精靈，但是要注意數組中的精靈是不能重復的。

示例：

b.multipleCircleCollision(container.children);

查看示例

要確定兩個矩形精靈是否碰撞，請使用 hitTestRectangle 方法：

b.hitTestRectangle(rectangle1, rectangle2)

如果矩形精靈碰撞，hitTestRectangletrue 方法返回 true，沒有碰撞則返回 false。

示例：

if(b.hitTestRectangle(sprite1,sprite2)){
    message.text = "碰撞到了!";
}else{
    message.text = "沒有碰到";
}

查看示例

rectangleCollision 方法使矩形精靈表現得好像它們有質量。它可以防止參數中的兩個矩形精靈重疊。

參數：

返回值：

如果精靈碰撞到了，rectangleCollision 方法返回一個字符串值，告訴你第一個矩形精靈的哪一側碰到了第二個矩形精靈。其值可能是 left，right，top 或 bottom 。如果沒有碰撞到返回值就是 undefined 。

示例：

let collision = b.rectangleCollision(sprite2, sprite1);

//碰撞發生在矩形1（第一個參數）的哪一側
switch (collision) {
    case "left":
        message.text = "參數中的第一個精靈的 左側 發生碰撞";
        break;
    case "right":
        message.text = "參數中的第一個精靈的 右側 發生碰撞";
        break;
    case "top":
        message.text = "參數中的第一個精靈的 上方 發生碰撞";
        break;
    case "bottom":
        message.text = "參數中的第一個精靈的 下方 發生碰撞";
        break;
    default:
        message.text = "沒有發生碰撞";
}

此示例代碼將阻止矩形重疊，并在名為 message 的文本精靈中顯示碰撞側。

rectangleCollision 方法具有非常有用的副作用。參數中的第二個精靈能夠將第一個精靈推走。如果你需要類似于推箱子游戲中的那種功能，這會很有用。

查看示例

hitTestCircleRectangle 方法可以檢查圓形和矩形精靈之間的碰撞。

參數：

返回值：

如果精靈碰撞到了，hitTestCircleRectangle 方法同樣返回一個字符串值，告訴你圓形精靈在哪里碰到了矩形精靈。其值可能是 topLeft，topMiddle，topRight，leftMiddle，rightMiddle，bottomLeft，bottomMiddle 或 bottomRight 。如果沒有碰撞到返回值就是 undefined 。

示例：

let collision = b.hitTestCircleRectangle(circle, rectangle);
if (collision) {
    message.text = "圓形精靈的 " + collision + " 側，發生碰撞";
} else {
    message.text = "沒有發生碰撞";
}

查看示例

使用 circleRectangleCollision 方法讓一個圓形精靈從矩形精靈的側面或角反彈。

參數：

示例：

b.circleRectangleCollision(circle, rectangle, true);

查看示例

contain 方法可以將精靈限制在一定矩形區域內。

參數：

返回值：

如果精靈碰撞到容器邊界，contain 方法將返回一個 Set 對象，告訴你精靈撞到了哪一側，它的值可能有 left，right，top 或 bottom ，如果精靈沒有碰撞到容器邊界， 返回值就是 undefined 。

示例：

let collision = b.contain(sprite, { x: 0, y: 0, width: 512, height: 512 }, true, callbackFunction);

//發生碰撞時的回調函數
function callbackFunction(collision) {
    console.log("collision", collision);
}

//如果發生碰撞，顯示哪邊的邊界發生碰撞
if (collision) {
    if (collision.has("left")) {
        message.text = "邊界 左側 發生碰撞";
    };
    if (collision.has("right")) {
        message.text = "邊界 右側 發生碰撞";
    };
    if (collision.has("top")) {
        message.text = "邊界 上方 發生碰撞";
    };
    if (collision.has("bottom")) {
        message.text = "邊界 下方 發生碰撞";
    };
}

上面的代碼會將精靈限制在對象定義的512 x 512像素區域內。如果精靈碰撞到容器的邊界，它將會反彈， 并且顯示碰到了哪邊的邊界，callbackFunction（第四個參數）也將運行。

查看示例

contain 方法的另一個特點是，如果精靈具有 mass 屬性，該值將用于以非常自然的方式抑制精靈的反彈。

注意：

使用 Bump 庫時，最好給精靈設置上速度屬性（vx，vy），因為 Bump 庫中許多方法實現效果時，都需要用到這個兩個屬性。

上一篇 學習 PixiJS — 補間動畫

下一篇 學習 PixiJS — 交互工具