Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Pixi.js網頁遊戲開發實戰

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
Git版本管理控管實戰
Git版本管理控管實戰
Wird geladen in …3
×

Hier ansehen

1 von 35 Anzeige
Anzeige

Weitere Verwandte Inhalte

Aktuellste (20)

Anzeige

Pixi.js網頁遊戲開發實戰

  1. 1. 5/22 PM8:00~9:00 Pixi.js網⾴遊戲開發實戰 Claire Chang
  2. 2. https://www.facebook.com/wwcodetaipei
  3. 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. 4. https://www.facebook.com/wwcodetaipei
  5. 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. 6. AboutMe • Claire Chang 是擁有⼗多年經驗的前端⼯程師。 • 從⼩熱愛打遊戲,夢想是進入遊戲產業,寫出有趣的程 式。因著對遊戲的好奇,從國中開始就接觸網⾴開發軟 體 Flash,⼀直到⼤學時的畢業專題也是負責前端的設 計與開發。 • 除了是⼯程師之外, Claire 同時也是兩個孩⼦的媽媽, ⾝兼⺟親、妻⼦、媳婦、⼯程師等多重⾓⾊的她,時常 忙碌於家庭與職場當中。
  7. 7. Pixi.js介紹 • Pixi.js的⽬標為提供⼀個快速、輕量化且跨平台的2D遊戲函式庫。 • 讓開發者不需要了解如何操作WebGL便能享受WebGL的硬體加速。 • 能⾃動偵測環境是否⽀援WebGL來決定使⽤WebGL還是Canvas來建立圖像。 • 它本⾝並不是⼀個遊戲引擎,⽽是⽤來管理並創建Canvas裡的圖像物件,並藉由這個 套件來輕易做到跨平台、⾼效能的畫⾯管理及控制。 • 因此它可輕易的使⽤在互動式網⾴效果、跨平台應⽤程式或者遊戲上。 • 有另外⼀個套件叫做Phaser,則是整合了Pixi.js、⾳效、鏡頭、物理系統等的遊戲引 擎。
  8. 8. 別⼈⽤Pixi.js做了什麼
  9. 9. DOTTODOT(室內設計公司官網) 交錯使⽤Canvas及網⾴元素,來達到良好的閱讀體驗及豐富的動態
  10. 10. GoodBoy(pixi.js公司官網) 結合影片及網⾴元素來製作令⼈驚豔的網站體驗
  11. 11. BrandStudio 利⽤Pixi.js打造具潮流性的Favourite Website Awards網站
  12. 12. Resume 利⽤粒⼦系統和濾鏡,來製作瀑布,下雨,⽔波等動態效果
  13. 13. RunPixieRun Pixi.js非常適合⽤來製作跨平台的2D遊戲
  14. 14. 進入Pixi.js的世界
  15. 15. 重要的類別 • Pixi.js可以依據使⽤的平台,採⽤最⾼效的⽅式來載入、創建、模組化並更新圖像。 • 載入image或者Sprite sheet:Loader • 載入後的圖像物件:Texture • 將圖像物件元件化,讓操控動畫或者更改其屬性都變得更簡單容易。 • Sprite • AnimatedSprite • 並利⽤容器將多個元件包在⼀起,就是將多個圖層群組化的概念。 • Container • 繪圖物件:Graphics
  16. 16. 使⽤⼯具來看別⼈怎麼使⽤Pixi.js
  17. 17. 選到的元件在畫⾯上會被框起來 可以在此更改物件屬性並即時預覽 可在此觀察、選取物件,並看到元件的分層結構
  18. 18. ⽤Loader載入素材,載入後素材為Texture https://pixijs.download/dev/docs/PIXI.Loader.html 載入後可這樣取得Texture物件
  19. 19. 使⽤單張Texture建立Sprite圖像元件 https://pixijs.download/dev/docs/PIXI.Sprite.html
  20. 20. 範例練習:讓bunny除了旋轉還能移動 https://pixijs.io/examples/?v=v5.3.12#/sprite/basic.js 按下此按鈕套入新程式碼
  21. 21. 範例練習:讓bunny變⼤兩倍 提⽰: 1. ⽤console.log將bunny印出來,找找有那些屬性可以⽤! 2. 按下F12叫出開發⼈員⼯具 3. 在console查看可⽤屬性及⽅法
  22. 22. 回家練習-讓bunny淡入淡出 提⽰: 隨著時間更改透明度
  23. 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. 24. 使⽤多張Texture建立AnimatedSprite
  25. 25. AnimatedSprite使⽤教學 https://pixijs.download/dev/docs/PIXI.AnimatedSprite.html
  26. 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. 27. 在物件上增加互動功能 • 將下⾯兩個屬性設置為true • sprite.interactive = true; • sprite.buttonMode = true; • 在按下時互動 • 可使⽤的事件列表:https://pixijs.download/release/docs/PIXI.Sprite.html#click
  28. 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. 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. 30. 進階功能介紹-Dragonbones • 這是⼀個骨架系統,可以使⽤簡單的幾張圖動態的算出2D⾓⾊的各種動作 • 官網:https://docs.egret.com/dragonbones/en • Pixi.js使⽤範例:https://pixijs.io/examples/?v=v5.3.12#/plugin-dragonbones/ eyetracking.js
  31. 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. 32. Spine動畫 • 骨架動畫是使⽤同⼀張圖片利⽤2D變形來做動態,但是有時候有些動作或者特效不是 那麼容易單純使⽤變形就讓整個動畫看起來順暢⾃然,這個時後就會需要使⽤到 Spine。 • Spine官網:http://esotericsoftware.com/ • Pixi.js使⽤範例:https://pixijs.io/examples/?v=v5.3.12#/plugin-spine/dragon.js •
  33. 33. Filter效果預覽 • Pixi.js裡有許多的 fi lter可以使⽤,也製作了⼀個線上效果預覽⼯具,可以讓我們知道各 個 fi lter可以對畫⾯有怎樣的影響。 • Filter Demo: https:// fi lters.pixijs.download/main/demo/index.html •
  34. 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. 35. 課後練習 https://pixijs.io/examples/?v=v5.3.12#/plugin-spine/dragon.js 修改此範例,讓龍可以隨著滑鼠點擊的⽅向左或右⾶⾏ mail to : cochia0318@hotmail.com

×