O'Reilly logo

Building HTML5 Games with ImpactJS by Jesse Freeman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The Main Class

When setting up a new Impact project from the template project, you will see a main.js file in your game directory. The main class is the entry point to your application and will contain some of the core logic, such as binding keyboard events and logic for making the camera follow the player. Most importantly, the main file also defines and loads any required files or global functions in your game. Here is the default main.js class you will start with:

1    ig.module(
2        'game.main'
3    )
4    .requires(
5        'impact.game',
6        'impact.font'
7    )
8    .defines(function(){
9
10        MyGame = ig.Game.extend({
11
12            // Load a font
13            font: new ig.Font( 'media/04b03.font.png' ),
14
15
16            init: function() {
17                // Initialize your game here; bind keys etc.
18            },
19
20            update: function() {
21                // Update all entities and backgroundMaps
22                this.parent();
23
24                // Add your own, additional update code here
25            },
26
27            draw: function() {
28                // Draw all entities and backgroundMaps
29                this.parent();
30
31
32                // Add your own drawing code here
33                var x = ig.system.width/2,
34                y = ig.system.height/2;
35
36                this.font.draw( 'It Works!', x, y, ig.Font.ALIGN.CENTER );
37            }
38        });
39
40
41        });
42
43
44    // Start the Game with 60fps, a resolution of 320×240, scaled
45        // up by a factor of 2
46        ig.main( '#canvas', MyGame, 60, 320, 240, 2 );
47
48    });
49

Let’s take a moment to go through some of the high-level code.

ig.module(
    'game.main'
)

The above code represents the namespace of your game. As you can see, this also defines the name of your main class.

.requires(
    'impact.game',
    'impact.font'
)

The first block of code above defines the class name and, as a result, file name of the module. The second block specifies which classes are needed by the game. Our main class will inherit from the Game class, and the Font class will be used to instantiate a font we’ll use for onscreen text display. These classes will automatically load when your game is run for the first time.

Next, everything in the .defines(function(){ ... }) block of code is your game logic. As you can see, Game is extended as described, and the Font class is used to populate a property called font with the font class and its font sprite sheet:

.defines(function(){

    MyGame = ig.Game.extend({

          // Load a font
          font: new ig.Font( 'media/04b03.font.png' ),

Then, we define some scaffolding code for init(), update(), and draw(). The draw() method is the only one with executable code in it. The default class needs to re-render the font on each draw call, so this default code simply gets the x,y position of where the text field should go, so the engine knows where to draw the font graphic.

Before moving on, there is one more thing that is important to highlight from the last few lines of the main.js file:

    // Start the Game with 60fps, a resolution of 320×240, scaled
    // up by a factor of 2
    ig.main( '#canvas', MyGame, 60, 320, 240, 2 );
});

This is the code that initializes your game. As you can see, we pass the ID of the Canvas element to our game’s constructor, a name for our game instance, and the frame rate and size into the ig.main constructor. The last value of 2 represents the scale of your game. This will upscale all of your game’s graphics by 2.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required