PixiJS V5 教學 (15) - Bump

發表於 2020-05-18 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

前一篇我們學習如何使用 PIXI 建立幾何圖形，那麼接下來要學習 PIXI 中一個我認為滿特別的東西，也就是碰撞檢測。

前言

前一篇我們學習如何使用 PIXI 建立幾何圖形，那麼接下來要學習 PIXI 中一個我認為滿特別的東西，也就是碰撞檢測。

碰撞檢測 Bump

ok，看到這邊你可能會 Google 或是跟我一樣看一下 PIXI API Doc，但是你會發現 PIXI 有許多碰撞檢測的教學文章，都是講到是使用 hitTestRectangle，但是你會發現如果直接在 PIXI 中使用只會出現 hitTestRectangle is not defined，這個原因是因為 PIXI 本身並沒有所謂的碰撞檢測，，其實這個 hitTestRectangle 是必須額外引入的 library，而這個 library 叫做 Bump，它包含了許多 2D 所需的碰撞 API，但是在這個 Bump API 中說明有提到

(Important! this library targets Pixi v3.0.11, which is the most stable version of Pixi, and is the only version I can recommend using. This library will eventually be upgraded for Pixi v4 when the v4 branch matures.)

簡單講就是目前 Bump 只支援 PIXI v3.0.11，雖然作者有提到未來等到 Pixi 穩定 v4 後會跟著更新，但是似乎也沒有下落了，但是剛好 IT 鐵人幫前輩提供現成可以使用的 hitTestRectangle

function hitTestRectangle(r1, r2) {
    let hit, combinedHalfWidths, combinedHalfHeights, vx, vy;
    hit = false;
    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;
    r1.halfWidth = r1.width / 2;
    r1.halfHeight = r1.height / 2;
    r2.halfWidth = r2.width / 2;
    r2.halfHeight = r2.height / 2;
    vx = r1.centerX - r2.centerX;
    vy = r1.centerY - r2.centerY;
    combinedHalfWidths = r1.halfWidth + r2.halfWidth;
    combinedHalfHeights = r1.halfHeight + r2.halfHeight;
    if (Math.abs(vx) < combinedHalfWidths) {
        if (Math.abs(vy) < combinedHalfHeights) {
        hit = true;
        } else {
        hit = false;
        }
    } else {
        hit = false;
    }
    return hit;
};

使用方法很簡單，只需要呼叫並放入兩個物件 hitTestRectangle(a, b) 當若有發生碰撞則會回傳 true，透過該方式我們就可以做到許多事情

此外剛好 PIXI 論壇也有大神提供類似的 hitTestRectangle(a, b) 的方法，而且感覺更簡潔

function boxesIntersect(a, b)
{
  var ab = a.getBounds();
  var bb = b.getBounds();
  return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height;
}

那麼每一次碰撞我們都必須去更新目前碰撞結果，所以就會使用到先前所學的 app.ticker.add((delta) => {...} 來搭配，所以結果就會像這樣

app.ticker.add((delta) => {
  if (boxesIntersect(container, container2)) {
    container.y -= 20; // 避免被 alert 卡住
    container.x -= 20;
    alert('你撞到我了!');
  }
})

前言

碰撞檢測 Bump

參考文獻