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