iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

PixiJS,方便好用的 WebGL 內容產生工具 系列

PixiJS 是運作在 WebGL 下的內容產生工具,如果頁面不支援 WebGL,也可自動轉換成在 Canvas 裡運作。
內建各種互動方式,可以使用一套程式碼,分別對手持裝置與PC做不同或是相同的事件監聽。
也內建了遮罩與混和模式效果,視覺與互動上可考慮與一般網頁不一樣的呈現方式。
擴充上也可再加上 WebGL 濾鏡等功能,更多的介紹與實作,就在內文裡了!

鐵人鍊成 | 共 31 篇文章 | 113 人訂閱 訂閱系列文 RSS系列文
DAY 11

[PixiJS - Day-11] PIXI.Text 與 PIXI.TextStyle

官網裡關於文字的範例有兩個: BASICS - Texthttp://pixijs.io/examples/#/basics/text.js DEMOS - T...

2017-12-14 ‧ 由 angelliya00 分享
DAY 12

[PixiJS - Day-12] PIXI.extras.AnimatedSprite

本篇介紹的是 PIXI.extras.AnimatedSprite 類別 PIXI.extras.AnimatedSprite 是個會動的 Sprite 類別...

2017-12-15 ‧ 由 angelliya00 分享
DAY 13

[PixiJS - Day-13] PIXI.loaders.Loader

回顧 PixiJS 在建立後會產生的幾個成員: loader renderer stage ticker view 本篇會提到的是 loader,也是...

2017-12-16 ‧ 由 angelliya00 分享
DAY 14

[PixiJS - Day-14] PIXI 與使用者互動

如果要說我在學習 PixiJS 裡最吃驚的事情 我想應該是 互動物件在沒有設定 interactive = true 時不會被感應 因為太習慣 HTML 裡上層...

2017-12-17 ‧ 由 angelliya00 分享
DAY 15

[PixiJS - Day-15] PIXI 的 resize

很多時候 PixiJS 需要 resize,使用方式相當簡單 window.onresize = function (event){ var w = win...

2017-12-18 ‧ 由 angelliya00 分享
DAY 16

[PixiJS - Day-16] 使用 dat.GUI 工具除錯

如之前提到的,由於 PixiJS 不是 HTML DOM 結構,無法使用開發工具調整物件 我常使用的工具是 dat.GUI,是Chrome Experiment...

2017-12-19 ‧ 由 angelliya00 分享
DAY 17

[PixiJS - Day-17] tint 上色與在 PixiJS 玩顏色

支援 tint 方法的物件,可透過設定 tint:number 的方式將顏色套在物件上(設定 tint:0xFFFFFF 會移除套色效果) 官方範例 DEMOS...

2017-12-20 ‧ 由 angelliya00 分享
DAY 18

[PixiJS - Day-18] 在 PIXI 裡使用 blendMode 混合模式

支援 blendMode 方法的物件,可透過設定 PIXI.BLEND_MODES 的方式將混合模式套在物件上(設定為 PIXI.BLEND_MODES.NOR...

2017-12-21 ‧ 由 angelliya00 分享
DAY 19

[PixiJS - Day-19] 在 PixiJS 裡材質的其他用法

先前兩篇提到 PixiJS 使用素材的方法: 使用圖片素材 AnimatedSprite 類別,將 sprite 圖片當作逐格影片來用 [PixiJS -...

2017-12-22 ‧ 由 angelliya00 分享
DAY 20

[PixiJS - Day-20] 在 PixiJS 裡使用 Filters 與 Shader

本篇會講在 PixiJS 裡使用 濾鏡 與 Shader方便理解,分做兩個部分: PixiJS 已寫好,可直接使用的濾鏡 手寫 Shader,實際上也是以濾...

2017-12-23 ‧ 由 angelliya00 分享