Pixi.js網頁遊戲開發實戰
- 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 讀書會
- 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 同時也是兩個孩⼦的媽媽，
⾝兼⺟親、妻⼦、媳婦、⼯程師等多重⾓⾊的她，時常
忙碌於家庭與職場當中。
- 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
- 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);
}
