PixiJS Examples 有一些 GSAP2 與 GSAP3 的範例： GSAP3 INTERACTION - GSAP 3 Random Draw...
這篇整理一些先前使用 GSAP 時遇到的問題 補間動態時觸發了一個補間動態： 準備了一段動態： 兔子的 x 為 0，兔子的 x 在 1秒 中移動到 100...
今天討論的是開發 PixiJS 使用的 chrome 擴充工具： Pixi.js devtoolsgithub： bfanger/pixi-inspector...
PIXI.utils 提供了一些好用的方法 也許不夠完整，但簡單的方法若可直接使用就不用另外實作或引用自別的類別 檢查 PixiJS 正在運行的裝置： P...
昨天的文章提到了不同手機使用 PixiJS 的差異實際上在 PixiJS v5 後，將 canvas 的支援方法搬到 pixi.js-legacy 裡，如需向下...
PixiJS 使用 canvas / WebGL 渲染畫面，只要支援 canvas / WebGL 的裝置大部分來說沒有問題，但還是會在一些細節部分有差異 S...
在畫弧形時可能遇到的問題：使用一樣的 畫弧形API，在畫 較小的弧形時出現 鋸齒[ Demo-1 ] PIXI.Graphics#arc - PIXI.Grap...
本篇接續昨天解析度的討論：在實做 resolution: window.devicePixelRatio 後，再使用濾鏡時可能會有的問題 昨天的 Demo：...
Canvas / WebGL 的解析度一直是想研究但總是一直沒有好好研究的事情趁著這篇來討論看看 Canvas 的情況： 情境： 這是一個寬高皆為 200 的...
這次系列到這篇滿30篇，但還有幾篇會寫，對自己來說不算完賽，這篇像是 完賽心得(上) 的概念 今年準備了兩個題目： 今年滿早就開始準備寫鐵人，準備時有兩個方向...
這篇介紹 TexturePacker 工具，並使用匯出的 .json檔 與 Spritesheet圖 今日目標： 使用 Loader 讀取 .json 檔，...
補充幾個 Loader 的特性： 1. 在讀取完成前無法使用 add() 讀取下一個檔案： [ Demo-1 ] const loader = PIXI.Loa...
PixiJS 是怎麼把 Spritesheet JSON 檔讀成 PIXI.Spritesheet 後給 PIXI.AnimatedSprite 使用的? [...
前幾篇提到了 PixiJS 裡的 Texture 與快取，這篇要談的是 Loader PIXI.Loader 說明文件上的 Example ，還不算太複雜：...
前幾篇提了 Texture、BaseTexture、PixiJS 的 Cache，這篇討論 可視物件 的 destroy() 方法 在 PixiJS 的 Co...
標題看起來好像有點厲害，但是是要實作把 網頁弄壞的 Demo 先前提到 Texture.from(<canvas>) 會產生 TextureCach...
這篇介紹 Texture / BaseTexture：好像常看到他們，可是有不是很好理解 可以想像 Texture 是 Sprite 使用的材質，那 BaseT...
前幾篇提到畫漸層填色，這篇來討論使用漸層線段 畫漸層色塊時使用 canvas2d gradient API 方法，繪製漸層線段原理差不多，但有不同的實作方法：方...
填入漸層感覺不難，Canvas 有方法可以用： HTML Canvas Gradients CSS 也有方法可以用： CSS Gradients 但用 Pixi...
實務上，通常會使用 白色或灰階 的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 ] box...
本篇討論 pointermove 事件 觸發事件與不同手機的差異 pointermove 事件： PC： 綁定在物件的 pointermove 事件，是只要...
實測後的 hitArea 幾個特性： 1: hitArea 不影響物件本身的寬高2: 設定 hitArea 時，感應區以 hitArea 設定為主，物件本身的邊...
在看互動相關的屬性時，除了 interactive 外還有一個類似的 interactiveChildren Demo 與實作後，覺得可把 interacti...
因為滿雷的，獨立成一篇 上一篇提到，alpha 設定為 0 時，仍可以感應的到 那如果是使用 beginFill(color, alpha) 畫的 graphi...
本篇會來討論 是否看得到 與 是否可互動 的關係 做了一個 Demo，右上角的 GUI 裡表示了整個方塊幾個屬性的開關 visible renderable...
這次寫系列文章時，查了很多 PixiJS 的說明文件與原始檔因此發現了一些說明文件上的問題，也發了幾次 PR 與發 Issue 參加討論 第一次勘誤與發 PR...
iThome鐵人賽
看影片追技術
看更多
angelliya00