iT邦幫忙

鐵人檔案

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

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

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

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

[PixiJS - Day-21] 看起來像用了骨塊工具的 Strip 範例 與 Spine 範例

在範例裡有幾個範例看起來像用了骨塊工具: BASIC - Textured Mesh:http://pixijs.io/examples/#/basics/te...

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

[PixiJS - Day-22] PixiJS 粒子效果

分作兩個部分來提,一個是官網範例介紹的PIXI.particles.ParticleContainer 類別,另一個是 Pixi Particles,粒子系統...

2017-12-25 ‧ 由 angelliya00 分享
DAY 23

[PixiJS - Day-23] 將 PixiJS 的畫面匯出

本篇講的是將 PixiJS 的畫面匯出,會獨立成一篇是因為:將 PixiJS 的畫面匯出,不只是將對應的 canvas 執行 toDataURL() 的方法就好...

2017-12-26 ‧ 由 angelliya00 分享
DAY 24

[PixiJS - Day-24] 在專案上運用 PixiJS,以及各版本瀏覽器相容的作法

在專案上使用 PixiJS,大致上分做幾種情況:1. 全站 PixiJS:適用情形:使用 PixiJS 開發遊戲類型的網站前幾天上線的 【 奔跑吧!台北 】跌倒...

2017-12-27 ‧ 由 angelliya00 分享
DAY 25

[PixiJS - Day-25] 實作:基本繪圖、動態與使用 dat.GUI 測試

作為第一個介紹的實作,實作對象是這個 Gif: 出處是 FB 上的某處,這張圖的微妙在數學簡諧運動的球,在複製並平均分配到不同角度後,組成的大球也像在規律滾動...

2017-12-28 ‧ 由 angelliya00 分享
DAY 26

[PixiJS - Day-26] 實作:PixiJS 也能做功能? 之合圖上傳

PixiJS 不只用來呈現視覺動態,也適合用在一些功能本篇講的是合圖 / 紙娃娃功能 實作時想法: Step1. 先用測試的圖片實作功能:先使用固定的圖片,可以...

2017-12-29 ‧ 由 angelliya00 分享
DAY 27

[PixiJS - Day-27] 實作:第一版萬花筒

有一陣子很流行萬花筒,當時剛接觸 PixiJS,想用 PixiJS 來實作看看 實作結果: 想法裡,萬花筒是由數片內容相同的三角形組成 實作時想法: Step1...

2017-12-30 ‧ 由 angelliya00 分享
DAY 28

[PixiJS - Day-28] 實作:萬花尺

萬花尺,小時候玩過那種中間有齒輪的尺,把筆放在小齒輪洞裡順著畫會畫出漂亮形狀的玩具Wiki - 萬花尺 實作出來的結果:可直接玩玩看:http://eia.gi...

2017-12-31 ‧ 由 angelliya00 分享
DAY 29

[PixiJS - Day-29] 實作:第二版萬花筒

大家 2018 新年快樂!這次講的是第二版萬花筒網址:http://eia.github.io/pixijs/170419/ 萬花筒的部分,在第一版萬花筒有提...

2018-01-01 ‧ 由 angelliya00 分享
DAY 30

達標好文 [PixiJS - Day-30] 實作:在手機版網頁上蓋章

不只是動態呈現,PixiJS 也是我用來試做一些功能的工具。 這次介紹的實作是:在手機版網頁上蓋章 實作的方法是 多點觸控之前沒處理過多點觸控,不確定在 Pix...

2018-01-02 ‧ 由 angelliya00 分享