Creating a Start Screen

In order to create our start screen, we are going to need to extend the ig.Game class. We can actually set up each of our game’s screens as inner classes in our main.js file just like we did with other entities in our game. This also allows you to keep all your game screens organized in one file. Add the following code to our main.js module right after the end of our MyGame class but before the ig.main constructor:

You want to start your start screen inner class right before the ig.main constructor.

Figure 7-1. You want to start your start screen inner class right before the ig.main constructor.

Here is the StartScreen class code:

StartScreen = ig.Game.extend({
    instructText: new ig.Font( 'media/04b03.font.png' ),
    background: new ig.Image('media/screen-bg.png'),
    init: function() {
          ig.input.bind( ig.KEY.SPACE, 'start');
    },
    update: function() {
          if(ig.input.pressed ('start')){
               ig.system.setGame(MyGame)
          }
          this.parent();
    },
    draw: function() {
          this.parent();
          this.background.draw(0,0);
          var x = ig.system.width/2,
          y = ig.system.height - 10;
          this.instructText.draw( 'Press Spacebar To Start', x+40, y, ig.Font.ALIGN.CENTER );
    }
});

This should look very familiar to you at this point. We simply extend the ig.Game class, then override a few methods. In init(), we bind the space bar key to start so we can listen for the moment the user is ready to play the game. Next, we override the update method to handle the space bar being pressed. As soon as we detect that ...

Get Building HTML5 Games with ImpactJS now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.