Constructors

- Sprite

Constructor Summary

Sprite
(image,
layerId)
A Sprite object is used to display images.

Functions Summary

addAnimation
(name,
animation,
dontPlay)
Add an animation to the sprite.
alwaysDraw
(toggle)
Force a sprite to get drawn every frame, disabling potential optimizations.
Bring the sprite to the front of its layer.
cache()
Draw this sprite to an off-screen canvas, then use this canvas as a source image whenever this sprite needs to be drawn again
clone()
Clone the sprite
Check whether the sprite contains a given screen space point
drawToImage
(virtualPath,
replace,
offset,
transform,
compositeOperation,
renderMode)
Draw a sprite to an image associated with a virtual path.
drawToTexture
(gpuTextureName,
cpuTextureName)
Draw the sprite to a WebGL texture in GPU memory.
fadeIn
(time,
callback)
Fade in effect, gradually changing the opacity (alpha) of the sprite from 0 to 1.
fadeOut
(time,
callback)
Fade out effect, gradually changing the opacity (alpha) of the sprite from 1 to 0.
Get the names of all images being used by this sprite and its animations
getAnimation
(name)
Get the animation object associated with a given animation name
Get the active animation object for the sprite
Get the name of the active animation for the sprite
Get the current draw function of the sprite
Get the current modifiers that are applied to the sprite
Get the area of the source image (expressed as a fraction of the source image size) that is being used to draw this sprite.
Get the name of the image being used
Get the index of the sprite in its layer.
Get the id of the sprite's layer
Get the current name of this sprite, if it was set with Sprite.setName()
getOverlappingObjects
(searchAllLayers,
precision)
Get an array of objects overlapping this sprite
Get the source code of the current pixel shader function for this sprite
Get a list of the custom shader uniforms for this sprite.
Get the world space position of the sprite
Get the current rotation angle of the sprite
Get the current scale factor of the sprite, that is its size compared to the source image (or animation frame) size
Get the parent scene object for this sprite (if any)
Get the screen space position and extents for this sprite
Get the world space size of the sprite
Get the sprite's sort point that is used in the calculations to determine whether the sprite should appear in front of other sprites in the same layer, according to the layer's sorting mode.
getWorldOffset
(screenPosition)
Convert a screen space position into a world space offset relative to the sprite's world space position
hasAnimation
(name)
Check whether the sprite has an animation that matches the given name
Check whether a sprite is being forcefully drawn every frame
Check whether the Sprite is currently visible on the screen
Check whether the Sprite is using pixel-perfect mouse events, i.e.
Check whether the sprite is visible
overlapsSprite
(otherSprite,
precision)
Test to see whether this sprite overlaps another sprite
playAnimation
(name,
direction)
Play an animation for this sprite
Send the sprite to the back of its layer.
putBehindSprite
(otherSprite)
Move the sprite behind another sprite in the same layer.
Resume playing an animation that had been stopped
serialize
(stringify,
propertiesToExclude)
Export this sprite to an object that can then be used to create a new sprite like this one (by passing the resulting object to the Sprite constructor).
Mark the area occupied by the sprite as dirty.
setDrawFunction
(drawFunction)
Set a custom draw function for the sprite
setDrawModifiers
(modifiers)
Set draw modifiers for this sprite.
setImageArea
(minX,
minY,
maxX,
maxY)
Set the area of the source image that should be used to draw this sprite.
setImageFile
(image,
updateSizeFromImage)
Set an image to use with the current sprite
Set the sprite's index in its layer.
setLayer
(layerId)
Set a new layer for the sprite
setName
(name)
Set a name for the sprite
setPixelShader
(shaderSource,
shaderUniforms)
Set a custom pixel shader for this sprite.
setPosition
(positionX,
positionY)
Set the world space position of the sprite.
setRotation
(rotation)
Set a rotation angle for the sprite
setSceneObject
(sceneObject)
Set the parent scene object for the sprite.
setSize
(width,
height,
resetScaleFactor)
Set the world space size of the sprite
setSortPoint
(x,
y)
Set a sort point for the sprite.
setVisible
(toggle)
Show or hide a sprite
step()
Perform a simulation step for the sprite.
Stop the animation that is currently playing
Set the Sprite to use (or not use) pixel-perfect mouse events, i.e.

