用PIXI.JS做跳躍

雖然角色跳躍可以只是簡單的使用anim.y來改變數值就能達成，但是這樣相對死板，這邊提供一個函式使ticker 的時間來讓跳躍遞增上升或抵減下落，代碼如下：

const direction = -1, // 跳躍的方向 -1為上， 1為下
      gravity = 1,
      power = 15; // 跳躍的力度

let jumpAt;

// 角色的預設y軸位置
jumpAt = anim.y;

function playerjump() {
  if (anim.jump) return;
  // 跳躍的開關
  anim.jump = 1;

  let time = 0;
  
  const tick = (deltaMs) => {
    const jumpHeight = (-gravity / 2) * Math.pow(time, 2) + power * time;
  
    // 判斷跳躍結束後的動作
    if (jumpHeight < 0) {
      anim.jump = 0;
      
      // 移除函式在ticker繼續刷新時間
      app.ticker.remove(tick);

      anim.y = jumpAt;
      return;
    }

    anim.y = jumpAt + jumpHeight * direction;
    time += deltaMs;
  };

  // 增加函式在ticker繼續刷新時間
  app.ticker.add(tick);
}

再加上跳躍的連續動圖代碼之後就會變成以下：

const direction = -1, // 跳躍的方向 -1為上， 1為下
      gravity = 1,
      power = 15; // 跳躍的力度

let jumpAt;

// 角色的預設y軸位置
jumpAt = anim.y;

function playerjump() {
  if (anim.jump) return;

  // 跳躍的開關
  anim.jump = 1;

  let time = 0;
  
  const tick = (deltaMs) => {
    const jumpHeight = (-gravity / 2) * Math.pow(time, 2) + power * time;

    // 判斷跳躍動圖是否在播放
    if(!anim.jumpAnimIng) {
      anim.jumpAnimIng = 1;
      
      // 更換跳躍的動圖陣列
      anim.textures = rightJumpTextureArray;
      anim.loop = false;
      anim.animationSpeed = 0.1;
      anim.play();
    }
  
    // 判斷跳躍結束後的動作
    if (jumpHeight < 0) {
      anim.jump = 0;
      anim.jumpAnimIng = 0;
      
      // 更換回跑步的動圖陣列
      anim.textures = rightTextureArray;
      anim.loop = true;
      anim.animationSpeed = 0.3;
      anim.gotoAndPlay(0);

      // 移除函式在ticker繼續刷新時間
      app.ticker.remove(tick);

      anim.y = jumpAt;
      return;
    }

    anim.y = jumpAt + jumpHeight * direction;
    time += deltaMs;
  };

  // 增加函式在ticker繼續刷新時間
  app.ticker.add(tick);
}

跳躍Sprite Sheet素材