Phaser Tutorials

See individual README files for information on where each tutorial is from.

View generated results.

Templates

As I've worked through the various tutorials I've created two templates that I use for my own projects.

_Starter

These templates have been moved to the Phaser Starter Templates project on GitHub, and mirror on GitLab.

_Starter Simple

This project uses TypeScript with Phaser (2.6.2), and aims to be a simple version of the _Starter project, with all code in a single file.

Other variants use the free Visual Studio Code and include:

• _Starter Simple VS Code
  • Uses Visual Studio Code and Phaser 2.6.2, the last official release.
• _Starter Simple VS Code CE
  • Uses Visual Studio Code and Phaser Community Edition.

Completed tutorials

In case it provides any benefit, the following is the order in which I completed these tutorials.

These tutorials do not cover Phaser per-se, but may still be relevant to the framework in some way.

Tutorials to finish following

n/a

Future tutorials to work through

• Phaser 2.0 Tutorial: Flappy Bird
• http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-1/
• How to Make a Fruit Ninja Game in Phaser
• How to Make a Bomberman Game in Phaser
• https://github.com/timkg/phaser-super-coin-box
• https://github.com/dmaslov/super-coin-box
• https://github.com/rbudiharso/Phaser-Match3
• Perfect Square series
  • http://www.emanueleferonato.com/2016/02/23/html5-prototype-of-ios-game-perfect-square-made-with-phaser-using-only-tweens-in-100-lines-of-code/
  • http://www.emanueleferonato.com/2016/03/29/html5-prototype-of-ios-game-perfect-square-step-2-adding-levels/
  • http://www.emanueleferonato.com/2016/04/06/html5-prototype-of-ios-game-perfect-square-step-3-adding-in-game-instructions-and-scaling-the-game-for-any-resolution/
  • part 4 appears to be in progress
• Level selection series
  • http://www.emanueleferonato.com/2014/11/21/html5-phaser-tutorial-how-to-create-a-level-selection-screen-with-locked-levels-and-stars/
  • http://www.emanueleferonato.com/2014/12/05/html5-phaser-tutorial-how-to-create-a-level-selection-screen-with-locked-levels-and-stars-finished-prototype/
  • http://www.emanueleferonato.com/2015/01/21/create-an-html5-level-selection-screen-using-a-scrollable-map-like-in-hero-emblems-game-using-phaser/
  • http://www.emanueleferonato.com/2016/01/20/phaser-tutorial-creation-of-a-html5-character-selection-screen-like-the-one-in-crossy-road-ios-smash-hit/
  • http://www.emanueleferonato.com/2016/01/25/create-a-html5-level-select-screen-controlled-by-swipe-without-actually-checking-for-swipes/
  • http://www.emanueleferonato.com/2016/02/04/create-a-html5-level-select-screen-controlled-by-swipe-new-feature-actually-selecting-a-level/
  • http://www.emanueleferonato.com/2016/04/08/create-a-html5-level-select-screen-controlled-by-swipe-new-feature-navigation-with-page-thumbnails/
  • http://www.emanueleferonato.com/2016/04/19/create-a-html5-level-select-screen-controlled-by-swipe-new-features-adding-stars-and-saving-progress-on-local-storage/
  • http://www.emanueleferonato.com/2016/04/26/create-a-html5-level-select-screen-controlled-by-swipe-new-features-bug-fixes-and-animation-when-selecting-locked-levels/
• Pop the lock series
  • http://www.emanueleferonato.com/2016/03/18/html5-prototype-of-pop-the-lock-ios-blockbuster-using-phaser/
  • http://www.emanueleferonato.com/2016/03/22/html5-prototype-of-pop-the-lock-ios-blockbuster-using-phaser-step-2/
  • part 3 appears to be in progress
• Crazy Clocks series
  • http://www.emanueleferonato.com/2015/12/29/create-a-html5-game-like-ios-hit-clocks-the-game-using-phaser-and-arcade-physics/
  • http://www.emanueleferonato.com/2016/01/04/clocks-the-game-html5-prototype-step-2-how-to-select-starting-clock/
  • http://www.emanueleferonato.com/2016/01/07/clocks-the-game-html5-prototype-step-3-actually-playing-the-game/
• Dungeon Raid series
  • http://www.emanueleferonato.com/2016/05/13/html5-dungeon-raid-tile-engine-made-with-phaser/
  • http://www.emanueleferonato.com/2016/05/19/html5-dungeon-raid-tile-engine-made-with-phaser-part-2/
  • http://www.emanueleferonato.com/2016/06/09/html5-dungeon-raid-tile-engine-made-with-phaser-part-3/
• More Bejeweled/Match-3 cloning
  • http://www.emanueleferonato.com/2016/05/17/match-3-bejeweled-html5-prototype-made-with-phaser/
  • http://www.emanueleferonato.com/2016/06/17/match-3-bejeweled-html5-prototype-made-with-phaser-suggesting-moves/
  • http://www.emanueleferonato.com/2016/07/05/match-3-bejeweled-html5-prototype-made-with-phaser-detecting-combos/
• http://www.emanueleferonato.com/2016/01/18/how-to-create-a-html-draggable-and-scrollable-map-with-inertia-using-phaser-framework/
• http://www.emanueleferonato.com/2016/06/28/html5-drag-and-match-engine-made-with-phaser-updated-to-phaser-2-5-0/
• Official tutorials
  • In particular http://phaser.io/tutorials/coding-tips-007

Tutorial creators worth following

The following sites are worth following if you're interested in Phaser tutorials.

• Emanuele Feronato posts tutorials on a regular basis, and sells a couple complete tutorials.
• GameDev Academy has a mix of posts, including in Phaser. This is done by the folks behind Zenva, which has a pretty good online series for sale that covers creating a variety of games in Phaser.