Constructor Details


(image,
layerId)
A Sprite object is used to display images. It may have references to Animation objects if the image to display is supposed to be animating.

Parameters:


{string|object}imageOptional
The file name of an image that has previously been loaded. If falsy, a blank (white) image will be used. You can also use this constructor by passing in a single object (so just the first parameter) that contains all the sprite properties that you want to set (see remarks below for more details).
{number}layerIdOptional, Default: wade.defaultLayer
The id of the layer that will contain the sprite

Remarks:
You can also use this constructor by passing in a single object (so just the first parameter) that contains all the sprite properties that you want to set. In this case, the object structure is as follows (all fields are optional):
 {
    type: 'Sprite',
    sortPoint: {x: number, y: number},
    layer: number,
    name: string,
    size: {x: number, y: number},
    autoResize: boolean,
    visible: boolean,
    image: string,
    imageArea: {minX: number, minY: number, maxX: number, maxY: number}
    animations: {},
    currentAnimation: string,
    pixelShader: string,
    pixelShaderUniforms: {name1: type1, name2: type2, ...},
    alwaysDraw: boolean,
    pixelPerfectMouseEvents: boolean,
    properties: {}
 }
 
Where properties is a set of properties to copy into the new sprite object. Note that properties are deep-copied, and cannot contain functions or cyclical references.
The animations object can contain any number of animations, each associated with a unique name. See the Animation documentation for more details.

Function Details


(name,
animation,
dontPlay)
Add an animation to the sprite. If, after this operation, there is only one animation for this sprite, it will be played automatically

Parameters:


{string}nameOptional
The animation name. This can be omitted, in which case the 'name' parameter of the Animation object will be used.
{Animation}animation
The animation object
{boolean}dontPlayOptional
Don't play the animation automatically, even if no other animations are present

(toggle)
Force a sprite to get drawn every frame, disabling potential optimizations. This does not happen by default, i.e. drawing optimizations are enabled by default.

Parameters:


{boolean}toggleOptional
Whether to draw the sprite every frame. If omitted or undefined, this parameter is assumed to be true.
()
Bring the sprite to the front of its layer. Note that if any sorting function (other than 'none') has been specified for the layer, when the sorting occurs it will override this operation

()
Draw this sprite to an off-screen canvas, then use this canvas as a source image whenever this sprite needs to be drawn again

()
Clone the sprite

Returns:


{Sprite}
A copy of the sprite

(point)
Check whether the sprite contains a given screen space point

Parameters:


{Object}point
An object with 'x' and 'y' fields representing the screen space point to test

Returns:


{boolean}
Whether the sprite contains the point

(virtualPath,
replace,
offset,
transform,
compositeOperation,
renderMode)
Draw a sprite to an image associated with a virtual path. The image will be stored in CPU memory. To create a WebGL texture in GPU memory, use Sprite.drawToTexture instead.
Note that, technically, this creates an HTML canvas object rather than an HTML img object, to save memory and increase performance

Parameters:


{string}virtualPath
The virtual path of the image - this can later be used to retrieve the image via wade.getImage(virtualPath)
{boolean}replaceOptional
Whether to replace the existing image at the virtual path (if it exists), or draw on top of it
{Object}offsetOptional
An object with 'x' and 'y' fields representing the offset to use when drawing this sprite onto the image
{Object}transformOptional
An object with 6 parameters: 'horizontalScale', 'horizontalSkew', 'verticalSkew', 'verticalScale', 'horizontalTranslate', 'verticalTranslate'
{string}compositeOperationOptional
A string describing an HTML5 composite operation
{string}renderModeOptional
The render mode to use. This defaults to the sprite's layer's current render mode, and can be either '2d' or 'webgl'

(gpuTextureName,
cpuTextureName)
Draw the sprite to a WebGL texture in GPU memory. Note that this is only possible if the sprite is currently on a WebGL layer.

Parameters:


{string}gpuTextureNameOptional
A name to associate to the texture. Using this name, it is possible to set the texture as a shader uniform (of type Sampler2D) for other sprites on the same layer.
{string}cpuTextureNameOptional
If specified, a copy of the texture is made in CPU memory, and the corresponding image can then be accessed using wade.getImage(). Note that this is a slow process.

