來到這系列的最後一篇,除了心得結語外,也討論的學習 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...