Classes


Class Sprite

Class Summary
Constructor Attributes Constructor Name and Description
 
Sprite(image, layerId)
A Sprite object is used to display images.
Method Summary
Method Attributes Method Name and Description
 
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.
 
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
 
Check whether the sprite contains a given screen space point
 
drawToImage(virtualPath, replace, offset, transform, compositeOperation)
Draw a sprite to an image associated with a virtual path.
 
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
 
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
 
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 visible
 
overlapsSprite(otherSprite)
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
 
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
Class Detail
Sprite(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} image Optional
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} layerId Optional, 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,
    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.
Method Detail
addAnimation(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} name Optional
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} dontPlay Optional
Don't play the animation automatically, even if no other animations are present

alwaysDraw(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} toggle Optional
Whether to draw the sprite every frame. If omitted or undefined, this parameter is assumed to be true.

bringToFront()
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

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

{Sprite} clone()
Clone the sprite
Returns:
{Sprite} A copy of the sprite

{boolean} containsScreenPoint(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

drawToImage(virtualPath, replace, offset, transform, compositeOperation)
Draw a sprite to an image associated with a virtual path. 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} replace Optional
Whether to replace the existing image at the virtual path (if it exists), or draw on top of it
{Object} offset Optional
An object with 'x' and 'y' fields representing the offset to use when drawing this sprite onto the image
{Object} transform Optional
An object with 6 parameters: 'horizontalScale', 'horizontalSkew', 'verticalSkew', 'verticalScale', 'horizontalTranslate', 'verticalTranslate'
{string} compositeOperation Optional
A string describing an HTML5 composite operation

fadeIn(time, callback)
Fade in effect, gradually changing the opacity (alpha) of the sprite from 0 to 1
Parameters:
{number} time
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} callback Optional
A function to execute when the transition is over

fadeOut(time, callback)
Fade out effect, gradually changing the opacity (alpha) of the sprite from 1 to 0
Parameters:
{number} time
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} callback Optional
A function to execute when the transition is over

{Array} getAllImageNames()
Get the names of all images being used by this sprite and its animations
Returns:
{Array} A list of image names

{Animation} getAnimation(name)
Get the animation object associated with a given animation name
Parameters:
{string} name Optional
The name of the animation. If omitted, the current animation will be returned.
Returns:
{Animation} The animation object

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

{Animation} getCurrentAnimationName()
Get the name of the active animation for the sprite
Returns:
{Animation} The name of the active animation for the sprite

{Function} getDrawFunction()
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.

{Array} getDrawModifiers()
Get the current modifiers that are applied to the sprite
Returns:
{Array} A list of active draw modifiers. See Sprite.setDrawModifiers for more details.

{{minX: number|minY: number|maxX: number|maxY: number}} getImageArea()
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}}

{string} getImageName()
Get the name of the image being used
Returns:
{string} The name of the image being used

{number} getIndexInLayer()
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.

{number} getLayerId()
Get the id of the sprite's layer
Returns:
{number} The id of the sprite's layer

{string} getName()
Get the current name of this sprite, if it was set with Sprite.setName()
Returns:
{string} The name of this object

{Array} getOverlappingObjects(searchAllLayers, precision)
Get an array of objects overlapping this sprite
Parameters:
{boolean} searchAllLayers Optional
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} precision Optional
How accurately to search for overlaps. This can be either 'axis-aligned' (which would consider the axis-aligned bounding box of the sprites), or 'oriented', which takes into account the rotation of each sprite. Default is 'axis-aligned'
Returns:
{Array} All the objects that are overlapping this sprite

{string} getPixelShader()
Get the source code of the current pixel shader function for this sprite
Returns:
{string} The contents of the current pixel shader function

{Object} getPixelShaderUniforms()
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, ...}

{Object} getPosition()
Get the world space position of the sprite
Returns:
{Object} An object with 'x' and 'y' field representing world space coordinates

{number} getRotation()
Get the current rotation angle of the sprite
Returns:
{number} The current rotation angle in radians. A positive value indicates a clockwise rotation

{{x: number|y: number}} getScaleFactor()
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}}

{SceneObject} getSceneObject()
Get the parent scene object for this sprite (if any)
Returns:
{SceneObject} The parent scene object

{Object} getScreenPositionAndExtents()
Get the screen space position and extents for this sprite
Returns:
{Object} An object with the following layout: {extents: {x, y}, position {x,y}}

{Object} getSize()
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

{Object} getSortPoint()
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

{Object} getWorldOffset(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

{boolean} hasAnimation(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

{boolean} isAlwaysDrawing()
Check whether a sprite is being forcefully drawn every frame
Returns:
{boolean}

{boolean} isVisible()
Check whether the sprite is visible
Returns:
{boolean} Whether the sprite is visible

{boolean} overlapsSprite(otherSprite)
Test to see whether this sprite overlaps another sprite
Parameters:
{Sprite} otherSprite
The other sprite to test
Returns:
{boolean} Whether the two sprites are overlapping

playAnimation(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} direction Optional
The direction of the animation. It can be 'forward', 'reverse' or 'ping-pong' (which means forward and then reverse). Default is 'forward'

pushToBack()
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

putBehindSprite(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

resumeAnimation()
Resume playing an animation that had been stopped

{object|string} 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).
Parameters:
{boolean} stringify Optional
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} propertiesToExclude Optional
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

setDirtyArea()
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

setDrawFunction(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.

setDrawModifiers(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'}

setImageArea(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.

setImageFile(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} updateSizeFromImage Optional, Default: false
Whether to update the sprite size based on the image size

{number} setIndexInLayer(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.

setLayer(layerId)
Set a new layer for the sprite
Parameters:
{number} layerId
The id of the new layer

setName(name)
Set a name for the sprite
Parameters:
{string} name
The name to set

setPixelShader(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: 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} shaderSource Optional
The contents of a "main(void)" fragment shader function. If omitted or empty, the default pixel shader is used.
{object} shaderUniforms Optional
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 and ivec4.

setPosition(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} positionY Optional
A coordinate for the vertical axis

setRotation(rotation)
Set a rotation angle for the sprite
Parameters:
{number} rotation
The rotation angle in radians. A positive value indicates a clockwise rotation

setSceneObject(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

setSize(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} resetScaleFactor Optional, 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.

setSortPoint(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.

setVisible(toggle)
Show or hide a sprite
Parameters:
{boolean} toggle
Whether to show the sprite

step()
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).

stopAnimation()
Stop the animation that is currently playing

Documentation generated by JsDoc Toolkit 2.4.0 on Tue Jul 12 2016 07:54:40 GMT+0100 (BST)