Returns:


{Object}
A WebGL texture object

(time,
callback)
Fade in effect, gradually changing the opacity (alpha) of the sprite from 0 to 1. If the sprite is invisible, it is set to visible before fading in.

Parameters:


{number}timeOptional, Default: 1
How many seconds the transition should last. Note that this won't be extremely accurate - to make the effect smooth, it must ultimately depend on the actual frame rate of the app.
{function}callbackOptional
A function to execute when the transition is over

(time,
callback)
Fade out effect, gradually changing the opacity (alpha) of the sprite from 1 to 0. After fading out, the sprite is set to invisible.

Parameters:


{number}timeOptional, Default: 1
How many seconds the transition should last. Note that this won't be extremely accurate - to make the effect smooth, it must ultimately depend on the actual frame rate of the app.
{function}callbackOptional
A function to execute when the transition is over
()
Get the names of all images being used by this sprite and its animations

Returns:


{Array}
A list of image names

(name)
Get the animation object associated with a given animation name

Parameters:


{string}nameOptional
The name of the animation. If omitted, the current animation will be returned.

Returns:


{Animation}
The animation object
()
Get the active animation object for the sprite

Returns:


{Animation}
The active animation object for the sprite
()
Get the name of the active animation for the sprite

Returns:


{Animation}
The name of the active animation for the sprite
()
Get the current draw function of the sprite

Returns:


{Function}
The current draw function. Depending on the sprite's layer's render mode, this could be either a WebGL or a canvas-based draw function.
()
Get the current modifiers that are applied to the sprite

Returns:


{Array}
A list of active draw modifiers. See Sprite.setDrawModifiers for more details.
()
Get the area of the source image (expressed as a fraction of the source image size) that is being used to draw this sprite. If this wasn't modified with setImageArea(), by default the sprite uses the full image from (0, 0) to (1, 1).

Returns:


{{minX: number|minY: number|maxX: number|maxY: number}}
()
Get the name of the image being used

Returns:


{string}
The name of the image being used
()
Get the index of the sprite in its layer. For unsorted layers this matches the order in which the sprites were added to the layers, though for layers with sorting this may change every frame accoring to the sorting criterion.

Returns:


{number}
The index of the sprite in its layer. This can be -1 if the sprite has not been added to the layer yet.
()
Get the id of the sprite's layer

Returns:


{number}
The id of the sprite's layer
()
Get the current name of this sprite, if it was set with Sprite.setName()

Returns:


{string}
The name of this object

(searchAllLayers,
precision)
Get an array of objects overlapping this sprite

Parameters:


{boolean}searchAllLayersOptional
Whether to extend the search to all layers. This is false by default, meaning that only overlapping sprites on the same layer will be considered.
{string}precisionOptional
How accurately to search for overlaps. This can be 'axis-aligned' (which would consider the axis-aligned bounding box of the sprites); 'oriented', which takes into account the rotation of each sprite; or 'pixel' that does a (much slower) per-pixel test, discarding transparent pixels. Default is 'axis-aligned'

Returns:


{Array}
All the objects that are overlapping this sprite
()
Get the source code of the current pixel shader function for this sprite

Returns:


{string}
The contents of the current pixel shader function
()
Get a list of the custom shader uniforms for this sprite.

Returns:


{Object}
A copy of the object that was set in the last call to setPixelShader(), and has the format {name1: type1, name2: type2, ...}
()
Get the world space position of the sprite

Returns:


{Object}
An object with 'x' and 'y' field representing world space coordinates
()
Get the current rotation angle of the sprite

Returns:


{number}
The current rotation angle in radians. A positive value indicates a clockwise rotation
()
Get the current scale factor of the sprite, that is its size compared to the source image (or animation frame) size

Returns:


{{x: number|y: number}}
()
Get the parent scene object for this sprite (if any)

Returns:


{SceneObject}
The parent scene object
()
Get the screen space position and extents for this sprite

Returns:


{Object}
An object with the following layout: {extents: {x, y}, position {x,y}}
()
Get the world space size of the sprite

Returns:


{Object}
An object with 'x' and 'y' fields representing the world space size of the sprite
()
Get the sprite's sort point that is used in the calculations to determine whether the sprite should appear in front of other sprites in the same layer, according to the layer's sorting mode.

