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

1 Like 0 留言 3056 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 [Re:PixiJS - Day03] 可視物件的深度 - childIndex / zIndex

先前的系列文提過，可透過 addChild(child) 將可視物件加到容器，並存放在 children 陣列裡 [PixiJS - Day-07] stag...

angelliya00 ‧ 2020-09-03

2 Like 0 留言 1435 瀏覽

鐵人賽 Modern Web DAY 2

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

技術 [Re:PixiJS - Day02] PixiJS 物件的排列、寬高特性

寫在第二天的是覺得很容易踩到的麻煩點：排列與寬高為了重現麻煩點，設定了一個情境：創造三個容器，裡頭各放了一個 100x100 的色塊。並讓三個容器水平緊...

angelliya00 ‧ 2020-09-02

0 Like 1 留言 1501 瀏覽

鐵人賽 Modern Web DAY 1

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

技術 [Re:PixiJS - Day01] 再談 PixiJS

先前在 iT 邦幫忙鐵人賽寫 PixiJS 是2017年年底的事由於是再談 PixiJS，這次的系列文是基於 2018 iT 邦幫忙鐵人賽PixiJS，方便...

angelliya00 ‧ 2020-09-01

4 Like 4 留言 11551 瀏覽

鐵人賽 Modern Web DAY 30

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

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

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

angelliya00 ‧ 2018-01-02

2 Like 0 留言 3163 瀏覽

鐵人賽 Modern Web DAY 29

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

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

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

angelliya00 ‧ 2018-01-01

2 Like 0 留言 3872 瀏覽

鐵人賽 Modern Web DAY 28

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

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

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

angelliya00 ‧ 2017-12-31

4 Like 1 留言 6298 瀏覽

鐵人賽 Modern Web DAY 27

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

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

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

angelliya00 ‧ 2017-12-30

1 Like 0 留言 3426 瀏覽

鐵人賽 Modern Web DAY 26

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

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

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

angelliya00 ‧ 2017-12-29

3 Like 1 留言 3054 瀏覽

鐵人賽 Modern Web DAY 25

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

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

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

angelliya00 ‧ 2017-12-28

3 Like 0 留言 3168 瀏覽

鐵人賽 Modern Web DAY 24

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

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

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

angelliya00 ‧ 2017-12-27

1 Like 0 留言 4041 瀏覽

鐵人賽 Modern Web DAY 23

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

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

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

angelliya00 ‧ 2017-12-26

1 Like 0 留言 5205 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

angelliya00 ‧ 2017-12-25

2 Like 0 留言 6085 瀏覽

鐵人賽 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 0 留言 4974 瀏覽

鐵人賽 Modern Web DAY 20

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

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

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

angelliya00 ‧ 2017-12-23

2 Like 0 留言 3123 瀏覽

鐵人賽 Modern Web DAY 19

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

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

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

angelliya00 ‧ 2017-12-22

2 Like 0 留言 5129 瀏覽

鐵人賽 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 1 留言 5304 瀏覽

鐵人賽 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 留言 8477 瀏覽

鐵人賽 Modern Web DAY 16

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

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

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

angelliya00 ‧ 2017-12-19

2 Like 0 留言 5810 瀏覽

鐵人賽 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

1 Like 0 留言 7139 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

angelliya00 ‧ 2017-12-17

1 Like 0 留言 7321 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

angelliya00 ‧ 2017-12-16

3 Like 0 留言 8469 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

angelliya00 ‧ 2017-12-15

2 Like 0 留言 6092 瀏覽

鐵人賽 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

3 Like 0 留言 9487 瀏覽

鐵人賽 Modern Web DAY 10

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

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

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

angelliya00 ‧ 2017-12-13

1 Like 0 留言 8511 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 [PixiJS - Day-09] 遮罩

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

angelliya00 ‧ 2017-12-12

2 Like 0 留言 9049 瀏覽

鐵人賽 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

2 Like 0 留言 9385 瀏覽

鐵人賽 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 留言 9374 瀏覽

鐵人賽 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 1 留言 4733 瀏覽

鐵人賽 Modern Web DAY 5

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

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

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

angelliya00 ‧ 2017-12-08

2 Like 1 留言 5924 瀏覽

鐵人賽 Modern Web DAY 4

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

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

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

angelliya00 ‧ 2017-12-07