Class: SpriteSheet


new SpriteSheet()

Utility to create sprite sheets for 2d animations. See avaialble code samples:

Name Type Description
canvas HTMLCanvasElement

the canves on which the sprite-sheet is drawn

numFrames Number

the number for frames (rows x cols)

rows Number

the number of rows as defined in SQR.SpriteSheet#layout

columns Number

the number of columns as defined in SQR.SpriteSheet#layout

size Number

the size of the sprite sheet square as defined in SQR.SpriteSheet#layout




The srite sheet drawing function. The drawing function receives the following parameters:

	<li>ctx - the context of the sprite sheet canvas to draw on</li>
	<li>frame - the number of the frame to draw</li>

On top of that 

The drawing is called for each frame of the sprite sheet and expects that the 
implementing code will draw each consecivute frame at each call.

The context already comes transformed (translated) onto the current spot
for the given frame, so just start drawing at 0,0. The center of the sprite
is at size/2 x size/2.
Name Type Description
callback function

the implementation of the drawing function


layout(_rows, _cols, _size)

Define the layout of the sprite sheet. The number of rows and columns is arbitary, but it impacts the number of frames in the animaction, which is equal to the number product of those values (cols x rows). Typically it's better to create balanced sprite sheets that have roughly the same amount of rows as columns, and avoid creating very long sheets iwth ex lots of rows and only one column. Thanks to this you can avoid hitting the max canvas size limitation, esp on mobile.

Another limitations is that currently all cells need to be square and are defined by a single 
size value below. Since it's not optimal for rectangular animations, future versions will 
implement both width and height separately.
Name Type Description
_rows Number

the number of rows in the spritesheet

_cols Number

the number of columns in the spritesheet

_size Number

the size of each cell. All cells in spritesheets are square



Set misc options for the spritesheet, which include:

  • bgcolor - a css color to use as background (default is transparent)
  • webglFlipY - set to true if spritesheet is used as webgl texture


renderToCanvas(context, frame)

Draws a single frame to a canvas element. Can be used manually, but typically using run below is recommended. The run function returns this function but wraps it in a closure with a setInterval call for continous animated rendering.

Name Type Description
context CanvasRenderingContext2D

context 2d of the canvas to draw the sprite to

frame Number

the frame number to draw


run(framerate, loop) → {function}

Assign the return value of this function to the SQR.Transform2d shape property for rendering. See canvas-rendering for details.

Name Type Description
framerate Number

the frame rate of the animation in ms (default 1000/60, i.e. 60FPS)

loop Number

number of times the animation should loop. (default -1, i.e. infinite)


rendering function (renderToCanvas above) that can be used as shape property of SQR.Transform2d instance. The function has a propeorty called 'stop' which is also a function and can be called anytime to halt the animation.

// Assumes the sheet is draw and ready to use (see link to example above)
var sheet = SQR.SpriteSheet();

// Create a host transform
var sprite = new SQR.Transform2d();
sprite.position.set(100, 100);

// Run at 30fps, loop 10 times.
sprite.shape =, 10);