[Tutorial] Phaser State Mgmt Splash/Options/Credits/GameOver - CH 3 Released!

[MattMcFarland]

Hi all,

 

After last week's gamejam and diving head first into phaser.io - I ventured into learning the state management system and creating a polished game menu, a splash screen with menu options, game navigation between states, music / sound options, and a credits screen.   

 

I've learned SO MUCH and I just want to SHARE everything I've learned!  

 

This aims to be an exhaustive tutorial and example/boilerplate with hopes of teaching others the usage of phaser's state management system, including:

* Creating a cool splash screen
* Loading scripts/fonts/assets into your game with a progress bar.
* How to load Custom Fonts into your game
* Game state management
* Navigation between Main Menu, Options Screen, and more.

 

I've just finished Chapter 1 - Splash Screen

 

Both the tutorial and the source code are here: https://github.com/MattMcFarland/phaser-menu-system

You can view the finished product here: http://mmcfarland.itch.io/phaser-menu-system

 

Hi all! I'm very excited to release Chapter 3 - Options Menu, which I cover in detail the process behind and process of developing the options screen.

With Chapter 3, we:

created the the options menu

learned to modify music player settings (volume play state)

modified our game option menu factory to work across states!

created reusability for our style library.

learned more about Object.assign, Object.create

learned about using Phaser's Utility Mixin function

Chapter 3 is available here: https://github.com/MattMcFarland/phaser-menu-system/blob/master/chapter3.md

The finished product is here: http://mmcfarland.itch.io/phaser-menu-system

Thanks!

[WombatTurkey]

Holy crap.  Well done! 

[MattMcFarland]

Thanks! Since this is on github, I welcome other contributors if they are willing.  I plan on finishing up Chapter 2 by tomorrow.  Each chapter will be quite exhaustive.  This is a labor of love, so I really enjoyed making it and it is also helping me learn more as well.  

[Dread Knight]

Thanks for making this, will check out the code tomorrow morning :-) Stars from me ^^

[MattMcFarland]

Thanks!  I'll be refactoring it a bit to maintain the DRY principal for the entire project as well.  As I refactor, I write the tutorial..  So if you get ahead the code might be a little rough  

[lyrad]

Logged in just to say thanks! Started checking out phaser recently and this was exactly what I had in mind. Saves a lot of work!

 

[WombatTurkey]

One suggestion I think is if the loading bar were tweened it would look 100x smoother

[MattMcFarland]

Big thanks to everyone for comments suggestions.

 

The tutorial has received an overwhelming response on reddit, and has gained a lot of traction

 

So to avoid losing traction, I've fasted tracked Chapter 2 - The game menu:

 

https://github.com/MattMcFarland/phaser-menu-system/blob/master/chapter2.md

 

For Chapter 2 I exhaustively cover and polish the game menu! https://github.com/MattMcFarland/phaser-menu-system/blob/master/chapter2.md

I aim to teach: UI styling (including making a handy stylesheet!) object factories to stay DRY (Dont Repeat yourself) A little bit about lexical scope and closures (nothing deep) polyfills and browser compatability.

[MattMcFarland]

Chapter 3 just released!

 

Hi all! I'm very excited to release Chapter 3 - Options Menu, which I cover in detail the process behind and process of developing the options screen.

With Chapter 3, we:

created the the options menu

learned to modify music player settings (volume play state)

modified our game option menu factory to work across states!

created reusability for our style library.

learned more about Object.assign, Object.create

learned about using Phaser's Utility Mixin function

Chapter 3 is available here: https://github.com/MattMcFarland/phaser-menu-system/blob/master/chapter3.md

The finished product is here: http://mmcfarland.itch.io/phaser-menu-system

Thanks!

[WombatTurkey]

Great Work @MattMcFarland keep it up!

[Miezel]

Thank you @MattMcFarland for the great tutorials!

I added a couple of new features to it (mainly Font Awesome) and made it mobile friendly, there is some clean up to be done tho ^^

https://github.com/Mimieam/phaser-mobile-template