Class: SpriteSheet

SQR. 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:
  • ctx - the context of the sprite sheet canvas to draw on
  • frame - the number of the frame to draw
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);