PixiJS V5 教學 (19) - 碰撞邊界(1)

發表於 2020-06-15 更新於 2020-06-21 分類於 JavaScript

Google AD

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

接下來邊界相關的東西，通常來講我們在玩遊戲都會有所謂的邊界。

前言

接下來邊界相關的東西，通常來講我們在玩遊戲都會有所謂的邊界。

邊界

我們在玩一些遊戲的時候都會有所謂的邊界，而在 PIXI 中是沒有邊界這個相關的方法可以使用，但是在 Pixi教程中文版這一篇有介紹邊界的使用方法，所以就讓我們直接看一下它的程式碼。

在這一篇教學文章中，自訂的邊界方法是 contain

function contain(sprite, container) {
  let collision = undefined;
  //Left
  if (sprite.x < container.x) {
    sprite.x = container.x;
    collision = "left";
  }
  //Top
  if (sprite.y < container.y) {
    sprite.y = container.y;
    collision = "top";
  }
  //Right
  if (sprite.x + sprite.width > container.width) {
    sprite.x = container.width - sprite.width;
    collision = "right";
  }
  //Bottom
  if (sprite.y + sprite.height > container.height) {
    sprite.y = container.height - sprite.height;
    collision = "bottom";
  }
  //Return the `collision` value
  return collision;
}

我們可以注意到他會傳入兩個參數，其中第二個參數較為特殊，主要是傳入一個物件參數，主要是畫布的範圍大小，所以我們可以從上方範例中發現作者是這樣傳入 explorer, {x: 28, y: 10, width: 488, height: 480}，所以我們可以透過該方法來修改一下我們前面介紹的小範例

在前面章節我們是透過 container.x 來判斷我們是否碰到邊界，當碰到邊界就往回走，這邊就要改用 Pixi教程中文版中作者提供的 contain 方法來整合

程式碼會稍微有點不同

function init(item) {
  const sprite = new PIXI.Sprite(item.fakeimg.texture);
  emojiContainer.addChild(sprite);
  sprite.vy = 2;
  app.ticker.add((delta) => {
    tickerLoop(delta);
  })
  function tickerLoop(delta) {
    sprite.y += sprite.vy;
    let status = contain(sprite, {x: 28, y: 0, width: 488, height: 480});
    if(status === 'top' || status === 'bottom') {
      sprite.vy *= -1;
    }
  }
}

其中這邊有一個關鍵在於 sprite.vy = 2; 如果你沒有設置該速率的話，就會導致 if(status === 'top' || status === 'bottom') { sprite.vy *= -1; } 這一段無法正常運作，可能會不停卡在一個地方，其主要是透過 *= -1 來反轉移動。

參考文獻

Pixi教程中文版