iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

再談 PixiJS,那些先前不一定有提到的部分與地雷 系列

PixiJS 目前出到 v5,仍舊是相當好用的 WebGL 內容產生工具
本系列文延續我 2018 iT 邦幫忙鐵人賽 的文章
加入很多實作時遇到的問題、意料之外的狀況、一些進階使用方式與小工具的使用心得

鐵人鍊成 | 共 45 篇文章 | 22 人訂閱 訂閱系列文 RSS系列文

[Re:PixiJS - Day31] Canvas、PixiJS 與 Window.devicePixelRatio 的關係

Canvas / WebGL 的解析度一直是想研究但總是一直沒有好好研究的事情 趁著這篇來討論看看 Canvas 的情況: 情境: 這是一個寬高皆為 200...

2020-10-01 ‧ 由 angelliya00 分享

[Re:PixiJS - Day32] 使用濾鏡時解析度突然變差

本篇接續昨天解析度的討論: 在實做 resolution: window.devicePixelRatio 後,再使用濾鏡時可能會有的問題 昨天的 Demo:...

2020-10-02 ‧ 由 angelliya00 分享

[Re:PixiJS - Day33] 畫弧形時可能會有鋸齒的問圖

在畫弧形時可能遇到的問題: 使用一樣的 畫弧形API,在畫 較小的弧形時出現 鋸齒 [ Demo-1 ] PIXI.Graphics#arc - PIXI.G...

2020-10-03 ‧ 由 angelliya00 分享

[Re:PixiJS - Day34] 不同手機使用 PixiJS 的各種問題

PixiJS 使用 canvas / WebGL 渲染畫面,只要支援 canvas / WebGL 的裝置大部分來說沒有問題, 但還是會在一些細節部分有差異...

2020-10-04 ‧ 由 angelliya00 分享

[Re:PixiJS - Day35] PixiJS v5 預設不支援不支援 WebGL 的瀏覽器

昨天的文章提到了不同手機使用 PixiJS 的差異 實際上在 PixiJS v5 後,將 canvas 的支援方法搬到 pixi.js-legacy 裡,如需向...

2020-10-05 ‧ 由 angelliya00 分享

[Re:PixiJS - Day36] PIXI.utils 與內建的輸出圖檔功能

PIXI.utils 提供了一些好用的方法 也許不夠完整,但簡單的方法若可直接使用 就不用另外實作或引用自別的類別 檢查 PixiJS 正在運行的裝置:...

2020-10-06 ‧ 由 angelliya00 分享

[Re:PixiJS - Day37] Pixi.js 開發工具的小趣事

今天討論的是開發 PixiJS 使用的 chrome 擴充工具: Pixi.js devtools github: bfanger/pixi-inspector...

2020-10-07 ‧ 由 angelliya00 分享

[Re:PixiJS - Day38] GSAP / TweenMax 常發生的補間動態覆蓋問題

這篇整理一些先前使用 GSAP 時遇到的問題 補間動態時觸發了一個補間動態: 準備了一段動態: 兔子的 x 為 0,兔子的 x 在 1秒 中移動到 100...

2020-10-08 ‧ 由 angelliya00 分享

[Re:PixiJS - Day39] GSAP 的 PixiPlugin 介紹

PixiJS Examples 有一些 GSAP2 與 GSAP3 的範例: GSAP3 INTERACTION - GSAP 3 Random Draw...

2020-10-09 ‧ 由 angelliya00 分享

[Re:PixiJS - Day40] GSAP 的 yoyoEase

使用 GSAP 時,可以設定 yoyo:true,讓補間動態到回到原點 這是一段 easeOut 的時間/數值圖 動態感覺為: 問題:加上 yoyo: tr...

2020-10-10 ‧ 由 angelliya00 分享