lukaMis Posted June 24, 2014 Share Posted June 24, 2014 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? tnxLuka Link to comment Share on other sites More sharing options...
j0hnskot Posted June 24, 2014 Share Posted June 24, 2014 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. Link to comment Share on other sites More sharing options...
lukaMis Posted June 24, 2014 Author Share Posted June 24, 2014 Well one thing that comes to mind is to leverage the power of css for the menu. Also less game assets to download. Link to comment Share on other sites More sharing options...
beuleal Posted June 27, 2014 Share Posted June 27, 2014 Hi lukaMis, i think the same way... but i dont know how to integrate css with phaser :/ Link to comment Share on other sites More sharing options...
lewster32 Posted June 27, 2014 Share Posted June 27, 2014 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. mtburdon 1 Link to comment Share on other sites More sharing options...
beuleal Posted June 29, 2014 Share Posted June 29, 2014 Thanks... ill check if it woks! Link to comment Share on other sites More sharing options...
beuleal Posted June 30, 2014 Share Posted June 30, 2014 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 functionfunction loadGame(){ document.getElementById('game').innerHTML = myGame();} lewster32 1 Link to comment Share on other sites More sharing options...
Recommended Posts