iT邦幫忙

pixijs相關文章
共有 30 則文章
鐵人賽 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...

鐵人賽 Modern Web DAY 15

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

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

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 13

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

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

鐵人賽 Modern Web DAY 12

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

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

鐵人賽 Modern Web DAY 11

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

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

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

技術 [PixiJS - Day-09] 遮罩

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

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

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

鐵人賽 Modern Web DAY 6

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

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

鐵人賽 Modern Web DAY 5

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

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

鐵人賽 Modern Web DAY 4

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

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

鐵人賽 Modern Web DAY 3

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

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

鐵人賽 Modern Web DAY 2

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

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

鐵人賽 Modern Web DAY 1

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

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