How to Build Asteroids with the Impact HTML5 Game Engine: Modules

By Rob Hawkes  |  eMail Email    Print Print  Post a comment


It's worth spending a few moments to explain how modules work, seeing as they will be what you use to create your game. Here is the module code from the main.js file that you just looked at, with some parts removed that aren't important to cover yet:

  1. ig.module(

  2.  "game.main" 

  3. )

  4. .requires(

  5.  "",

  6.  "impact.font"

  7. )

  8. .defines(function(){

  9.  // Main module code

  10. });

The first section, ig.module, defines a new module, the name of which is declared on the second line - in this case, "game.main". The name is representative of the folder structure, so "game.main" refers to a file called main.js that exists in the lib/game folder. It's pretty straight forward. The second section, requires, lists modules that are required to be loaded before this module is run. Each module follows the same naming guideline as before, so "" refers to the game.js file in the lib/impactfolder. Finally, the defines section is where the code for the module is placed. This section won't run until all the required modules have loaded.

Creating the game entities

Now that the main file is ready, it's time to create the entities for your game. Entities are anything in the game that are interactive, like the player, or enemies.

Asteroid entity

You're going to set up your entities as modules, so the first thing to do is create a file called asteroid.js within the lib/game/entities folder. Open up the file and add the following code to set up the entity module:

  1. ig.module(

  2.  "game.entities.asteroid"

  3. ).requires(

  4.  "impact.entity"

  5. ).defines(function() {

  6.  // Subclassed from ig.Enitity

  7. EntityAsteroid = ig.Entity.extend({

  8.  // Set some of the properties

  9. size: {x: 64, y: 64},


  11.  // Entity type

  12. type: ig.Entity.TYPE.B,


  14. init: function(x, y, settings) {

  15.  // Call the parent constructor

  16.  this.parent(x, y, settings);

  17.  },


  19.  // This method is called for every frame on each entity.

  20. update: function() {

  21.  // Call the parent update() method to move the entity according to its physics

  22.  this.parent();

  23.  }

  24.  });

  25. });

This is the core code behind the majority of entities, which you should hopefully recognize most of this from the main.js file you just looked at - it's a module.

You name the entity module at the top in ig.module, calling it "game.entities.asteroid", and then declare in requires that the "impact.entity" module needs to be loaded. This module provides all the core functionality for creating entities.

Within the defines section you set up your entity by ending the entity module, like so:

  1. EntityAsteroid = ig.Entity.extend({

The first part is the name of the entity, and the second is just saying that you want to extend the base entity class from Impact.

Within the call to ig.Entity.extend you place all the code to define the asteroid entity, starting with the sizeand type properties. The size property refers to the dimensions of the entity, and doesn't have to match up with the size of the sprite image that is used to display it (you'll notice this when you create the player entity). Setting type allows you to group entities together into either an A group, or B group. For example, this could be used to separate dangerous entities (B) from friendly entities (A).

The init function is called when the entity is created, and update is called on every loop of the game, before anything is drawn.

Right now, the asteroid entity doesn't do anything, so let's get it set up and visible within the game.

Add the following code underneath where you set the type property:

  1. // Load an animation sheet

  2. animSheet: new ig.AnimationSheet("media/asteroid.png"6464),

This sets up the sprite for the asteroid, and allows you to animate it if you wish. In your case you’re using the asteroid sprite from the game assets provided with this tutorial, but feel free to create your own if you wish.

Next up is to define an animation for the sprite, which is a simple in this case because you don't want the sprite to animate at all. Add the following code underneaththis.parent in the init function:

  1. // Add animations for the animation sheet

  2. this.addAnim("idle"1, [0]);

The first argument names the animation and could be whatever you want, the second is the time to keep each frame of the animation visible in seconds, and the third is an array of frame numbers for the animation. In your case there is only one frame, which is 0 (the first element of an array is always 0).

You won't be able to see anything yet, so jump into the main.js file and add the following code within the requires section at the top (remember to put a comma after the previous file):

  1. "game.entities.asteroid"

And add the following within the init function:

  1. var asteroidSettings;

  2. for (var i = 0; i < 8; i++) {

  3. asteroidSettings = {vel: {x: 100-Math.random()*200, y: 100-Math.random()*200}};

  4.  this.spawnEntity(EntityAsteroid, ig.system.width/2, ig.system.height/2, asteroidSettings);

  5. };

This will set up eight asteroids within the game at the middle of the screen, each with a random velocity. At least, it would if you added the asteroid sprite image to the game. To do that, move asteroid.png from the game assets provided and place it within the media folder.

If all went well, you should see a collection of asteroids dispersing from the middle of the screen. Result!

Figure 6

While you're in main.js, remove all the code within the draw function apart from this.parent. This will remove the message from the screen, which you no longer require.

Page 2 of 4

Previous Page
1 2 3 4
Next Page

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  • HTML5 eBook

    HTML5 ebook

    HTML5 is the new standard that is expected to take over the Web. New versions of browsers are already starting to support the advanced features. Learn why HTML5 is important and discover how to use start using it today.
  • Html5 Logo