在專案上使用 PixiJS，大致上分做幾種情況：1. 全站 PixiJS：適用情形：使用 PixiJS 開發遊戲類型的網站前幾天上線的 【 奔跑吧！台北 】跌倒...
先前的系列文提過，可透過 addChild(child) 將可視物件加到容器，並存放在 children 陣列裡 [PixiJS - Day-07] stag...
作為第一個介紹的實作，實作對象是這個 Gif： 出處是 FB 上的某處，這張圖的微妙在數學簡諧運動的球，在複製並平均分配到不同角度後，組成的大球也像在規律滾動...
同前幾篇 GSAP 的 PixiPlugin 介紹： PixiJS 官方範例上多了些 GSAP2 / GSAP3，這篇會介紹其中 Tick Director 的...
接續昨天的討論，先討論幾個可視物件的行為： 繼承自 Container 的行為 Graphics 類別 繼承自 Container，因此可以使用 addChi...
來到這次系列最後想講的主體：粒子效果 PixiJS 實現粒子效果有兩種方式： ParticleContainer pixi-particles 主要討論...
接續昨天的介紹，再加入一些控制與互動 今日 Demo / 參考效果：奇異博士 只要能用程式控制的，就可以拿來做動態與互動 昨天調整了 emitte...
接著來的幾篇會與畫面呈現相關： 這篇實際上是同事遇過的問題與整理，因為相當實用且會遇到，寫進系列文章裡 直接結論： TextStyle#breakWord...
Canvas / WebGL 的解析度一直是想研究但總是一直沒有好好研究的事情趁著這篇來討論看看 Canvas 的情況： 情境： 這是一個寬高皆為 200 的...
PixiJS 是怎麼把 Spritesheet JSON 檔讀成 PIXI.Spritesheet 後給 PIXI.AnimatedSprite 使用的? [...
這篇整理一些先前使用 GSAP 時遇到的問題 補間動態時觸發了一個補間動態： 準備了一段動態： 兔子的 x 為 0，兔子的 x 在 1秒 中移動到 100...
本篇討論 pointermove 事件 觸發事件與不同手機的差異 pointermove 事件： PC： 綁定在物件的 pointermove 事件，是只要...
昨天的文章提到了不同手機使用 PixiJS 的差異實際上在 PixiJS v5 後，將 canvas 的支援方法搬到 pixi.js-legacy 裡，如需向下...
PixiJS Examples 有一些 GSAP2 與 GSAP3 的範例： GSAP3 INTERACTION - GSAP 3 Random Draw...
實測後的 hitArea 幾個特性： 1: hitArea 不影響物件本身的寬高2: 設定 hitArea 時，感應區以 hitArea 設定為主，物件本身的邊...
使用 GSAP 時，可以設定 yoyo:true，讓補間動態到回到原點 這是一段 easeOut 的時間/數值圖動態感覺為： 問題：加上 yoyo: true...
先前有介紹過 dat.GUI，這篇補充一些先前沒提過的部分： [PixiJS - Day-16] 使用 dat.GUI 工具除錯 dat.GUI tuto...
Text 與 SVG 在 html 裡是向量，在 Canvas / WebGL 裡最後的結果是點陣。這篇會說明 Text 與 SVG 在 PixiJS 裡的特性...
填入漸層感覺不難，Canvas 有方法可以用： HTML Canvas Gradients CSS 也有方法可以用： CSS Gradients 但用 Pixi...
PixiJS 使用 canvas / WebGL 渲染畫面，只要支援 canvas / WebGL 的裝置大部分來說沒有問題，但還是會在一些細節部分有差異 S...
Day3 軟體架構 這邊卡比要介紹一個名詞，Software Architecture 軟體架構。 軟體架構 旨在如何更好的處理各個程式碼段落之間的溝通，雖然並...
Day0 動機 Motivation 80 年代對卡比來說是個很特別的年代，那個年代的音樂、影視、電玩深深地影響了卡比，特別是那個遊戲剛發跡的年代，極客們在沒...
這篇介紹 Texture / BaseTexture：好像常看到他們，可是有不是很好理解 可以想像 Texture 是 Sprite 使用的材質，那 BaseT...
補充幾個 Loader 的特性： 1. 在讀取完成前無法使用 add() 讀取下一個檔案： [ Demo-1 ] const loader = PIXI.Loa...
今天討論的是開發 PixiJS 使用的 chrome 擴充工具： Pixi.js devtoolsgithub： bfanger/pixi-inspector...
在畫弧形時可能遇到的問題：使用一樣的 畫弧形API，在畫 較小的弧形時出現 鋸齒[ Demo-1 ] PIXI.Graphics#arc - PIXI.Grap...
▉ 新手任務：安裝PixiJS 系統提示：「工欲善其事，必先利其器」，PixiJS青銅玩家獲得一把木劍。 赤手空拳的去打怪就準備被怪打，所以至少要先完成新...
前幾篇提到了 PixiJS 裡的 Texture 與快取，這篇要談的是 Loader PIXI.Loader 說明文件上的 Example ，還不算太複雜：...
官方範例上會越點越大的例子：Demo - INTERACTION > Click // Pointers normalize touch and mous...
在 PixiJS 裡，使用 addChild(...children) 方式將顯示物件放入 container 後並不是直接使用 container[child...
angelliya00
HelloKayac
NoZ
iThome鐵人賽
看影片追技術