iT邦幫忙

鐵人檔案

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

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

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

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

達標好文 [PixiJS - Day-01] 為何選擇 PixiJS

在寫這個主題前,我先問了自己 讓網頁上能看到畫面、動態的方式很多,為什麼會特別選擇PixiJS? 各種表現視覺與動態的做法各有其特性: 靜態圖: 沒有瀏覽器...

2017-12-04 ‧ 由 angelliya00 分享
DAY 2

[PixiJS - Day-02] 關於 PixiJS

本篇提一些 PixiJS 的官方資料 PixiJS 官網: http://www.pixijs.com/ 由 goodboy 公司開發的 2D WebGL R...

2017-12-05 ‧ 由 angelliya00 分享
DAY 3

[PixiJS - Day-03] 使用 PixiJS 製作的內容,也許並不少

本文介紹一些使用 PixiJS 製作的內容: 2020.01.13更新: 2020總統大選 得票突破800萬 動態效果 2017.12.22更新: 【 奔跑吧...

2017-12-06 ‧ 由 angelliya00 分享
DAY 4

[PixiJS - Day-04] PixiJS 的特性

本文列出一些官網上的英文說明,我會簡單翻譯並加上自己的心得 http://www.pixijs.com/#features-list Fast PixiJS...

2017-12-07 ‧ 由 angelliya00 分享
DAY 5

[PixiJS - Day-05] 我,與PixiJS

作為第一部份的最後一篇,我回到介紹自己,以及我使用 PixiJS 的情形 我的 GitHub: https://eia.github.io 除了 PixiJ...

2017-12-08 ‧ 由 angelliya00 分享
DAY 6

[PixiJS - Day-06] 起手式:View 與 Renderer

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

2017-12-09 ‧ 由 angelliya00 分享
DAY 7

[PixiJS - Day-07] stage、PIXI.Container 與父子結構

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

2017-12-10 ‧ 由 angelliya00 分享
DAY 8

[PixiJS - Day-08] PIXI.Graphics 與繪圖

PIXI.Graphics 官方文件: http://pixijs.download/dev/docs/PIXI.Graphics.html PixiJS.G...

2017-12-11 ‧ 由 angelliya00 分享
DAY 9

[PixiJS - Day-09] 遮罩

遮罩 mask 在 PixiJS 裡相當容易使用,用法是被遮的物件.mask = 遮罩; 不使用時,設定 被遮的物件.mask = null; 即可 程式碼:...

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

[PixiJS - Day-10] Ticker 與 動態製作

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

2017-12-13 ‧ 由 angelliya00 分享