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

0 Like 0 留言 1611 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 [Re:PixiJS - Day09] Display Object 可視物件的事件監聽從哪來的？

官方範例上會越點越大的例子：Demo - INTERACTION > Click // Pointers normalize touch and mous...

angelliya00 ‧ 2020-09-09

0 Like 0 留言 1502 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 [Re:PixiJS - Day08] 互動常見問題 - 多次指定事件 / 手機版測試

系列討論來到互動，先暖身幾個 PixiJS 互動的特性：開啟互動： PixiJS 預設沒有互動行為，需要先指定 interactive = true指定了 i...

angelliya00 ‧ 2020-09-08

0 Like 0 留言 1601 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 [Re:PixiJS - Day07] 容器取得可視物件的 getChildAt()、getChildByName() 方法

在 PixiJS 裡，使用 addChild(...children) 方式將顯示物件放入 container 後並不是直接使用 container[child...

angelliya00 ‧ 2020-09-07

0 Like 1 留言 2976 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 [Re:PixiJS - Day06] 顯示物件的奇妙行為與 Clone() 方法

接續昨天的討論，先討論幾個可視物件的行為：繼承自 Container 的行為 Graphics 類別繼承自 Container，因此可以使用 addChi...

angelliya00 ‧ 2020-09-06

0 Like 0 留言 1386 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 [Re:PixiJS - Day05] 可視物件的繼承關係

用可視物件的繼承關係來理解各個可視物件與行為滿方便的研究了目前 5.3.2 版本的繼承關係，並畫了一張繼承圖： (準備這張圖片時與寫文章時有一點時間差異，版...

angelliya00 ‧ 2020-09-05

1 Like 0 留言 1237 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 [Re:PixiJS - Day04] 元件被遮罩裁切後的寬高

這篇不長，倒是挺雷的一個空容器，裡面放了一個 100x150 的色塊，並用遮罩遮成 100x100Q：這時容器高度是多少？選項1：100選項2：150選項3...

angelliya00 ‧ 2020-09-04

1 Like 0 留言 3267 瀏覽

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

鐵人賽 Modern Web DAY 2

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

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

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

angelliya00 ‧ 2020-09-02

0 Like 1 留言 1594 瀏覽

鐵人賽 Modern Web DAY 1

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

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

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

angelliya00 ‧ 2020-09-01

4 Like 4 留言 12394 瀏覽

鐵人賽 Modern Web DAY 30

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

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

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

angelliya00 ‧ 2018-01-02

2 Like 0 留言 3564 瀏覽

鐵人賽 Modern Web DAY 29

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

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

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

angelliya00 ‧ 2018-01-01

2 Like 0 留言 4357 瀏覽

鐵人賽 Modern Web DAY 28

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

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

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

angelliya00 ‧ 2017-12-31

4 Like 1 留言 6868 瀏覽

鐵人賽 Modern Web DAY 27

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

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

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

angelliya00 ‧ 2017-12-30

1 Like 0 留言 3909 瀏覽

鐵人賽 Modern Web DAY 26

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

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

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

angelliya00 ‧ 2017-12-29

3 Like 1 留言 3242 瀏覽

鐵人賽 Modern Web DAY 25

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

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

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

angelliya00 ‧ 2017-12-28

3 Like 0 留言 3531 瀏覽

鐵人賽 Modern Web DAY 24

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

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

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

angelliya00 ‧ 2017-12-27

1 Like 0 留言 4369 瀏覽

鐵人賽 Modern Web DAY 23

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

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

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

angelliya00 ‧ 2017-12-26

1 Like 0 留言 5898 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

angelliya00 ‧ 2017-12-25

2 Like 0 留言 6978 瀏覽

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

鐵人賽 Modern Web DAY 20

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

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

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

angelliya00 ‧ 2017-12-23

2 Like 0 留言 3617 瀏覽

鐵人賽 Modern Web DAY 19

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

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

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

angelliya00 ‧ 2017-12-22

2 Like 0 留言 5754 瀏覽

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

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

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

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

鐵人賽 Modern Web DAY 14

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

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

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

angelliya00 ‧ 2017-12-17

1 Like 0 留言 7552 瀏覽

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

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

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

鐵人賽 Modern Web DAY 10

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

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

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

angelliya00 ‧ 2017-12-13