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

Core Classes

Impact is made up of several core classes that revolve around the game framework and all the necessary systems such as rendering, maps, sounds, and more. All the classes are in the ig namespace, which is set up by the core class. Here is a list of the main classes used in Impact along with a short description of what they do:

ig Core

The ig object provides the module definition and loading capabilities as well as some utility functions.


An ig.Animation object takes care of animating an entity or BackgroundMap tiles. Frames from an AnimationSheet—an image with all animation frames—are drawn as specified by the animation’s frameTime and sequence.


ig.AnimationSheet is a thin wrapper around an ig.Image object. It specifies the width and height properties for each animation frame in the sheet. It is used by the ig.Animation class.


An ig.BackgroundMap draws tiles from a Tileset, as indicated by its 2D data array.


An ig.Collision takes a 2D TileMap and allows tracing against it for collisions.


Interactive objects in the game world are typically subclassed from this base entity class. It provides animation, drawing, and basic physics. Subclassing your entities from ig.Entity ensures that it can be added to the game world, react to the CollisionMap along with other entities, and be added to a level within Weltmeister.


An ig.Font object loads a specially formatted font image and allows you to draw text with it.


ig.Game is the main hub for your game. It hosts all currently active entities, BackgroundMaps, and a CollisionMap. You can subclass your own game class from ig.Game.


ig.Image is a wrapper around image resources (.png, .gif, .jpeg). It takes care of loading and scaling the source image. You can draw the whole image by calling .draw() or just one tile of it by calling .drawTile().


ig.Input handles all keyboard and mouse input.


ig.Loader is the default pre-loader for all images and sounds that the game needs. By default, it displays a white progress bar on a black background.


ig.Map is the base class for ig.BackgroundMap and ig.CollisionMap. It only provides basic access to the tiles in the map data.


ig.Music offers the ability to play a list of background music in order or randomly.


An instance of ig.Sound represents a sound file to be used as background music or game sound.


The SoundManager takes care of loading sounds and providing them for ig.Music and ig.Sound instances. An instance of the SoundManager is automatically created at ig.soundManager by the ig.main() function.


ig.System takes care of starting and stopping the run loop and calls the .run() method on the current game object. It also does the housekeeping for ig.Input and provides some utility methods.


The ig.Timer has two distinct modes of operation. You can either get the difference by calling .delta() between the current time and the timer’s target time (as set by the constructor or .set()) or just get the current tick—the time since the last call to .tick().

You can learn more about each of these classes and their methods on Impact’s website under the documentation section at http://impactjs.com/documentation.

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