作為第一個介紹的實作，實作對象是這個 Gif： 出處是 FB 上的某處，這張圖的微妙在數學簡諧運動的球，在複製並平均分配到不同角度後，組成的大球也像在規律滾動...
先前的系列文提過，可透過 addChild(child) 將可視物件加到容器，並存放在 children 陣列裡 [PixiJS - Day-07] stag...
前幾篇提了 Texture、BaseTexture、PixiJS 的 Cache，這篇討論 可視物件 的 destroy() 方法 在 PixiJS 的 Co...
接續昨天的討論，先討論幾個可視物件的行為： 繼承自 Container 的行為 Graphics 類別 繼承自 Container，因此可以使用 addChi...
接續昨天的介紹，再加入一些控制與互動 今日 Demo / 參考效果：奇異博士 只要能用程式控制的，就可以拿來做動態與互動 昨天調整了 emitte...
接著來的幾篇會與畫面呈現相關： 這篇實際上是同事遇過的問題與整理，因為相當實用且會遇到，寫進系列文章裡 直接結論： TextStyle#breakWord...
同前幾篇 GSAP 的 PixiPlugin 介紹： PixiJS 官方範例上多了些 GSAP2 / GSAP3，這篇會介紹其中 Tick Director 的...
Canvas / WebGL 的解析度一直是想研究但總是一直沒有好好研究的事情趁著這篇來討論看看 Canvas 的情況： 情境： 這是一個寬高皆為 200 的...
PixiJS 是怎麼把 Spritesheet JSON 檔讀成 PIXI.Spritesheet 後給 PIXI.AnimatedSprite 使用的? [...
來到這次系列最後想講的主體：粒子效果 PixiJS 實現粒子效果有兩種方式： ParticleContainer pixi-particles 主要討論...
這篇整理一些先前使用 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 設定為主，物件本身的邊...
先前在 iT 邦幫忙鐵人賽 寫 PixiJS 是2017年年底的事 由於是再談 PixiJS，這次的系列文是基於 2018 iT 邦幫忙鐵人賽PixiJS，方便...
使用 GSAP 時，可以設定 yoyo:true，讓補間動態到回到原點 這是一段 easeOut 的時間/數值圖動態感覺為： 問題：加上 yoyo: true...
Text 與 SVG 在 html 裡是向量，在 Canvas / WebGL 裡最後的結果是點陣。這篇會說明 Text 與 SVG 在 PixiJS 裡的特性...
填入漸層感覺不難，Canvas 有方法可以用： HTML Canvas Gradients CSS 也有方法可以用： CSS Gradients 但用 Pixi...
在 PixiJS 裡，使用 addChild(...children) 方式將顯示物件放入 container 後並不是直接使用 container[child...
Day0 動機 Motivation 80 年代對卡比來說是個很特別的年代，那個年代的音樂、影視、電玩深深地影響了卡比，特別是那個遊戲剛發跡的年代，極客們在沒...
寫在第二天的是覺得很容易踩到的麻煩點：排列與寬高 為了重現麻煩點，設定了一個情境： 創造三個容器，裡頭各放了一個 100x100 的色塊。 並讓三個容器水平緊...
今天討論的是開發 PixiJS 使用的 chrome 擴充工具： Pixi.js devtoolsgithub： bfanger/pixi-inspector...
先前有介紹過 dat.GUI，這篇補充一些先前沒提過的部分： [PixiJS - Day-16] 使用 dat.GUI 工具除錯 dat.GUI tuto...
補充幾個 Loader 的特性： 1. 在讀取完成前無法使用 add() 讀取下一個檔案： [ Demo-1 ] const loader = PIXI.Loa...
PixiJS 使用 canvas / WebGL 渲染畫面，只要支援 canvas / WebGL 的裝置大部分來說沒有問題，但還是會在一些細節部分有差異 S...
來到這系列的最後一篇，除了心得結語外，也討論的學習 PixiJS 的過程 時期1：不考慮效能，這時期練的是能做出什麼 會查找 API，試著用程式做動態，開心...
系列討論來到互動，先暖身幾個 PixiJS 互動的特性： 開啟互動： PixiJS 預設沒有互動行為，需要先指定 interactive = true指定了 i...
Day3 軟體架構 這邊卡比要介紹一個名詞，Software Architecture 軟體架構。 軟體架構 旨在如何更好的處理各個程式碼段落之間的溝通，雖然並...
在畫弧形時可能遇到的問題：使用一樣的 畫弧形API，在畫 較小的弧形時出現 鋸齒[ Demo-1 ] PIXI.Graphics#arc - PIXI.Grap...
angelliya00
HelloKayac
iThome鐵人賽
看影片追技術