How do you guys handle your game "states"?

[hustlerinc]

Hi I'm wondering how you are doing your game states like loading, start menu, play, pause, game over etc?

Haven't seen any tutorial covering the subject so I come here hoping for a good explanation from the pro's and maybe even some pseudo code.

The only solution I've come up with is a small setInterval loop only checking for the different gamestates then a couple of if() statements. For example if(state = 'pause') then draw() and update() functions stops, but this loop is still running. Probably far from ideal but I couldn't make it work any other way.

How do you do it?

[Hsaka]

Hi, you can see an example of how to handle game states here:

https://github.com/photonstorm/phaser/tree/master/wip/examples/state

 

That is, of course, Phaser specific. But you can probably do something similar in whatever framework you're using.

[YellowAfterlife]

Personally I normally have a game state prototype, which is extended by said rooms, and has start/end/update events. Then in main game object there is a method to switch between states (either just by adding/removing any related DOM elements or with tweening). This seems to be a common approach and it works pretty well.

I wouldn't suggest doing a if/switch block unless you're after extremely compact code.

[AhmedElyamani]

Hi I'm wondering how you are doing your game states like loading, start menu, play, pause, game over etc?

Haven't seen any tutorial covering the subject so I come here hoping for a good explanation from the pro's and maybe even some pseudo code.

The only solution I've come up with is a small setInterval loop only checking for the different gamestates then a couple of if() statements. For example if(state = 'pause') then draw() and update() functions stops, but this loop is still running. Probably far from ideal but I couldn't make it work any other way.

How do you do it?

 

I think you're doing it pretty well, not that I have actually made a complete game out of plain JS , but I'd consider it like this:

 

//this is pseudocode function gameCode(){  if (paused=false){     //the code running during the game  }else{    //code for displaying the pause menu     if (resume action is triggered) {paused=false;}    if (end game action is triggered) {clearInterval(gameCode());setInterval(mainMenu());}  }}function mainMenu(){//the code of the main menuif game start action is triggered{clearInterval(mainMenu());setInterval(gameCode());}}setInterval(mainMenu);var paused=0;

[Felipe]

I would recommend researching on FSM ( Finite  State Machine ). It's a great way handle states on a game, I've used them for a while and it's very helpful and let's you keep you code clean and away of multiple nested if and switch statements inside your main loop. The good thing about FSM is that you can implement it into any object allowing you to have nested state machines and also they are extremely simple to code.

[hustlerinc]

All tips are very helpful. And I've managed to get a simple version working on event instead of constant setInterval loop. Will read about FSM too. Thanks alot.

[suyashmshephertz]

What I do is create a Scene class and then create all my states extending that Scene Class. Then I create a Game class that manages all those states. I usually follow Object Oriented Paradigm to create Game States it helps me easily maintain complex games. Sometime ago, I created a game using similar concept in HTML5. As it was a multiplayer game, the code could be to big to understand but I tried separating the engine code, that you can read and understand the state management. It utilizes easeljs to render graphics and classy.js for OOP.

The code is hosted here https://github.com/shephertz/junglechaos_social 
The engine code is here https://github.com/shephertz/junglechaos_social/tree/master/v1.0/js/game/engine 
To play http://www.html5gamedevs.com/topic/1042-multiplayer-jump-n-run-html5-game/

[skiffcz]

Depends on the complexity of the game, but taking into consideration OP asking about simple games with few states I usually have just global var and if switch in the main loop function. Plus I have a transition func for each state to clean up stuff from last state and init stuff for the state im phasing into.

...// global varsvar state = 'preintro';...// main loop, such as phaser update()...//first lets check transition cleanup requestsif (state == 'preintro') preIntro ();if (state == 'premenu')  preMenu ();// and so on...// or update some running stateif (state == 'intro') updateIntro ();if (state == 'menu')  updateMenu ();// and so forth...// and the functions themselves look like thisfunction preIntro () {    ... //cleanup and setup    state = 'intro';}...function updateIntro () {    ... //do all stuff in intro    if (time_to_go_to_menu) state = 'premenu';}

 

For the pause part ... I just have a pause state which does nothing except for unpause condition check, and when such condition is satisfied, it resets the state var back to the original state.

 

Yes. Its as elegant as pile of bricks. For some games, you need a multitool, and in this case OOP is in order to protect your sanity. For games under 1000 lines though ... just use the hammer.