PIXI.JS碰撞偵測

在PIXI.JS裡面沒有內建碰撞的函式，不過可以使用下方官方提供的函式：

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;
};

此函式是預設為兩相碰撞的物件中心點皆設為正中心anchor.set(0.5)，如果物件的中心點不是設為正中心anchor.set(0.5)要記得稍微調整函式的寫法。

使用方式很簡單，就是將兩個要判斷相碰撞的物件帶入hitTestRectangle函式中，如果發生碰撞就會回傳true ，反之false ，使用範例如下：

app.ticker.add(delta => {
  if (hitTestRectangle(anim, gold)) {

    // 發生碰撞時透明度設為 0
    gold.alpha = 0;

  }
}