James Skemp
9c7d233e1d
Add official Phaser 3 Getting Started game See merge request strivinglife/PhaserTutorials!5 |
||
---|---|---|
2dPlatformer-TypeScript | ||
AdvancedPhaserTypeScriptProject | ||
Afternoon-Shoot-Em-Up | ||
Ascii-Roguelike-Tutorial | ||
Barkanoid-Packt | ||
Boids-TypeScript | ||
CandyCrushBejeweled-TypeScript | ||
Coding-Tip-5-Car | ||
Concentration-TypeScript | ||
Drag-Match-Engine-TypeScript | ||
DronShooter | ||
DungeonRaid-TypeScript | ||
GoatRiderPrototype-TypeScript | ||
HiLo-TypeScript | ||
LevelSelection-TypeScript | ||
Official-Making-A-Game | ||
Phaser-Clicker-Tutorial | ||
PhaserTypeScript | ||
RadicalPrototype-TypeScript | ||
RadicalPrototype2-TypeScript | ||
RiseAbove-Phaser-Tutorial | ||
Snake-TutorialZine | ||
SpriteSheetTester | ||
Swap-Match-Engine-TypeScript | ||
TapTapTaxi-CodeCaptain | ||
TwentyFortyEight-TypeScript | ||
TwoCarsPrototype-TypeScript | ||
_libraries | ||
_starter | ||
_starter-simple | ||
_starter-simple-vs-code | ||
_starter-simple-vs-code-ce | ||
phaser-3-started | ||
rotjs-Tutorial | ||
zTesting | ||
zTestingJS | ||
.gitignore | ||
.gitlab-ci.yml | ||
PhaserTutorials.sln | ||
README.md | ||
index.html |
README.md
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
- 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
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.