Give your HTML5 game menu a nice bounce effect with Phaser

Talking about Game development, HTML5, Javascript and Phaser.

In most cases, polishing a game can make the difference between a good game and good game nobody knows. That’s why you should put quite an effort on polishing you creation, taking care of every little thing which can make players say “hey, it’s not a game made in five minutes”. Although the process of polishing a game can make you spend a lot of time, sometimes it’s very easy to add some nice eye-candy effects to your title screen thanks to Phaser. I already covered this topic in the post How to bring your HTML5 games title screen to life in a minute with Phaser exactly one year ago, and now it’s time to show you another trick. For my upcoming Circle Chain Grid Edition game I wanted a minimal graphic style, with only one big “play” button in the middle of the screen, but at the same time I needed to have some other options, such as a “thank you” page – being a premium game, I want to thank players – and a “reset game” page – this is a secret. So I decided to add a little universal “menu” icon at the bottom of the screen which moves a group with menu items – along with the menu icon itself – some pixels to the top, with a bouce easing. Look at the example:
Click on the menu icon at the bottom of the screen to open/close the menu and see what I mean. The source code? It’s very easy, the code of the mmenu itself is highlighted here: 
var game;
var menuGroup;

window.onload = function() {	      
     game = new Phaser.Game(640, 960);
     game.state.add("Boot", boot);
     game.state.add("Preload", preload);
     game.state.add("GameTitle", gameTitle);
     game.state.start("Boot");
}

////////////////////////////////////////////////////////////////////////////////

var boot = function(game){};

boot.prototype = {
     preload: function(){
          game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
          game.scale.setScreenSize = true;
          game.scale.pageAlignHorizontally = true;
          game.scale.pageAlignVertically = true;
          game.stage.backgroundColor = "#020028";
     },
     create: function(){
          game.state.start("Preload");
     }
}

////////////////////////////////////////////////////////////////////////////////

var preload = function(game){};

preload.prototype = {
     preload: function(){
          game.load.image("gametitle", "assets/sprites/gametitle.png");
          game.load.image("gridedition", "assets/sprites/gridedition.png");
          game.load.image("playbutton", "assets/sprites/playbutton.png");
          game.load.image("menubutton", "assets/sprites/menubutton.png");
          game.load.image("resetgame", "assets/sprites/resetgame.png");
          game.load.image("thankyou", "assets/sprites/thankyou.png");
     },
     create: function(){
          game.state.start("GameTitle");
     }
}

////////////////////////////////////////////////////////////////////////////////

var gameTitle = function(game){}

gameTitle.prototype = {
     create: function(){
          var title = game.add.sprite(game.width / 2, 60, "gametitle");
          title.anchor.set(0.5); 
          var grid = game.add.sprite(game.width / 2, 130, "gridedition");
          grid.anchor.set(0.5);
          var playButton = game.add.button(game.width / 2, game.height / 2 + 100, "playbutton", function(){});
          playButton.anchor.set(0.5);
          menuGroup = game.add.group();
          var menuButton = game.add.button(game.width / 2, game.height - 30, "menubutton", toggleMenu);
          menuButton.anchor.set(0.5);
          menuGroup.add(menuButton);
          var resetGame = game.add.button(game.width / 2, game.height + 50, "resetgame", function(){});
          resetGame.anchor.set(0.5);
          menuGroup.add(resetGame);
          var thankYou = game.add.button(game.width / 2, game.height + 130, "thankyou", function(){});
          thankYou.anchor.set(0.5);
          menuGroup.add(thankYou);          
     }
}

function toggleMenu(){
     if(menuGroup.y == 0){
          var menuTween = game.add.tween(menuGroup).to({
               y: -180     
          }, 500, Phaser.Easing.Bounce.Out, true);
     }
     if(menuGroup.y == -180){
          var menuTween = game.add.tween(menuGroup).to({
               y: 0    
          }, 500, Phaser.Easing.Bounce.Out, true);     
     }
}
And I turned a static page into something more interesting while keeping the minimal style. Download the source code and don’t forget to get your copy of the game once it’s released.