Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jamesskemp/phasertutorials

Large collection of tutorials for Phaser, that I've followed. Original source listed in README files.
https://github.com/jamesskemp/phasertutorials

game-development html5-game-development javascript phaser phaser-tutorial phaserjs typescript

Last synced: about 2 months ago
JSON representation

Large collection of tutorials for Phaser, that I've followed. Original source listed in README files.

Awesome Lists containing this project

README 

        
# Phaser Tutorials



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



[View generated results](http://jamesskemp.github.io/PhaserTutorials/).



## 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](https://github.com/JamesSkemp/phaser-starter-templates) on GitHub, and [mirror on GitLab](https://gitlab.com/strivinglife/phaser-starter-templates).



### _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][vs-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://www.codevinsky.com/phaser-2-0-tutorial-flappy-bird-part-1/)

- http://blog.lessmilk.com/how-to-make-flappy-bird-in-html5-1/

- [How to Make a Fruit Ninja Game in Phaser](https://gamedevacademy.org/how-to-make-a-fruit-ninja-game-in-phaser-part-1/)

- [How to Make a Bomberman Game in Phaser](https://gamedevacademy.org/how-to-make-a-bomberman-game-in-phaser-part-1/)

- 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](http://phaser.io/learn/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](http://www.emanueleferonato.com/) posts tutorials on a regular basis, and sells a couple complete tutorials.

- [GameDev Academy](https://gamedevacademy.org/) 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.



[vs-code]: https://code.visualstudio.com/