iT邦幫忙

pixijs相關文章
共有 75 則文章
鐵人賽 Modern Web DAY 15

技術 [Re:PixiJS - Day15] pointermove 事件與不同手機間的差異

本篇討論 pointermove 事件 觸發事件與不同手機的差異 pointermove 事件: PC: 綁定在物件的 pointermove 事件,是只要...

鐵人賽 Modern Web DAY 14

技術 [Re:PixiJS - Day14] hitArea 屬性

實測後的 hitArea 幾個特性: 1: hitArea 不影響物件本身的寬高 2: 設定 hitArea 時,感應區以 hitArea 設定為主,物件本身的...

鐵人賽 Modern Web DAY 13

技術 [Re:PixiJS - Day13] 感應(三) interactive 與 interactiveChildren 屬性

在看互動相關的屬性時,除了 interactive 外還有一個類似的 interactiveChildren Demo 與實作後,覺得可把 interacti...

鐵人賽 Modern Web DAY 12

技術 [Re:PixiJS - Day12] 感應(二) alpha0 與 beginFill(color, 0) 時是否可以感應?

因為滿雷的,獨立成一篇 上一篇提到,alpha 設定為 0 時,仍可以感應的到 那如果是使用 beginFill(color, alpha) 畫的 graphi...

鐵人賽 Modern Web DAY 11

技術 [Re:PixiJS - Day11] 感應(一) 元件在 alpha:0、visible:false、rendable:false 時的互動行為

本篇會來討論 是否看得到 與 是否可互動 的關係 做了一個 Demo,右上角的 GUI 裡表示了整個方塊幾個屬性的開關 visible renderable...

鐵人賽 Modern Web DAY 10

技術 [Re:PixiJS - Day10] 番外篇:成為 PixiJS 的貢獻者

這次寫系列文章時,查了很多 PixiJS 的說明文件與原始檔 因此發現了一些說明文件上的問題,也發了幾次 PR 與發 Issue 參加討論 第一次勘誤與發 P...

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

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

這篇不長,倒是挺雷的 一個空容器,裡面放了一個 100x150 的色塊,並用遮罩遮成 100x100 Q:這時容器高度是多少? 選項1:100 選項2:150...

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 2

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

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

鐵人賽 Modern Web DAY 1

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

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

鐵人賽 Modern Web DAY 30

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

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

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

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

鐵人賽 Modern Web DAY 27

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 21

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

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

鐵人賽 Modern Web DAY 20

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

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

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 18

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

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

鐵人賽 Modern Web DAY 17

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

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

鐵人賽 Modern Web DAY 16

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

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