PixiJS V5 教學 (7) - Ticker

前言

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

循環

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

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

1
2
3
4
5
6
7
8
9
10
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)
})

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

1
2
3
4
5
6
7
8
9
10
11
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 次

使用的方式如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 是一個表達式會回傳值,所以就可以從這個方向去做調整囉~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 吧~

參考文獻

0%