PhaserTutorials
PhaserTutorials copied to clipboard
Large collection of tutorials for Phaser, that I've followed. Original source listed in README files.
Phaser Tutorials
See individual README files for information on where each tutorial is from.
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.
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 |
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.