1.
5/22 PM8:00~9:00
Pixi.js網⾴遊戲開發實戰
Claire Chang

2.
https://www.facebook.com/wwcodetaipei

3.
近期活動
• 5/29 19:00-21:00 Empowering Yourself, Empowering Others
• 6/8 19:00-20:00 怎麼對付⼯程師 (注意我沒有使⽤'有效地溝通'這個詞)
• 6/18 9:00-12:00 ⾏動學習體驗⼯作坊
• 每週⽇早上的 9:00 Best Leetcode 讀書會

4.
https://www.facebook.com/wwcodetaipei

5.
近期活動
• 5/29 19:00-21:00 Empowering Yourself, Empowering Others
• 6/8 19:00-20:00 怎麼對付⼯程師 (注意我沒有使⽤'有效地溝通'這個詞)
• 6/18 9:00-12:00 ⾏動學習體驗⼯作坊
• 每週⽇早上的 9:00 Best Leetcode 讀書會

6.
AboutMe
• Claire Chang 是擁有⼗多年經驗的前端⼯程師。
• 從⼩熱愛打遊戲，夢想是進入遊戲產業，寫出有趣的程
式。因著對遊戲的好奇，從國中開始就接觸網⾴開發軟
體 Flash，⼀直到⼤學時的畢業專題也是負責前端的設
計與開發。
• 除了是⼯程師之外， Claire 同時也是兩個孩⼦的媽媽，
⾝兼⺟親、妻⼦、媳婦、⼯程師等多重⾓⾊的她，時常
忙碌於家庭與職場當中。

7.
Pixi.js介紹
• Pixi.js的⽬標為提供⼀個快速、輕量化且跨平台的2D遊戲函式庫。
• 讓開發者不需要了解如何操作WebGL便能享受WebGL的硬體加速。
• 能⾃動偵測環境是否⽀援WebGL來決定使⽤WebGL還是Canvas來建立圖像。
• 它本⾝並不是⼀個遊戲引擎，⽽是⽤來管理並創建Canvas裡的圖像物件，並藉由這個
套件來輕易做到跨平台、⾼效能的畫⾯管理及控制。
• 因此它可輕易的使⽤在互動式網⾴效果、跨平台應⽤程式或者遊戲上。
• 有另外⼀個套件叫做Phaser，則是整合了Pixi.js、⾳效、鏡頭、物理系統等的遊戲引
擎。

8.
別⼈⽤Pixi.js做了什麼

9.
DOTTODOT（室內設計公司官網）
交錯使⽤Canvas及網⾴元素，來達到良好的閱讀體驗及豐富的動態

10.
GoodBoy（pixi.js公司官網）
結合影片及網⾴元素來製作令⼈驚豔的網站體驗

11.
BrandStudio
利⽤Pixi.js打造具潮流性的Favourite Website Awards網站

12.
Resume
利⽤粒⼦系統和濾鏡，來製作瀑布，下雨，⽔波等動態效果

13.
RunPixieRun
Pixi.js非常適合⽤來製作跨平台的2D遊戲

14.
進入Pixi.js的世界

15.
重要的類別
• Pixi.js可以依據使⽤的平台，採⽤最⾼效的⽅式來載入、創建、模組化並更新圖像。
• 載入image或者Sprite sheet：Loader
• 載入後的圖像物件：Texture
• 將圖像物件元件化，讓操控動畫或者更改其屬性都變得更簡單容易。
• Sprite
• AnimatedSprite
• 並利⽤容器將多個元件包在⼀起，就是將多個圖層群組化的概念。
• Container
• 繪圖物件：Graphics

16.
使⽤⼯具來看別⼈怎麼使⽤Pixi.js

17.
選到的元件在畫⾯上會被框起來
可以在此更改物件屬性並即時預覽
可在此觀察、選取物件，並看到元件的分層結構

18.
⽤Loader載入素材，載入後素材為Texture
https://pixijs.download/dev/docs/PIXI.Loader.html
載入後可這樣取得Texture物件

19.
使⽤單張Texture建立Sprite圖像元件
https://pixijs.download/dev/docs/PIXI.Sprite.html

20.
範例練習：讓bunny除了旋轉還能移動
https://pixijs.io/examples/?v=v5.3.12#/sprite/basic.js
按下此按鈕套入新程式碼

21.
範例練習：讓bunny變⼤兩倍
提⽰：
1. ⽤console.log將bunny印出來，找找有那些屬性可以⽤！
2. 按下F12叫出開發⼈員⼯具
3. 在console查看可⽤屬性及⽅法

22.
回家練習-讓bunny淡入淡出
提⽰:
隨著時間更改透明度

23.
使⽤多張Texture建立AnimatedSprite
• 將多個圖片打包到同⼀個圖片中。我們需要使⽤第 3 ⽅⼯具來打包SpriteSheets。
可嘗試使⽤這兩個⼯具來做打包：
• ShoeBox：ShoeBox 是⼀個免費的、基於 Ado
b​​
e AIR 的精靈打包實⽤程序，非
常適合⼩型項⽬或學習 SpriteSheets 的⼯作⽅式。
• TexturePacker：TexturePacker 是⼀個更完善的付費⼯具，⽀持⾼級功能和⼯作
流程。它非常適合⼤型項⽬和專業遊戲開發。
• 打包好的範例：
• ⼀個.json檔案：https://pixijs.io/examples/examples/assets/spritesheet/
f
ighter.json
• ⼀個張圖片：https://pixijs.io/examples/examples/assets/spritesheet/
f
ighter.png

