PixiJS V5 教學 (7) - Ticker

發表於 2020-03-23 分類於 JavaScript

Google AD

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

Liker 讚賞

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

｜

前面已經學會引入圖片，那麼單純只是引入圖片有點無聊，所以來試著移動圖片吧~

前言

前面已經學會引入圖片，那麼單純只是引入圖片有點無聊，所以來試著移動圖片吧~

循環

在 PIXI 裡面中有一個叫做 ticker 的東西，中文可以稱循環事件，此外在一些翻譯文件中則會稱為遊戲循環，那麼就是會使用到這一個 API 來達到移動的效果。

首先先讓我們回顧一下前面引入圖片的部分

const loader = new PIXI.Loader();
loader
  .add('fakeimg','https://i.imgur.com/j5QyG2t.png')
  .load((loader, resource)=> {
    console.log('Done');
    const sprite = new PIXI.Sprite(resource.fakeimg.texture);
    sprite.x = Math.floor(i) * 100;
    sprite.y = Math.floor(i) * 100;
    container.addChild(sprite)
  })

此外這邊我稍微優化一下程式碼，讓程式碼好看好維護一點

const loader = new PIXI.Loader();
loader
  .add('fakeimg','https://i.imgur.com/j5QyG2t.png')
  .load((loader, resource)=> {
    console.log('Done');
    init(resource);
  })
function init(item) {
  const sprite = new PIXI.Sprite(item.fakeimg.texture);
  container.addChild(sprite);
}

接下來我們該如何使用 ticker 呢?ticker 的概念就跟迴圈雷同，但是 ticker 次美 1 秒更新 60 次

使用的方式如下

const loader = new PIXI.Loader();
loader
  .add('fakeimg','https://i.imgur.com/j5QyG2t.png')
  .load((loader, resource)=> {
    console.log('Done');
    init(resource);
  })
function init(item) {
  const sprite = new PIXI.Sprite(item.fakeimg.texture);
  container.addChild(sprite);
}

app.ticker.add((delta) => {
  container.x += 1;
})

恭喜你，你已經完成了基本的人物移動~

但是我想你應該會疑惑「可是圖跑出視窗了耶?」又或者是「我沒看到圖啊?」

如果你是沒看到圖的話，那是因為一開始你進入這個頁面的時候，他就已經在運作了，只需要 reset 就可以看到了。

接下來要講一下如何讓他來回跑的方式，基本上很簡單，只需要善加利用 if...else... 來判斷即可，由於 container.x 是一個表達式會回傳值，所以就可以從這個方向去做調整囉~

app.ticker.add((delta) => {
  tickerLoop();
})
function tickerLoop() {
  if(status) {
    container.x += 5;
    container.y += 1;
    if(container.x > 400) {
      status = 0;
    }
  } else {
    container.x -= 5;
    container.y -= 1;
    if(container.x < 0) {
      status = 1;
    }
  }
}

下一篇就來介紹一下 ticker 其他的 API 吧~

參考文獻

PixiJS