HTML5 Game Development with Phaser

Learn how to use the fun, fast, and free Phaser framework to build both desktop and mobile games using HTML5 and JavaScript.

Phaser is a cross-platform game development framework for both mobile and desktop games. This fast, fun, and free framework supports both JavaScript and TypeScript, targeting the open web via HTML5 Canvas. This course shows you how to put Phaser to work: creating a multistate game that can be played on both desktop browsers and mobile devices. After you gather your assets, author Joseph Labrecque will help you start a new game project with the Brackets code editor, create a basic preloader and menu states, and then start building game entities and layering in functionality with Phaser's sprites, groups, animations, tweens, emitters, and physics. He'll also show you how to provide feedback to the player and add sound effects for a more immersive gaming experience. When you're done, Joseph shows you how to prep the game for a mobile launch.

Introduction

• Welcome
• What you should know before watching this course
• The final product
• Using the exercise files

1. Setting Up Phaser

• Downloading the Phaser framework
• Choosing a code editor
• Image assets
• Preparing fonts
• Music and sound effects

2. Configuring Loaders and States

• Creating your Phaser project
• Bootloader setup
• Building the preloader
• Building the menu state
• Setting up the game state

3. Populating the World

• Building the world
• Generating bunnies
• Bunny movement
• Spawning enemies
• Dealing with offscreen entities

4. Functionality

• Particles and emitters
• Handling emitter collisions
• Group-versus-group collisions
• Friendly fire
• Bunny death

5. Wrapping Things Up

• Detecting game-over
• Adding countdown text
• Adding "Game Over" text
• Adding sound effects
• Preparing for mobile

Conclusion

• Conclusion