In which state should I add the main menu, or should i make it into another separate state? My main confusion here is how I manipulate states properly. Im a phaser/gamedev noob and I dont know how to start a game from the main menu syntax and mechanics-specific.

My idea for a main menu would be a simple background picture with a start button. But then, how do i jump start the game when the start button is clicked?

just for details, Im showing you this :

var game = new Phaser.Game(800,600, Phaser.AUTO, 'phaser-demo', {preload: preload, create: create, update: update, render: render});

2 Answers 2


Unfortunately most of the tutorials you'll see will teach you some bad habits as far as state management goes. What you'll want to do here is avoid the object literal state declaration in favor of adding states from separate JS files in your index.html.

(Don't forget to include them as <script>'s as well.)

    var game = new Phaser.Game(800, 600, Phaser.CANVAS,'YourGameName');
    game.state.add("Boot", Boot);
    game.state.add("Preload", Preload);
    game.state.add("MainMenu", mainMenu);
    game.state.add("Play", Play);
    game.state.add("GameOver", GameOver);

I recommend reading the guide to Phaser state management here when it's finished.

Until then we're stuck with kinda skimpy tutorials like this one, that still do the job, but aren't ideal.


Jordan replied the question properly, I have given here some resource that might be helpful.

using state in Phaser

github template for phaser game


  • \$\begingroup\$ I've stumbled upon ottoraba's repo before and I am still using it til now :) thats for sharing resources though for me, browserify and beefy are two other things to learn but will pay in the long run! thanks \$\endgroup\$ Jul 28, 2015 at 2:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .