new SpriteSheet()
Utility to create sprite sheets for 2d animations. See avaialble code samples:
- rendering a sprite sheet on canvas 2d
- rendering a sprite sheet in webgl (coming soon)
Properties:
| 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 |
- Source:
Methods
draw(callback)
The srite sheet drawing function. The drawing function receives the following parameters:
<ul>
<li>ctx - the context of the sprite sheet canvas to draw on</li>
<li>frame - the number of the frame to draw</li>
</ul>
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.
Parameters:
| Name | Type | Description |
|---|---|---|
callback |
function | the implementation of the drawing function |
- Source:
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.
Parameters:
| 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 |
- Source:
options()
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
- Source:
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.
Parameters:
| Name | Type | Description |
|---|---|---|
context |
CanvasRenderingContext2D | context 2d of the canvas to draw the sprite to |
frame |
Number | the frame number to draw |
- Source:
run(framerate, loop) → {function}
Assign the return value of this function to the SQR.Transform2d shape property for rendering. See canvas-rendering for details.
Parameters:
| 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) |
- Source:
Returns:
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.
- Type
- function
Example
// 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 = sheet.run(1000/30, 10);