來到這系列的最後一篇，除了心得結語外，也討論的學習 PixiJS 的過程 時期1：不考慮效能，這時期練的是能做出什麼 會查找 API，試著用程式做動態，開心...
接續昨天的介紹，再加入一些控制與互動 今日 Demo / 參考效果：奇異博士 只要能用程式控制的，就可以拿來做動態與互動 昨天調整了 emitte...
來到這次系列最後想講的主體：粒子效果 PixiJS 實現粒子效果有兩種方式： ParticleContainer pixi-particles 主要討論...
先前有介紹過 dat.GUI，這篇補充一些先前沒提過的部分： [PixiJS - Day-16] 使用 dat.GUI 工具除錯 dat.GUI tut...
同前幾篇 GSAP 的 PixiPlugin 介紹： PixiJS 官方範例上多了些 GSAP2 / GSAP3，這篇會介紹其中 Tick Director...
使用 GSAP 時，可以設定 yoyo:true，讓補間動態到回到原點 這是一段 easeOut 的時間/數值圖 動態感覺為： 問題：加上 yoyo: tr...
PixiJS Examples 有一些 GSAP2 與 GSAP3 的範例： GSAP3 INTERACTION - GSAP 3 Random Draw...
這篇整理一些先前使用 GSAP 時遇到的問題 補間動態時觸發了一個補間動態： 準備了一段動態： 兔子的 x 為 0，兔子的 x 在 1秒 中移動到 100...
今天討論的是開發 PixiJS 使用的 chrome 擴充工具： Pixi.js devtools github： bfanger/pixi-inspector...
PIXI.utils 提供了一些好用的方法 也許不夠完整，但簡單的方法若可直接使用 就不用另外實作或引用自別的類別 檢查 PixiJS 正在運行的裝置：...
昨天的文章提到了不同手機使用 PixiJS 的差異 實際上在 PixiJS v5 後，將 canvas 的支援方法搬到 pixi.js-legacy 裡，如需向...
PixiJS 使用 canvas / WebGL 渲染畫面，只要支援 canvas / WebGL 的裝置大部分來說沒有問題， 但還是會在一些細節部分有差異...
在畫弧形時可能遇到的問題： 使用一樣的 畫弧形API，在畫 較小的弧形時出現 鋸齒 [ Demo-1 ] PIXI.Graphics#arc - PIXI.G...
本篇接續昨天解析度的討論： 在實做 resolution: window.devicePixelRatio 後，再使用濾鏡時可能會有的問題 昨天的 Demo：...
Canvas / WebGL 的解析度一直是想研究但總是一直沒有好好研究的事情 趁著這篇來討論看看 Canvas 的情況： 情境： 這是一個寬高皆為 200...
這次系列到這篇滿30篇，但還有幾篇會寫， 對自己來說不算完賽，這篇像是 完賽心得(上) 的概念 今年準備了兩個題目： 今年滿早就開始準備寫鐵人，準備時有兩個方...
這篇介紹 TexturePacker 工具，並使用匯出的 .json檔 與 Spritesheet圖 今日目標： 使用 Loader 讀取 .json 檔，...
補充幾個 Loader 的特性： 1. 在讀取完成前無法使用 add() 讀取下一個檔案： [ Demo-1 ] const loader = PIXI.Lo...
PixiJS 是怎麼把 Spritesheet JSON 檔讀成 PIXI.Spritesheet 後給 PIXI.AnimatedSprite 使用的? [...
前幾篇提到了 PixiJS 裡的 Texture 與快取，這篇要談的是 Loader PIXI.Loader 說明文件上的 Example ，還不算太複雜：...
前幾篇提了 Texture、BaseTexture、PixiJS 的 Cache， 這篇討論 可視物件 的 destroy() 方法 在 PixiJS 的 C...
標題看起來好像有點厲害，但是是要實作把 網頁弄壞的 Demo 先前提到 Texture.from(<canvas>) 會產生 TextureCach...
這篇介紹 Texture / BaseTexture： 好像常看到他們，可是有不是很好理解 可以想像 Texture 是 Sprite 使用的材質，那 Base...
前幾篇提到畫漸層填色，這篇來討論使用漸層線段 畫漸層色塊時使用 canvas2d gradient API 方法，繪製漸層線段原理差不多，但有不同的實作方法：...
填入漸層感覺不難， Canvas 有方法可以用： HTML Canvas Gradients CSS 也有方法可以用： CSS Gradients 但用...
實務上，通常會使用 白色或灰階 的PNG圖片、 PIXI.Text 或 PIXI.Graphics，配合 tint 的方法，填入想要的顏色 實作了 tint...
Text 與 SVG 在 html 裡是向量，在 Canvas / WebGL 裡最後的結果是點陣。 這篇會說明 Text 與 SVG 在 PixiJS 裡的特...
Graphics 類別有畫圓角的方法：Graphics#drawRoundedRect 但畫圓角矩形的方法在 v5.2.2 前有問題， 當畫的圓角矩形寬高 小於...
接著來的幾篇會與畫面呈現相關： 這篇實際上是同事遇過的問題與整理，因為相當實用且會遇到，寫進系列文章裡 直接結論： TextStyle#breakWord...
PixiJS 註冊 pointerdown事件 時，無論是 PC 或手機版，收到事件的 原始事件 都是原生的 PointerEvent [ Demo ] b...
angelliya00
iT 邦幫忙鐵人賽