iT邦幫忙

pixijs相關文章
共有 75 則文章
鐵人賽 Modern Web

技術 [Re:PixiJS - Day45] 不同時期的學習 PixiJS 的過程與真完賽心得

來到這系列的最後一篇,除了心得結語外,也討論的學習 PixiJS 的過程 時期1:不考慮效能,這時期練的是能做出什麼 會查找 API,試著用程式做動態,開心...

鐵人賽 Modern Web

技術 [Re:PixiJS - Day44] pixi-particles 粒子效果 2/2:實作應用

接續昨天的介紹,再加入一些控制與互動 今日 Demo / 參考效果:奇異博士 只要能用程式控制的,就可以拿來做動態與互動 昨天調整了 emitte...

鐵人賽 Modern Web

技術 [Re:PixiJS - Day43] pixi-particles 粒子效果 1/2:plugin 安裝與開始使用

來到這次系列最後想講的主體:粒子效果 PixiJS 實現粒子效果有兩種方式: ParticleContainer pixi-particles 主要討論...

鐵人賽 Modern Web

技術 [Re:PixiJS - Day42] dat.gui 小技巧 .name() / .listen() / .remember(obj)

先前有介紹過 dat.GUI,這篇補充一些先前沒提過的部分: [PixiJS - Day-16] 使用 dat.GUI 工具除錯 dat.GUI tut...

鐵人賽 Modern Web

技術 [Re:PixiJS - Day41] 將 PixiJS 的 ticker 替換為 GSAP 的 ticker

同前幾篇 GSAP 的 PixiPlugin 介紹: PixiJS 官方範例上多了些 GSAP2 / GSAP3,這篇會介紹其中 Tick Director...

鐵人賽 Modern Web

技術 [Re:PixiJS - Day40] GSAP 的 yoyoEase

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web DAY 30

技術 [Re:PixiJS - Day30] 完賽 / 未完賽

這次系列到這篇滿30篇,但還有幾篇會寫, 對自己來說不算完賽,這篇像是 完賽心得(上) 的概念 今年準備了兩個題目: 今年滿早就開始準備寫鐵人,準備時有兩個方...

鐵人賽 Modern Web DAY 29

技術 [Re:PixiJS - Day29] 使用 TexturePacker 製作 AnimatedSprite 與 Sprite 的大圖與 json 檔

這篇介紹 TexturePacker 工具,並使用匯出的 .json檔 與 Spritesheet圖 今日目標: 使用 Loader 讀取 .json 檔,...

鐵人賽 Modern Web DAY 28

技術 [Re:PixiJS - Day28] Loader 的其他特性

補充幾個 Loader 的特性: 1. 在讀取完成前無法使用 add() 讀取下一個檔案: [ Demo-1 ] const loader = PIXI.Lo...

鐵人賽 Modern Web DAY 27

技術 [Re:PixiJS - Day27] Loader(2/2) / 解析 JSON 檔與讀取成 PIXI.Spritesheet

PixiJS 是怎麼把 Spritesheet JSON 檔讀成 PIXI.Spritesheet 後給 PIXI.AnimatedSprite 使用的? [...

鐵人賽 Modern Web DAY 26

技術 [Re:PixiJS - Day26] Loader(1/2) / 讀取事件與解析讀取的檔案

前幾篇提到了 PixiJS 裡的 Texture 與快取,這篇要談的是 Loader PIXI.Loader 說明文件上的 Example ,還不算太複雜:...

鐵人賽 Modern Web DAY 25

技術 [Re:PixiJS - Day25] destroy(),連同快取一起摧毀物件

前幾篇提了 Texture、BaseTexture、PixiJS 的 Cache, 這篇討論 可視物件 的 destroy() 方法 在 PixiJS 的 C...

鐵人賽 Modern Web DAY 24

技術 [Re:PixiJS - Day24] 用 Texture 實作把網頁弄壞 的 Demo

標題看起來好像有點厲害,但是是要實作把 網頁弄壞的 Demo 先前提到 Texture.from(<canvas>) 會產生 TextureCach...

鐵人賽 Modern Web DAY 23

技術 [Re:PixiJS - Day23] 了解 Texture / BaseTexture

這篇介紹 Texture / BaseTexture: 好像常看到他們,可是有不是很好理解 可以想像 Texture 是 Sprite 使用的材質,那 Base...

鐵人賽 Modern Web DAY 22

技術 [Re:PixiJS - Day22] 畫漸層線段、材質問題

前幾篇提到畫漸層填色,這篇來討論使用漸層線段 畫漸層色塊時使用 canvas2d gradient API 方法,繪製漸層線段原理差不多,但有不同的實作方法:...

鐵人賽 Modern Web DAY 21

技術 [Re:PixiJS - Day21] 畫漸層填色、材質重複填滿會遇到的問題

填入漸層感覺不難, Canvas 有方法可以用: HTML Canvas Gradients CSS 也有方法可以用: CSS Gradients 但用...

鐵人賽 Modern Web DAY 20

技術 [Re:PixiJS - Day20] 用 tint() 方法填色時,原物件需為白色或灰階

實務上,通常會使用 白色或灰階 的PNG圖片、 PIXI.Text 或 PIXI.Graphics,配合 tint 的方法,填入想要的顏色 實作了 tint...

鐵人賽 Modern Web DAY 19

技術 [Re:PixiJS - Day19] PIXI.Text / SVG 不是向量的

Text 與 SVG 在 html 裡是向量,在 Canvas / WebGL 裡最後的結果是點陣。 這篇會說明 Text 與 SVG 在 PixiJS 裡的特...

鐵人賽 Modern Web DAY 18

技術 [Re:PixiJS - Day18] Graphis 類別 drawRoundedRect() 方法畫圓角矩形時會遇到的問題

Graphics 類別有畫圓角的方法:Graphics#drawRoundedRect 但畫圓角矩形的方法在 v5.2.2 前有問題, 當畫的圓角矩形寬高 小於...

鐵人賽 Modern Web DAY 17

技術 [Re:PixiJS - Day17] 中文文字 換行問題

接著來的幾篇會與畫面呈現相關: 這篇實際上是同事遇過的問題與整理,因為相當實用且會遇到,寫進系列文章裡 直接結論: TextStyle#breakWord...

鐵人賽 Modern Web DAY 16

技術 [Re:PixiJS - Day16] 在手機上實作擼來擼去的互動

PixiJS 註冊 pointerdown事件 時,無論是 PC 或手機版,收到事件的 原始事件 都是原生的 PointerEvent [ Demo ] b...