See individual README files for information on where each tutorial is from.
As I've worked through the various tutorials I've created two templates that I use for my own projects.
These templates have been moved to the Phaser Starter Templates project on GitHub, and mirror on GitLab.
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.
In case it provides any benefit, the following is the order in which I completed these tutorials.
| Tutorial | Completed Date |
|---|---|
| Phaser-Clicker-Tutorial | September 2015 |
| Ascii-Roguelike-Tutorial | September/October 2015 |
| Official-Making-A-Game | October 2015 |
| Coding-Tip-5-Car | October 2015 |
| Afternoon-Shoot-Em-Up | October 2015 |
| Snake-TutorialZine | November 2015 |
| Barkanoid-Packt | November 2015 |
| PhaserTypeScript | November 2015 |
| DronShooter | November 2015 |
| RiseAbove-Phaser-Tutorial | December 2015 |
| AdvancedPhaserTypeScriptProject | December 2015 |
| TwoCarsPrototype-TypeScript | December 2015 |
| RadicalPrototype-TypeScript | December 2015 |
| RadicalPrototype2-TypeScript | December 2015 |
| GoatRiderPrototype-TypeScript | December 2015 |
| CandyCrushBejeweled-TypeScript | December 2015 |
| Drag-Match-Engine-TypeScript | January 2016 |
| Swap-Match-Engine-TypeScript | January 2016 |
| Concentration-TypeScript | February 2016 |
| TapTapTaxi-CodeCaptain | February 2016 |
| Boids-TypeScript | March 2016 |
| HiLo-TypeScript | March 2016 |
| TwentyFortyEight-TypeScript | April 2016 |
| LevelSelection-TypeScript | April 2016 |
| 2dPlatformer-TypeScript | December 2016 |
| DungeonRaid-TypeScript | January 2017 |
| phaser-3-official | March 2018 |
These tutorials do not cover Phaser per-se, but may still be relevant to the framework in some way.
| Tutorial | Completed Date |
|---|---|
| rotjs-Tutorial | October 2015 |
n/a
- 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
- 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
- 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
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.