iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

30天Pixi帶你飛上天 系列

Pixi.js 轉圈跑跳碰,從零開始!

DAY 11

Day11 Resize

本篇就來寫一下Resize,基本上就是用下面這一段,canvas視窗就會跟視窗一樣大了 window.onresize = function (event) {...

2018-10-26 ‧ 由 挖洗菜呱 分享
DAY 12

Day12 PIXI.Graphics

PIXI.Graphics是個像SVG的東西,利用點的方式繪製多角形或是圓形 使用前先定義 var graphics = new PIXI.Graphics(...

2018-10-27 ‧ 由 挖洗菜呱 分享
DAY 13

Day13 Mask

這次的範例是這個,接下來會做一個進度條,這篇先來做Mask~ 背景素材: 先將圖片載入並放在正中央 let bg = PIXI.Sprite.fromIma...

2018-10-28 ‧ 由 挖洗菜呱 分享
DAY 14

Day 14 loader狀態監聽

(因為範例的loading載的超快,我來不及截圖,只好先截再重新整理了囧~) 當我們畫面需要載入非常多圖片,載入時間可能會相當長的時候,我們會希望有一個進度條可...

2018-10-29 ‧ 由 挖洗菜呱 分享
DAY 15

Day15 進度條

續上篇 Day14,本篇素材使用Day5和Day13 Mask 進度條可以直接取用loader.progress的參數進行計算,進度條沿用之前的mask篇,讓...

2018-10-30 ‧ 由 挖洗菜呱 分享
DAY 16

Day16 濾鏡BlurFilter

PIXI提供一些濾鏡的使用,不過看起來是一般的靜態圖片才有作用,TilingSprite和spriteSheet都沒有作用 filter是陣列,將blurFil...

2018-10-31 ‧ 由 挖洗菜呱 分享
DAY 17

Day17 pixi-filters plugin

在測試官網範例outline的時候發現怎樣都弄不出來,查了一下才發現他是plugin要另外載入 不然他會報錯 PIXI.filters.OutlineFilte...

2018-11-01 ‧ 由 挖洗菜呱 分享
DAY 18

Day18 超好用工具dat.GUI

寫畫面效果的時候常常會需要調整參數,看是不是想要的效果,每次都要儲存一次檔案再reload真的是非常麻煩 dat.GUI提供直接在畫面上用介面修改參數的功能,...

2018-11-02 ‧ 由 挖洗菜呱 分享
DAY 19

Day19 用pixi-display做light

這篇會用到pixi-display.js的plugin 請到 這裡下載 會特別講這篇是因為spotlight的效果感覺滿有機會用到的,也有一些迷宮遊戲要遮罩你的...

2018-11-03 ‧ 由 挖洗菜呱 分享
DAY 20

Day20 z-order

本篇說明的是官方範例 仍然要用 這個範例我看到快放棄...還好還是勉強懂了 燈愣,不過本篇講的時候會簡化很多~~~ 數量剩下這樣 z-order用來像是CSS...

2018-11-04 ‧ 由 挖洗菜呱 分享