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.

1. Game Development with
Phaser
Pablo Farias Navarro
https://zenva.com

6. CANVAS

7. WebGL
• Demos: babylonjs.com

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

13. Games at 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

18. Coordinates in Phaser

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