iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

4 Like 4 留言 11541 瀏覽

鐵人賽 Modern Web DAY 30

PixiJS，方便好用的 WebGL 內容產生工具系列第 30 篇

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

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

angelliya00 ‧ 2018-01-02

4 Like 1 留言 10620 瀏覽

鐵人賽 Modern Web DAY 1

PixiJS，方便好用的 WebGL 內容產生工具系列第 1 篇

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

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

angelliya00 ‧ 2017-12-04

3 Like 0 留言 9485 瀏覽

鐵人賽 Modern Web DAY 10

PixiJS，方便好用的 WebGL 內容產生工具系列第 10 篇

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

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

angelliya00 ‧ 2017-12-13

2 Like 0 留言 9379 瀏覽

鐵人賽 Modern Web DAY 7

PixiJS，方便好用的 WebGL 內容產生工具系列第 7 篇

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

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

angelliya00 ‧ 2017-12-10

3 Like 3 留言 9368 瀏覽

鐵人賽 Modern Web DAY 6

PixiJS，方便好用的 WebGL 內容產生工具系列第 6 篇

技術 [PixiJS - Day-06] 起手式：View 與 Renderer

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

angelliya00 ‧ 2017-12-09

2 Like 0 留言 9042 瀏覽

鐵人賽 Modern Web DAY 8

PixiJS，方便好用的 WebGL 內容產生工具系列第 8 篇

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

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

angelliya00 ‧ 2017-12-11

1 Like 0 留言 8508 瀏覽

鐵人賽 Modern Web DAY 9

PixiJS，方便好用的 WebGL 內容產生工具系列第 9 篇

技術 [PixiJS - Day-09] 遮罩

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

angelliya00 ‧ 2017-12-12

1 Like 0 留言 8466 瀏覽

鐵人賽 Modern Web DAY 16

PixiJS，方便好用的 WebGL 內容產生工具系列第 16 篇

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

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

angelliya00 ‧ 2017-12-19

3 Like 0 留言 8464 瀏覽

鐵人賽 Modern Web DAY 12

PixiJS，方便好用的 WebGL 內容產生工具系列第 12 篇

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

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

angelliya00 ‧ 2017-12-15

3 Like 2 留言 7489 瀏覽

鐵人賽 Modern Web DAY 3

PixiJS，方便好用的 WebGL 內容產生工具系列第 3 篇

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

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

angelliya00 ‧ 2017-12-06

1 Like 0 留言 7318 瀏覽

鐵人賽 Modern Web DAY 13

PixiJS，方便好用的 WebGL 內容產生工具系列第 13 篇

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

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

angelliya00 ‧ 2017-12-16

1 Like 0 留言 7138 瀏覽

鐵人賽 Modern Web DAY 14

PixiJS，方便好用的 WebGL 內容產生工具系列第 14 篇

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

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

angelliya00 ‧ 2017-12-17

2 Like 0 留言 6306 瀏覽

鐵人賽 Modern Web DAY 2

PixiJS，方便好用的 WebGL 內容產生工具系列第 2 篇

技術 [PixiJS - Day-02] 關於 PixiJS

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

angelliya00 ‧ 2017-12-05

4 Like 1 留言 6294 瀏覽

鐵人賽 Modern Web DAY 27

PixiJS，方便好用的 WebGL 內容產生工具系列第 27 篇

技術 [PixiJS - Day-27] 實作：第一版萬花筒

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

angelliya00 ‧ 2017-12-30

2 Like 0 留言 6082 瀏覽

鐵人賽 Modern Web DAY 11

PixiJS，方便好用的 WebGL 內容產生工具系列第 11 篇

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

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

angelliya00 ‧ 2017-12-14

2 Like 0 留言 6082 瀏覽

鐵人賽 Modern Web DAY 21

PixiJS，方便好用的 WebGL 內容產生工具系列第 21 篇

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

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

angelliya00 ‧ 2017-12-24

2 Like 1 留言 5920 瀏覽

鐵人賽 Modern Web DAY 4

PixiJS，方便好用的 WebGL 內容產生工具系列第 4 篇

技術 [PixiJS - Day-04] PixiJS 的特性

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

angelliya00 ‧ 2017-12-07

2 Like 0 留言 5807 瀏覽

鐵人賽 Modern Web DAY 15

PixiJS，方便好用的 WebGL 內容產生工具系列第 15 篇

技術 [PixiJS - Day-15] PIXI 的 resize

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

angelliya00 ‧ 2017-12-18

2 Like 1 留言 5298 瀏覽

鐵人賽 Modern Web DAY 17

PixiJS，方便好用的 WebGL 內容產生工具系列第 17 篇

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

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

angelliya00 ‧ 2017-12-20

1 Like 0 留言 5196 瀏覽

鐵人賽 Modern Web DAY 22

PixiJS，方便好用的 WebGL 內容產生工具系列第 22 篇

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

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

angelliya00 ‧ 2017-12-25

2 Like 0 留言 5128 瀏覽

鐵人賽 Modern Web DAY 18

PixiJS，方便好用的 WebGL 內容產生工具系列第 18 篇

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

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

angelliya00 ‧ 2017-12-21

2 Like 0 留言 4971 瀏覽

鐵人賽 Modern Web DAY 20

PixiJS，方便好用的 WebGL 內容產生工具系列第 20 篇

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

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

angelliya00 ‧ 2017-12-23

2 Like 1 留言 4727 瀏覽

鐵人賽 Modern Web DAY 5

PixiJS，方便好用的 WebGL 內容產生工具系列第 5 篇

技術 [PixiJS - Day-05] 我，與PixiJS

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

angelliya00 ‧ 2017-12-08

0 Like 0 留言 4567 瀏覽

鐵人賽 Modern Web DAY 29

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

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

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

angelliya00 ‧ 2020-09-29

1 Like 0 留言 4038 瀏覽

鐵人賽 Modern Web DAY 23

PixiJS，方便好用的 WebGL 內容產生工具系列第 23 篇

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

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

angelliya00 ‧ 2017-12-26

2 Like 0 留言 3868 瀏覽

鐵人賽 Modern Web DAY 28

PixiJS，方便好用的 WebGL 內容產生工具系列第 28 篇

技術 [PixiJS - Day-28] 實作：萬花尺

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

angelliya00 ‧ 2017-12-31

1 Like 0 留言 3415 瀏覽

鐵人賽 Modern Web DAY 26

PixiJS，方便好用的 WebGL 內容產生工具系列第 26 篇

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

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

angelliya00 ‧ 2017-12-29

2 Like 0 留言 3159 瀏覽

鐵人賽 Modern Web DAY 29

PixiJS，方便好用的 WebGL 內容產生工具系列第 29 篇

技術 [PixiJS - Day-29] 實作：第二版萬花筒

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

angelliya00 ‧ 2018-01-01

3 Like 0 留言 3156 瀏覽

鐵人賽 Modern Web DAY 24

PixiJS，方便好用的 WebGL 內容產生工具系列第 24 篇

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

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

angelliya00 ‧ 2017-12-27

2 Like 0 留言 3118 瀏覽

鐵人賽 Modern Web DAY 19

PixiJS，方便好用的 WebGL 內容產生工具系列第 19 篇

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

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

angelliya00 ‧ 2017-12-22

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

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

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