Class Sprite
Constructor Attributes | Constructor Name and Description |
---|---|
Sprite(image, layerId)
A Sprite object is used to display images.
|
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.
|
|
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
|
|
containsScreenPoint(point)
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
|
|
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
|
|
getName()
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
|
|
getSize()
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 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
|
|
setIndexInLayer(index)
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
|
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:
- 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
- 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).
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