Defined in Module impact.system, inherits from ig.Class


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.

An instance of ig.System is automatically created at ig.system (lowercase) by the ig.main() function.


new ig.System( canvasId, fps, width, height, scale )

The constructor for ig.System is usually called through ig.main() and the instance is provided at ig.system (lowercase).



The canvas element.


The '2d' drawing context of the canvas element.


Obsolete in 1.20 - See ig.main().

.realWidth, .realHeight

The scaled size of the game screen. E.g. with a .width of 320 pixels and a .scale of 2 will result in a .realWidth of 640.


true if a game is running, false otherwise.


The scaling factor for the game screen.


Removed in 1.20, see ig.System.drawMode


The time in seconds since the last frame. Use this for movement calculations and the like. E.g.:

pos.x = pos.x + vel.x * ig.system.tick;

Note that this value does not represent real time, but game time. If, for instance, the browser is unable to run the game at 20 fps, the whole game will be slowed down and the .tick will be lower than the real time since the last frame. See ig.Timer for a more detailed explanation.

.width, .height

The (unscaled) size of the game screen in pixels, as set by the constructor.


.clear( color )

Clear the game screen with the specified color, where color is a CSS string. E.g. '#f0f'.

The ig.Game's .draw() method calls .clear() for every frame with the Games .clearColor.

.getDrawPos( p )

Get the real target position for drawing into the canvas. This takes the .scale and ig.System.drawMode into account.

You'll only need this method if you work directly with the .context, instead of drawing through ig.Image, ig.Font or ig.BackgroundMap.

// Using the canvas context directly, we need to take the 
// ig.system.scale into account. Using getDrawPos() will
// give us the "scaled position"

	'Test Text',
	ig.system.getDrawPos( x ),
	ig.system.getDrawPos( y )

.resize( width, height, [scale] )

New in 1.17

Set the width and height of the canvas element in (unscaled) pixels. If the optional scale parameter is not present, the scale factor is not changed.

.setGame( gameClass )

Run the specified gameClass. This stops the currently running game (if any), creates a new instance of the gameClass and starts the run loop again.

This method is safe to call from anywhere in the game, as the new game will only be started after the current frame has finished updating and drawing.

Global Properties


New in 1.20

One of

The default is SMOOTH.

Specifies how graphics are positioned when drawing. AUTHENTIC rounds all drawing positions to unscaled pixels, SMOOTH rounds to scaled pixels and SUBPIXEL doesn't round at all.

E.g. if the .scale is 4 and drawMode is SMOOTH, moving an entity will move it one pixel at a time. If drawMode is AUTHENTIC, the entity's smallest movement step will be 4 pixels.

While SMOOTH is somewhat "un-authentic" for pixel-style games, it provides much smoother movements of entities and background layers when the game screen is scaled up.

Note that not all browsers support SUBPIXEL drawing. Depending on your game, subpixel positioning may lead to visual artifacts, such as seams between tiles. In most browsers it also comes with the price of a bit of performance.

You have to specify the draw mode before calling ig.main(), i.e.:

ig.System.drawMode = ig.System.DRAW.AUTHENTIC;
ig.main( ... );


New in 1.21

One of

The default is SMOOTH.

Specifies wether to interpolate images when the canvas is scaled up. Use CRISP for pixel style games.

You have to specify the scale mode before calling ig.main(), i.e.:

ig.System.scaleMode = ig.System.SCALE.CRISP;
ig.main( ... );