Start and end menu best practices

[lukaMis]

Hi

 

What would be considered best practice for start and end / finish menu?

 

Is it best that is part of game and in game state of its own using different assets like images and spritesheets or is it better if it is part of DOM of the page that holds the game.

 

How do you guys do it or what is the best approach?

 

tnx

Luka

 

 

 

[j0hnskot]

The way i and probably many others too , is to create a menu state and add the shutdown method where you kill every group and sprite used in the state. Then, when you start an other state , the shutdown method will get called and remove everything unnecessary . Then proceed to the state you asked. 

 

I personally don't really see a reason for it to not be a part of the game.

[lukaMis]

Well one thing that comes to mind is to leverage the power of css for the menu. Also less game assets to download.

[beuleal]

Hi lukaMis, i think the same way... but i dont know how to integrate css with phaser :/ 

[lewster32]

Think of it this way:

<div id="gamewrapper">  <div id="ui">    <ul>      <li><a href="#" id="menu1">Menu item 1</a></li>      <li><a href="#" id="menu2">Menu item 2</a></li>      <li><a href="#" id="menu3">Menu item 3</a></li>    </ul>  </div>  <div id="game"></div></div>

#gamewrapper {  position: relative;}#game {  position: relative;  z-index: 1;}#ui {  position: absolute;  z-index: 2;}

With that simple setup, you have a HTML and CSS-controlled menu overlaid on top of Phaser. Using something like jQuery or Zepto you can break out your web development skills and manage the display of the menu and what happens when you click on items, and do it all from within Phaser functions.

[beuleal]

Thanks... ill check if it woks!

[beuleal]

It works fine! The canvas isnt inside of game div... Let i show what i did:

<div id="ui">		    	<ul>		      		<li><a href="#" id="menu1" onclick="loadGame();">Normal</a></li>		      		<li><a href="#" id="menu2">Time Attack</a></li>		      		<li><a href="#" id="menu3">Instruções</a></li>		    	</ul>		  	</div>			<div id="game">							</div>

My loadGame function

function loadGame(){	document.getElementById('game').innerHTML = myGame();}