Returns:


{Object}
An object with 'x' and 'y' fields representing the sprite's sort point

(screenPosition)
Convert a screen space position into a world space offset relative to the sprite's world space position

Parameters:


{Object}screenPosition
An object with 'x' and 'y' fields representing the screen space position

Returns:


{Object}
An object with 'x' and 'y' fields representing the world space offset

(name)
Check whether the sprite has an animation that matches the given name

Parameters:


{string}name
The animation name

Returns:


{boolean}
Whether the sprite has an animation that matches the given name
()
Check whether a sprite is being forcefully drawn every frame

Returns:


{boolean}
()
Check whether the Sprite is currently visible on the screen

Returns:


{boolean}
Whether the Sprite is currently visible on the screen
()
Check whether the Sprite is using pixel-perfect mouse events, i.e. it discards mouse events on fully transparent pixels

Returns:


{boolean}
Whether pixel-perfect mouse events are enabled for this Sprite
()
Check whether the sprite is visible

Returns:


{boolean}
Whether the sprite is visible

(otherSprite,
precision)
Test to see whether this sprite overlaps another sprite

Parameters:


{Sprite}otherSprite
The other sprite to test
{string}precisionOptional
How accurate the test should be. This could be 'axis-aligned' (the default value when this parameter is omitted), which only considers the axis-aligned bounding boxes of both Sprites; 'oriented' which takes into account the rotations of both Sprites; or 'pixel' that does a (much slower) per-pixel test, discarding transparent pixels.

Returns:


{boolean}
Whether the two sprites are overlapping

(name,
direction)
Play an animation for this sprite

Parameters:


{string}name
The name of an animation that has previously been added with a call to 'addAnimation'
{string}directionOptional
The direction of the animation. It can be 'forward', 'reverse' or 'ping-pong' (which means forward and then reverse). Default is 'forward'
()
Send the sprite to the back of its layer. Note that if any sorting function (other than 'none') has been specified for the layer, when the sorting occurs it will override this operation


(otherSprite)
Move the sprite behind another sprite in the same layer. Note that if any sorting function (other than 'none') has been specified for the layer, when the sorting occurs it will override this operation

Parameters:


{Sprite}otherSprite
The sprite that should appear in front of this sprite
()
Resume playing an animation that had been stopped


(stringify,
propertiesToExclude)
Export this sprite to an object that can then be used to create a new sprite like this one (by passing the resulting object to the Sprite constructor).

Parameters:


{boolean}stringifyOptional
Whether the resulting object should be serialized to a JSON string. If this is set to true, this function returns a string representation of the sprite.
{Array}propertiesToExcludeOptional
An array of strings that contains the name of the properties of this Sprite object that you do NOT want to export.

Returns:


{object|string}
An object that represents the current sprite
()
Mark the area occupied by the sprite as dirty. Depending on the sprite's layer's properties, this operation may cause this and some other sprites to be redrawn for the next frame


(drawFunction)
Set a custom draw function for the sprite

Parameters:


{Function}drawFunction
The draw function to use for this sprite. Draw function are passed one parameter, which is the current HTML5 context object. Note that the it is assumed that the draw function will never draw anything outside the bounding box the sprite. Doing so may result in incorrect behavior.

(modifiers)
Set draw modifiers for this sprite. This is a simpler (although less flexible) way of setting draw functions for sprites, for some common cases.

Parameters:


{Array}modifiers
An array of modifiers. Each element is an object with a type field and (optionally) a set of parameters. Supported modifiers are:
  • {type: 'alpha', alpha: number}
  • {type: 'blink', timeOn: number, timeOff: number}
  • {type: 'fadeOpacity', start: number, end: number, time: number}
  • {type: 'flip'}
  • {type: 'mirror'}
  • {type: 'additive'}

(minX,
minY,
maxX,
maxY)
Set the area of the source image that should be used to draw this sprite. Numbers should be between 0 and 1, representing a fraction of the source image size.

Parameters:


{number}minX
The X coordinate of the left edge. Default is 0.
{number}minY
The Y coordinates of the top edge. Default is 0.
{number}maxX
The X coordinate of the right edge. Default is 1.
{number}maxY
The Y coordinate of the bottom edge. Default is 1.

