摘要：說明碰撞檢測，用來檢查兩個(gè)精靈是否接觸。如果沒有碰撞到返回值就是。示例發(fā)生碰撞時(shí)的回調(diào)函數(shù)如果發(fā)生碰撞，顯示哪邊的邊界發(fā)生碰撞邊界左側(cè)發(fā)生碰撞邊界右側(cè)發(fā)生碰撞邊界

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

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

要開始使用 Bump，首先直接用 script 標(biāo)簽，引入 js 文件

然后創(chuàng)建它的實(shí)例

let b = new Bump(PIXI);

變量 b 現(xiàn)在代表 Bump 實(shí)例?？梢允褂盟鼇碓L問 Bump 的所有碰撞方法。

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

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

b.hit(sprite1, sprite2);

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

查看示例

在碰撞檢測時(shí)，Bump 的方法默認(rèn)精靈是矩形的，使用矩形碰撞檢測的算法，如果你想讓方法把一個(gè)精靈當(dāng)做圓形，使用圓形碰撞檢測的算法，需要將精靈的 circular 屬性設(shè)置為 true 。

anySprite.circular = true;

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

查看示例

如果你希望精靈對碰撞作出反應(yīng)，使它們不重疊，請將第三個(gè)參數(shù)設(shè)置為 true 。

b.hit(sprite1, sprite2, true);

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

查看示例

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

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

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

查看示例

設(shè)置第五個(gè)參數(shù)為 true 使 hit 方法使用精靈的全局坐標(biāo)。在檢測不同父容器的精靈之間的碰撞時(shí)，這很有用。

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

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

如果要檢查點(diǎn)對象是否與精靈碰撞，將點(diǎn)對象作為第一個(gè)參數(shù)，如下所示：

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

點(diǎn)對象是一個(gè)具有 x 和 y 兩個(gè)屬性的對象，x 和 y 表示了畫布中一個(gè)點(diǎn)的坐標(biāo)。

查看示例

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

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

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

查看示例

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

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

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

查看示例

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

示例：

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

查看示例

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

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

示例：

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

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

查看示例

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

anySprite.circular = true;

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

查看示例

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

b.hitTestCircle(sprite1,sprite2)

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

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

查看示例

當(dāng)移動的圓形精靈碰到?jīng)]有移動的圓形精靈時(shí)，你可以使用 circleCollision 方法創(chuàng)建碰撞反應(yīng)。

參數(shù)：

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

查看示例

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

參數(shù)：

b.movingCircleCollision(circle1, circle2)

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

查看示例

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

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

你可以看到內(nèi)層 for 循環(huán)的計(jì)數(shù)器開始就是一個(gè)大于外層 for 循環(huán)的數(shù)字：

let j = i + 1

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

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

示例：

b.multipleCircleCollision(container.children);

查看示例

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

b.hitTestRectangle(rectangle1, rectangle2)

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

示例：

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

查看示例

rectangleCollision 方法使矩形精靈表現(xiàn)得好像它們有質(zhì)量。它可以防止參數(shù)中的兩個(gè)矩形精靈重疊。

參數(shù)：

返回值：

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

示例：

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

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

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

rectangleCollision 方法具有非常有用的副作用。參數(shù)中的第二個(gè)精靈能夠?qū)⒌谝粋€(gè)精靈推走。如果你需要類似于推箱子游戲中的那種功能，這會很有用。

查看示例

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

參數(shù)：

返回值：

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

示例：

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

查看示例

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

參數(shù)：

示例：

b.circleRectangleCollision(circle, rectangle, true);

查看示例

contain 方法可以將精靈限制在一定矩形區(qū)域內(nèi)。

參數(shù)：

返回值：

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

示例：

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

//發(fā)生碰撞時(shí)的回調(diào)函數(shù)
function callbackFunction(collision) {
    console.log("collision", collision);
}

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

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

查看示例

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

注意：

使用 Bump 庫時(shí)，最好給精靈設(shè)置上速度屬性（vx，vy），因?yàn)?Bump 庫中許多方法實(shí)現(xiàn)效果時(shí)，都需要用到這個(gè)兩個(gè)屬性。

上一篇 學(xué)習(xí) PixiJS — 補(bǔ)間動畫

下一篇 學(xué)習(xí) PixiJS — 交互工具