▉ 前言 這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure H...
▉ 前言 這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure H...
▉ 前言 在【LV. 2】與【LV. 3】階段完成了兩個新手任務，也代表知道怎麼安裝與測試PixiJS是否可以順利運作，終於正式踏入PixiJS地圖準備實際操作...
▉ 新手任務：測試PixiJS是否能運作 系統提示：「慢慢來，比較快」，PixiJS青銅玩家獲得一雙不一定跑得快但一定跑得穩的鞋。 在【LV. 2】階段時...
▉ 新手任務：安裝PixiJS 系統提示：「工欲善其事，必先利其器」，PixiJS青銅玩家獲得一把木劍。 赤手空拳的去打怪就準備被怪打，所以至少要先完成新...
▉ 打排位之前要先練等啊 系統提示：「好的開始是成功的一半」，PixiJS青銅玩家進入遊戲。 JS都還沒學會，就踏入PixiJS的領域，在什麼都不懂的情況...
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...
iThome鐵人賽
看影片追技術
看更多
NoZ
HelloKayac
angelliya00