(image,
updateSizeFromImage)
Set an image to use with the current sprite

Parameters:


{string}image
The file name of an image that has previously been loaded
{boolean}updateSizeFromImageOptional, Default: false
Whether to update the sprite size based on the image size

(index)
Set the sprite's index in its layer.

Parameters:


{number}index
The desired index of the sprite.

Returns:


{number}
The actual index of the sprite after attempting this operation. If the layer has N sprites, and you try to set the index to a number greater than N-1, the sprite will be moved at index N-1 instead. If the sprite hasn't been added to the layer yet, this function will return -1.

(layerId)
Set a new layer for the sprite

Parameters:


{number}layerId
The id of the new layer

(name)
Set a name for the sprite

Parameters:


{string}name
The name to set

(shaderSource,
shaderUniforms)
Set a custom pixel shader for this sprite. In addition, to the shader uniforms that you can pass as the second argument, the shader has access to some global uniforms / varyings:
  • uvAlphaTime: a vec4 where x is the u coordinate, y is the v coordinate, z is the current alpha level, w is the current app time
  • uDiffuseSampler: a 2d sampler with the current texture
Note that you can only specify the contents of the shader function, not the function itself. For reference, look at the result of Sprite.getPixelShader()

Parameters:


{string}shaderSourceOptional
The contents of a "main(void)" fragment shader function. If omitted or empty, the default pixel shader is used.
{object}shaderUniformsOptional
An object that specifies the name and type of custom shader uniforms that you want to use. For example {tintColor: 'vec4'}. Values will be retrieved from public properties of the Sprite using the same name. So in this example, make sure that your sprite has got a property called tintColor that is an array with 4 elements. Supported types are currently: float, vec2, vec3, vec4, int, ivec2, ivec3, ivec4 and sampler2D.

(positionX,
positionY)
Set the world space position of the sprite.

Parameters:


{number|Object}positionX
A coordinate for the horizontal axis, or an object with 'x' and 'y' fields representing world space coordinates
{number}positionYOptional
A coordinate for the vertical axis

(rotation)
Set a rotation angle for the sprite

Parameters:


{number}rotation
The rotation angle in radians. A positive value indicates a clockwise rotation

(sceneObject)
Set the parent scene object for the sprite. If there is an animation playing, this operation may trigger an 'onAnimationEnd' event for the old parent and an 'onAnimationStart' event for the new parent.

Parameters:


{SceneObject}sceneObject
The new parent scene object

(width,
height,
resetScaleFactor)
Set the world space size of the sprite

Parameters:


{number}width
The desired width of the sprite
{number}height
The desired height of the sprite
{boolean}resetScaleFactorOptional, Default: false
Whether to reset the scale factor to {x: 1, y: 1}. This only affects sprites that have a currently active animation with the autoResize property, and is used to tell the sprite that this size should be its default size, regardless of what any active autoresizing animation is doing.

(x,
y)
Set a sort point for the sprite. This will be used in the calculations to determine whether the sprite should appear in front of other sprites in the same layer, according to the layer's sorting mode.

Parameters:


{number}x
The offset on the X axis. This is relative to the sprite's width. A value of 1 means the full width of the sprite. This is typically between -0.5 and 0.5, and 0 by default.
{number}y
The offset on the Y axis. This is relative to the sprite's height. A value of 1 means the full height of the sprite. This is typically between -0.5 and 0.5, and 0 by default.

(toggle)
Show or hide a sprite

Parameters:


{boolean}toggle
Whether to show the sprite
()
Perform a simulation step for the sprite. This involves updating the sprite's animation, if there is one that is currently playing.
This function is called automatically by WADE, that aims to maintain a constant calling rate where possible (60Hz by default).

()
Stop the animation that is currently playing


(toggle)
Set the Sprite to use (or not use) pixel-perfect mouse events, i.e. discard mouse events on fully transparent pixels. By default, Sprites do not use pixel-perfect mouse events. Enabling this has implications for performance and memory usage.

Parameters:


{boolean}toggleOptional, Default: true
Whether to use pixel-perfect mouse events or not. If omitted or undefined, this parameter is assumed to be true.