前言
前面已經學會引入圖片，那麼單純只是引入圖片有點無聊，所以來試著移動圖片吧~
循環
在 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 吧~
參考文獻