PIXI.JS碰撞偵測的小Tip

Published in

UniMarket

Dec 28, 2022

在PIXI.JS裡判斷碰撞偵測時常常會遇見碰撞連續觸發的狀況，這時候可以在創建要被偵測碰撞的物件時幫它新增一個自定義參數來當作碰撞的依據，以下範例為使用class方式創建物件：

// 金幣陣列
let goldArray = [];

class gold extends PIXI.AnimatedSprite {
  constructor(texture) {

    // 整理AnimatedSprite需要的貼圖陣列
    let textureArray = [];
    for (let i = 1; i < 8; i++) {
      textureArray.push(PIXI.Texture.from('gold_'+i+'.png'))
    }

    // 使用整理好的貼圖陣列
    super(textureArray);

    // 設置動畫的中心點置中
    this.anchor.set(0.5);

    // 設置動畫的位置
    this.x = (goldArray.length)?goldArray[goldArray.length-1].x + 60 + Math.floor(Math.random() * 5) * 60 : 800;
    this.y = 140;

    // 設置動畫的尺寸
    this.width = 31;
    this.height = 40;

    // 設置動畫的碰撞
    this.hit = 0;

    // 設置動畫的播放速度    
    this.animationSpeed = 0.15;

    // 播放動畫
    this.play();
    
    // 將動畫添加到舞台上
    app.stage.addChildAt(this, 2);

    // 將動畫添加到金幣陣列裡
    goldArray.push(this);
  }

  // 碰撞後需要被呼叫的函數
  isHit() {
    this.alpha = 0;

    // 讓碰撞後改變物件的hit參數
    this.hit = 1;
  }
}

以上範例為在創建物件時我自定義了一個名為 hit 的參數，在偵測碰撞事件時可以用來當作判斷的依據，以此避免重複的觸發碰撞事件引響判斷式。

如果不使用 hit 參數判斷：

app.ticker.add(delta => {

  // 判斷兩物件是否發生碰撞
  if (hitTestRectangle(anim, gold)) {

    // 發生碰撞時呼叫物件裡的 isHit 函式
    gold.isHit();
    
    console.log('碰到了!');

  }
}

會連續觸發11次碰撞偵測

使用 hit 參數判斷：

app.ticker.add(delta => {

  // 判斷兩物件是否發生碰撞，多新增判斷 gold.hit
  if (hitTestRectangle(anim, gold) && !gold.hit) {

    // 發生碰撞時呼叫物件裡的 isHit 函式
    gold.isHit();
    
    console.log('碰到了!');

  }
}

能有效避免連續觸發碰撞偵測

PIXI.JS碰撞偵測的小Tip

Written by Heko