which state to add main menu for simple browser game with phaser

Question

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});

Answer 1

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);
    game.state.start("Boot");

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.

Answer 2

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

using state in Phaser

github template for phaser game

in-phaser-how-should-i-be-managing-state