標籤: Canvas

JavaScript PixiJS V5 教學 PixiJS

PixiJS V5 教學 (30) - 遊戲循環

接下來就準備要來做遊戲的循環，簡單來講就是 app.ticker.add((delta) => {...});

2020-08-31 2 分鐘閱讀

閱讀全文

JavaScript PixiJS V5 教學 PixiJS

PixiJS V5 教學 (29) - treasureHunter (寶藏獵人)

接下來我們差不多要來實作 treasureHunter (寶藏獵人) 的部分，所以這邊會慢慢拆解組合出一個簡易的寶藏獵人。

2020-08-24 5 分鐘閱讀

閱讀全文

JavaScript PixiJS V5 教學 PixiJS

PixiJS V5 教學 (28) - JSON 加載圖片

前一章節我們學會該如何裁切圖片，接下來就會另一種方式來加載圖片。

2020-08-17 4 分鐘閱讀

閱讀全文

JavaScript PixiJS V5 教學 PixiJS

PixiJS V5 教學 (27) - 裁切圖片

接下來我們將會來了解如何透過 JSON 加載圖片，但是在那之前我們先來學一下如何裁切圖片。

2020-08-10 3 分鐘閱讀

閱讀全文

JavaScript PixiJS V5 教學 PixiJS

PixiJS V5 教學 (26) - 寶藏獵人

接下來我們將會開始整合一些前面的技巧來製作一個小遊戲。

2020-08-03 2 分鐘閱讀

閱讀全文

JavaScript PixiJS V5 教學 PixiJS

PixiJS V5 教學 (25) - Dust

接下來認識一下粒子效果的部分，在這一篇將會直接介紹使用套件 Dust 來製作粒子效果。

2020-07-27 2 分鐘閱讀

閱讀全文

JavaScript PixiJS V5 教學 PixiJS

PixiJS V5 教學 (24) - AnimatedSprite

Pixi 是一套很適合製作 2D 動畫的一個框架，那麼又該如何在 Pixi 撰寫動畫呢?

2020-07-21 2 分鐘閱讀

閱讀全文

JavaScript PixiJS V5 教學 PixiJS

PixiJS V5 教學 (23) - dat.GUI

接下來這一篇就要來實際加入 dat.GUI。

2020-07-15 2 分鐘閱讀

閱讀全文

JavaScript PixiJS V5 教學 PixiJS

PixiJS V5 教學 (22) - debug

接下來我們來認識一下該如何在 Pixi 上 debug。

2020-07-07 2 分鐘閱讀

閱讀全文

JavaScript PixiJS V5 教學 PixiJS

PixiJS V5 教學 (21) - 碰撞邊界(3)

這一篇會稍微接續上一篇的部分小地方來做修正與說明，所以大多程式碼會以上一篇為主，所以這一篇會稍微短一點。

2020-07-01 2 分鐘閱讀

閱讀全文