Day18 接下來再進到分數系統之前，卡比要先進行位置的校正，使我們更接近原作。 Enemy 首先我們需要校正 Enemy 的位置，我們將每個整個 Enemy...
Day17 開始做 介面 (HUD)，接下來都是用之前有實作過的技巧！ Render 因為要調整 Text 的位置，我們需要調整一下 render。 funct...
Day16 接下來，卡比想要先去做 介面 (HUD)，方便我們進入到計分系統的時候，可以順便驗證分數。 首先，我們讓畫面能夠渲染 文字。 Text 首先我們要增...
Day15 在 Space Invaders 的遊戲設計中，除了隨著不斷前進而產生的壓迫感之外，Enemy 的射擊也扮演了相輔相成的作用。 他讓遊戲內容不只是單...
Day14 在 Space Invaders 的遊戲設計中，Enemy 的移動邏輯扮演了非常重要的角色，他為遊戲提供了難度，並隨著玩家每次擊殺 Enemy 增加...
Day13 目前做到這邊的大家應該會發現一些問題，在上一個章節，雖然我們成功產生了很多敵人，但是程式卻發生了 Memory Leak。 這就是這個章節的主題，程...
Day12 Level Design 接下來我們要開始設計關卡，小蜜蜂的關卡很單純，但是背後的心理卻很深奧。 不過卡比目前只需要完成基本的就行了，也就是將 En...
Day11 延續上一回，我們嘗試了 Function Composition 的技巧，這次來試試看將同樣的技巧用於 Enemy。 這樣做的目的是，接下來要導入...
Day10 接下來，要幫 Squid 也裝上 Laser，敵人的 Laser 跟我們的外觀是不一樣的，但是卡比希望可以利用原本已經寫好的 Laser 函式，減少...
Day9 Collision Behavior 當 Laser 跟 Squid 相互撞擊時，我們想要將 Squid 從場上移除。我們需要一個 event 讓我們...
Day8 Collision Detection 接下來我們要讓 Laser 打中敵人時，將敵人消滅。Laser 要有辦法偵測到目前打中誰，所以需要一個新的功能...
Day7 Shoot 是時候幫我們的 LaserCannon 裝上子彈了！ Input 首先，當玩家按下 Space 時要發射 Laser，所以我們要在 Inp...
Day6 Scenes 在 Web 的領域裡，一個網站會有頁面，像是 Main Page, Login Page, Dashboard ... etc。Game...
Day5 寫程式寫到一定的階段後，會開始發現，其實做出想要的功能並不困難。真正難的，其實是如何寫出有彈性的程式碼以應對各種需求跟變化。卡比接下來要做的，是在一般...
Day4 接下來卡比要是著操作 LaserCannon，讓他可以左右移動。 Input 在上個章節，卡比介紹了 GameLoop。 示意用 while (tru...
Day3 軟體架構 這邊卡比要介紹一個名詞，Software Architecture 軟體架構。 軟體架構 旨在如何更好的處理各個程式碼段落之間的溝通，雖然並...
Day2 Animation 動畫 動畫在遊戲中扮演非常重要的角色，當繪製的角色在螢幕上動起來時，就像是角色活起來一樣。卡比接下來想要跟大家分享這份喜悅！ 分析...
Day0 動機 Motivation 80 年代對卡比來說是個很特別的年代，那個年代的音樂、影視、電玩深深地影響了卡比，特別是那個遊戲剛發跡的年代，極客們在沒...
來到這系列的最後一篇，除了心得結語外，也討論的學習 PixiJS 的過程 時期1：不考慮效能，這時期練的是能做出什麼 會查找 API，試著用程式做動態，開心...
接續昨天的介紹，再加入一些控制與互動 今日 Demo / 參考效果：奇異博士 只要能用程式控制的，就可以拿來做動態與互動 昨天調整了 emitte...
來到這次系列最後想講的主體：粒子效果 PixiJS 實現粒子效果有兩種方式： ParticleContainer pixi-particles 主要討論...
先前有介紹過 dat.GUI，這篇補充一些先前沒提過的部分： [PixiJS - Day-16] 使用 dat.GUI 工具除錯 dat.GUI tuto...
同前幾篇 GSAP 的 PixiPlugin 介紹： PixiJS 官方範例上多了些 GSAP2 / GSAP3，這篇會介紹其中 Tick Director 的...
使用 GSAP 時，可以設定 yoyo:true，讓補間動態到回到原點 這是一段 easeOut 的時間/數值圖動態感覺為： 問題：加上 yoyo: true...
PixiJS Examples 有一些 GSAP2 與 GSAP3 的範例： GSAP3 INTERACTION - GSAP 3 Random Draw...
這篇整理一些先前使用 GSAP 時遇到的問題 補間動態時觸發了一個補間動態： 準備了一段動態： 兔子的 x 為 0，兔子的 x 在 1秒 中移動到 100...
今天討論的是開發 PixiJS 使用的 chrome 擴充工具： Pixi.js devtoolsgithub： bfanger/pixi-inspector...
PIXI.utils 提供了一些好用的方法 也許不夠完整，但簡單的方法若可直接使用就不用另外實作或引用自別的類別 檢查 PixiJS 正在運行的裝置： P...
昨天的文章提到了不同手機使用 PixiJS 的差異實際上在 PixiJS v5 後，將 canvas 的支援方法搬到 pixi.js-legacy 裡，如需向下...
PixiJS 使用 canvas / WebGL 渲染畫面，只要支援 canvas / WebGL 的裝置大部分來說沒有問題，但還是會在一些細節部分有差異 S...
HelloKayac
angelliya00
iThome鐵人賽
看影片追技術