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

3 Like 3 留言 4278 瀏覽

鐵人賽 Modern Web DAY 30

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

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

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

angelliya00 ‧ 2018-01-02

1 Like 0 留言 1277 瀏覽

鐵人賽 Modern Web DAY 29

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

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

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

angelliya00 ‧ 2018-01-01

1 Like 0 留言 1806 瀏覽

鐵人賽 Modern Web DAY 28

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

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

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

angelliya00 ‧ 2017-12-31

3 Like 1 留言 3430 瀏覽

鐵人賽 Modern Web DAY 27

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

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

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

angelliya00 ‧ 2017-12-30

0 Like 0 留言 1257 瀏覽

鐵人賽 Modern Web DAY 26

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

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

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

angelliya00 ‧ 2017-12-29

2 Like 1 留言 1433 瀏覽

鐵人賽 Modern Web DAY 25

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

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

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

angelliya00 ‧ 2017-12-28

2 Like 0 留言 1433 瀏覽

鐵人賽 Modern Web DAY 24

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

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

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

angelliya00 ‧ 2017-12-27

0 Like 0 留言 1633 瀏覽

鐵人賽 Modern Web DAY 23

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

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

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

angelliya00 ‧ 2017-12-26

0 Like 0 留言 1899 瀏覽

鐵人賽 Modern Web DAY 22

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

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

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

angelliya00 ‧ 2017-12-25

1 Like 0 留言 1847 瀏覽

鐵人賽 Modern Web DAY 21

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

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

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

angelliya00 ‧ 2017-12-24

1 Like 0 留言 1717 瀏覽

鐵人賽 Modern Web DAY 20

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

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

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

angelliya00 ‧ 2017-12-23

1 Like 0 留言 1088 瀏覽

鐵人賽 Modern Web DAY 19

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

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

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

angelliya00 ‧ 2017-12-22

1 Like 0 留言 1900 瀏覽

鐵人賽 Modern Web DAY 18

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

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

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

angelliya00 ‧ 2017-12-21

1 Like 1 留言 1794 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

angelliya00 ‧ 2017-12-20

0 Like 0 留言 2060 瀏覽

鐵人賽 Modern Web DAY 16

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

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

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

angelliya00 ‧ 2017-12-19

0 Like 0 留言 2128 瀏覽

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

0 Like 0 留言 2593 瀏覽

鐵人賽 Modern Web DAY 14

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

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

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

angelliya00 ‧ 2017-12-17

0 Like 0 留言 2888 瀏覽

鐵人賽 Modern Web DAY 13

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

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

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

angelliya00 ‧ 2017-12-16

2 Like 0 留言 3256 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

angelliya00 ‧ 2017-12-15

1 Like 0 留言 2473 瀏覽

鐵人賽 Modern Web DAY 11

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

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

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

angelliya00 ‧ 2017-12-14

2 Like 0 留言 3578 瀏覽

鐵人賽 Modern Web DAY 10

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

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

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

angelliya00 ‧ 2017-12-13

0 Like 0 留言 2699 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 [PixiJS - Day-09] 遮罩

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

angelliya00 ‧ 2017-12-12

1 Like 0 留言 3301 瀏覽

鐵人賽 Modern Web DAY 8

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

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

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

angelliya00 ‧ 2017-12-11

0 Like 0 留言 3368 瀏覽

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

2 Like 3 留言 3652 瀏覽

鐵人賽 Modern Web DAY 6

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

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

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

angelliya00 ‧ 2017-12-09

1 Like 1 留言 2166 瀏覽

鐵人賽 Modern Web DAY 5

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

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

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

angelliya00 ‧ 2017-12-08

1 Like 1 留言 2745 瀏覽

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

鐵人賽 Modern Web DAY 3

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

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

本文介紹一些使用 PixiJS 製作的網站： 2017.12.22更新: 【奔跑吧！台北】跌倒以後，爬起來再繼續跑就好！ https://game.glor...

angelliya00 ‧ 2017-12-06

1 Like 0 留言 3126 瀏覽

鐵人賽 Modern Web DAY 2

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

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

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

angelliya00 ‧ 2017-12-05

3 Like 1 留言 5002 瀏覽

鐵人賽 Modern Web DAY 1

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

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

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

angelliya00 ‧ 2017-12-04