Teacher Training Workshop - Game Development with Phaser
Download as PPTX, PDF1 like389 views
This document provides an overview of using Phaser for HTML5 game development. It discusses key technologies like Canvas and WebGL for rendering, and audio APIs. Phaser offers advantages like cross-platform support and a large community. The document demonstrates basic Phaser concepts like sprites, input handling, and coordinates. It provides challenges to create simple games using these concepts and touches on deployment options like hosting and creating mobile apps with Cordova.
Teacher Training Workshop - Game Development with Phaser
- 1. Game Development with Phaser Pablo Farias Navarro https://zenva.com
- 6. CANVAS
- 8. Audio
- 9. Web Audio API • Example: http://mdn.github.io/violent-theremin/
- 10. Other Game-Enabling Technologies • Local storage • AJAX to interact with servers • Geolocation • Camera API • Gamepad API (experimental)
- 11. Advantages of HTML5 Game Development • Open standards (future-proof) • Transferable skills with web development • Cross-platform
- 12. • Phaser.io
- 15. Advantages of Phaser • Save time - don’t reinvent the wheel • Rendering over Canvas or WebGL • Cross-plaform support (input, screen scaling) • Huge community and tutorials
- 16. Requirements • Phaser library: https://phaser.io/download/release/2.6.2 • Code editor • Local web server
- 17. Live coding
- 20. Anchor point • By default: top-left corner Applications: • Positioning • Scaling • Rotating
- 21. Before your first game.. • Showing text • Modifying text • Sprites reacting to user click / touch
- 22. Challenge! • Game #1 • After that, go to: https://demoschool.zenva.com (Using Google Chrome)
- 24. Challenge 1 - Steps • Copy and paste the entire folder “Game 1”, rename it to “Challenge 1” • Leave only the background, 1 octopus sprite, and the text • Position the text on the top area, show the text “Select which one is VERDE” • Load two more sprites: octopus-green.png and jellyfish.png • Rename “rotateSprite” to “wrongAnswer”, make it to that it rotates the sprite in 180 degrees • Create a new method similar to “wrongAnswer”, called “rightAnswer”, where the sprite is scaled 2x
- 25. Second Game • Update • Checking conditions • Input anywhere on the screen • Home screen • Collision (without physics)
- 26. Challenge! • Game #2 Add goal treasure chest at the end, restart the game when you reach it. • After that, go to: https://demoschool.zenva.com (Using Google Chrome)
- 27. Third Game • Spritesheet animations • Physics • Collision • Groups • Platformer movement • Jumping • Play sound • Overlapping
- 28. Challenge! • Game #3 If the player reaches the floor (y > 360), restart State Load coin sound and image Create a group for coins When the player overlaps a coin, call a method called “collect” In “collect”, play coin sound, and destroy the coin: (kill() method) • After that, go to: https://demoschool.zenva.com (Using Google Chrome)
- 29. Deployment 1. Host online 2. Cordova / Phonegap 3. Executable files (EXE)
- 30. Free options for hosting • Github Pages: https://pages.github.com/ • BitBalloon.com • Google Drive and Dropbox NO LONGER WORK for html hosting • Ideal: school FTP
- 31. Cordova
- 33. Phaser links • Homepage: http://phaser.io • Doc: http://docs.phaser.io • Examples: https://examples.phaser.io • Our course: https://academy.zenva.com/product/the-complete-mobile-game- development-course-platinum-edition/ • Our free ebook: https://gamedevacademy.org/free-ebook-game-development-for- human-beings/
- 34. Zenva Academy coupon code • Coupon code: phaser-workshop • 15% discount store-wide