24.
使⽤多張Texture建立AnimatedSprite

25.
AnimatedSprite使⽤教學
https://pixijs.download/dev/docs/PIXI.AnimatedSprite.html

26.
AnimatedSprite練習：改⽤Spritesheet建立
https://pixijs.io/examples/?v=v5.3.12#/sprite/animatedsprite-jet.js
let sheet = app.loader.resources["examples/assets/spritesheet/
fi
ghter.json"].spritesheet;
const anim = new PIXI.AnimatedSprite(Object.values(sheet.textures));

27.
在物件上增加互動功能
• 將下⾯兩個屬性設置為true
• sprite.interactive = true;
• sprite.buttonMode = true;
• 在按下時互動
• 可使⽤的事件列表：https://pixijs.download/release/docs/PIXI.Sprite.html#click

28.
互動功能練習-按下bunny才讓⾶機轉動
https://pixijs.io/examples/?v=v5.3.12#/sprite/animatedsprite-jet.js
const app = new PIXI.Application();
document.body.appendChild(app.view);
app.loader
.add('examples/assets/spritesheet/
fi
ghter.json')
.add('examples/assets/bunny.png')
.load(onAssetsLoaded);
function onAssetsLoaded() {
let sheet = app.loader.resources["examples/assets/spritesheet/
fi
ghter.json"].spritesheet;
const anim = new PIXI.AnimatedSprite(Object.values(sheet.textures));
anim.x = app.screen.width / 2;
anim.y = app.screen.height / 2;
anim.anchor.set(0.5);
anim.animationSpeed = 0.5;
let bunny = new PIXI.Sprite(app.loader.resources["examples/assets/bunny.png"].texture)
app.stage.addChild(anim);
app.stage.addChild(bunny);
}
bunny.buttonMode = true;
bunny.interactive = true;
bunny.on('pointerdown', ()=>{anim.play()});

29.
動畫控制練習-每按⼀次bunny才讓⾶機轉⼀次
const app = new PIXI.Application();
document.body.appendChild(app.view);
app.loader
.add('examples/assets/spritesheet/
fi
ghter.json')
.add('examples/assets/bunny.png')
.load(onAssetsLoaded);
function onAssetsLoaded() {
let sheet = app.loader.resources["examples/assets/spritesheet/
fi
ghter.json"].spritesheet;
const anim = new PIXI.AnimatedSprite(Object.values(sheet.textures));
anim.x = app.screen.width / 2;
anim.y = app.screen.height / 2;
anim.anchor.set(0.5);
anim.animationSpeed = 0.5;
anim.onLoop = ()=>{anim.stop();}
let bunny = new PIXI.Sprite(app.loader.resources["examples/assets/bunny.png"].texture)
bunny.buttonMode = true;
bunny.interactive = true;
bunny.on('pointerdown', ()=>{anim.play()});
app.stage.addChild(anim);
app.stage.addChild(bunny);
}

30.
進階功能介紹-Dragonbones
• 這是⼀個骨架系統，可以使⽤簡單的幾張圖動態的算出2D⾓⾊的各種動作
• 官網：https://docs.egret.com/dragonbones/en
• Pixi.js使⽤範例：https://pixijs.io/examples/?v=v5.3.12#/plugin-dragonbones/
eyetracking.js

31.
GreenSock動畫
• 這是⼀個可以隨著時間去漸變傳入的值的函式庫
• 官網：https://greensock.com/gsap/
• Pixi.js使⽤範例：https://pixijs.io/examples/?v=v5.3.12#/gsap2-interaction/gsap2-
basic.js
• GSAP很⽅便使⽤，只要使⽤下⾯這樣⼀⾏，就可以將bunny的x屬性從原本的值在2秒
之間慢慢移動到500的位置，接著yoyo代表來回變換，repeat設-1代表無限循環。
• TweenMax.to(bunny, 2.0, { x: 500, repeat: -1, , yoyo: true});

32.
Spine動畫
• 骨架動畫是使⽤同⼀張圖片利⽤2D變形來做動態，但是有時候有些動作或者特效不是
那麼容易單純使⽤變形就讓整個動畫看起來順暢⾃然，這個時後就會需要使⽤到
Spine。
• Spine官網：http://esotericsoftware.com/
• Pixi.js使⽤範例：https://pixijs.io/examples/?v=v5.3.12#/plugin-spine/dragon.js
•

33.
Filter效果預覽
• Pixi.js裡有許多的
fi
lter可以使⽤，也製作了⼀個線上效果預覽⼯具，可以讓我們知道各
個
fi
lter可以對畫⾯有怎樣的影響。
• Filter Demo: https://
fi
lters.pixijs.download/main/demo/index.html
•

34.
教學資源
• Pixi官⽅教程中⽂版
https://github.com/Zainking/learningPixi
• API Docs
https://pixijs.download/release/docs/index.html
• 範例程式
https://pixijs.io/examples/#/demos-basic/container.js
• PixiJS Guides
https://pixijs.io/guides/basics/getting-started.html

35.
課後練習
https://pixijs.io/examples/?v=v5.3.12#/plugin-spine/dragon.js
修改此範例，讓龍可以隨著滑鼠點擊的⽅向左或右⾶⾏
mail to : cochia0318@hotmail.com