Constructors

- Wade.drawFunctions

Constructor Summary

The drawFunctions module contains a set of draw functions to use with WADE.

Functions Summary

additive_
(originalDrawCall)
Draw a sprite with additive blending.
alpha_
(alpha,
draw)
Draw a sprite multiplying its original transparency by a specified value
blink_
(timeOn,
timeOff,
draw)
Draw a blinking sprite, using the specified draw function
boundingBox_
(axisAlignedColor,
orientedColor,
originalDrawCall)
Draw the bounding boxes of the sprite
composite_
(operation,
originalDrawCall)
Draws using the specified global composite operation (see http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp for reference)
drawRect_
(color,
borderWidth)
Draw a rectangle (borders only).
fadeOpacity_
(alphaStart,
alphaEnd,
time,
originalDrawCall,
callback)
Draw a sprite, gradually changing its transparency over time.
flip_
(originalDrawCall)
Draws a flipped image of the sprite (mirrored vertically)
gradientFill_
(gradientDirection,
colors)
Fill the sprite's bounding box with a linear color gradient
grid_
(numCellsX,
numCellsY,
color,
lineWidth)
Draw a grid with equally-spaced lines
mirror_
(originalDrawCall)
Draws a mirror image of the sprite
radialGradientCircle_
(colors,
fadeOutColor)
Draw a circle with a radial gradient.
resizeOverTime_
(startWidth,
startHeight,
endWidth,
endHeight,
time,
originalDrawCall,
callback)
Draw a sprite that changes size over time
resizePeriodically_
(startWidth,
startHeight,
endWidth,
endHeight,
period,
originalDrawCall)
Draw a sprite that changes size periodically over time
solidFade_
(r0,
g0,
b0,
a0,
r1,
g1,
b1,
a1,
numFrames,
callback)
Fill the sprite's bounding box with a color that transitions to another color over a specified number of frames
solidFill_
(color)
Fill the sprite's bounding box with a solid color.
solidFillInt_
(color)
Fill the sprite's bounding box with a solid color, restricting all coordinates to integer numbers.
Make a sprite transparent (i.e.

Constructor Details

()
The drawFunctions module contains a set of draw functions to use with WADE.
A common usage example is:
sprite.setDrawFunction(wade.drawFunctions.solidFill_('green'));

Function Details


(originalDrawCall)
Draw a sprite with additive blending. In WebGL mode it will use a separate blend function (SRC_ALPHA, ONE, SRC_ALPHA, ONE)

Parameters:


{function}originalDrawCallOptional
The draw function to use

Returns:


{function}
The draw function to use with Sprite.setDrawFunction()

(alpha,
draw)
Draw a sprite multiplying its original transparency by a specified value

Parameters:


{number}alpha
The opacity to use when drawing the sprite
{function}draw
The draw function to use

(timeOn,
timeOff,
draw)
Draw a blinking sprite, using the specified draw function

Parameters:


{number}timeOn
How many seconds the sprite should be displayed
{number}timeOff
How many seconds the sprite should be hidden
{function}draw
The draw function to use

(axisAlignedColor,
orientedColor,
originalDrawCall)
Draw the bounding boxes of the sprite

Parameters:


{string}axisAlignedColorOptional
The color to use for the axis-aligned bounding box. Default is 'red'
{string}orientedColorOptional
The color to use for the oriented bounding box. Default is 'blue'
{Function}originalDrawCallOptional
The original draw call of the sprite

Returns:


{Function}
The draw function to use with Sprite.setDrawFunction()

(operation,
originalDrawCall)
Draws using the specified global composite operation (see http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp for reference)

Parameters:


{string}operation
The global composite operation to use
{Function}originalDrawCallOptional
The original draw call of the sprite

Returns:


{Function}
The draw function to use with Sprite.setDrawFunction()

(color,
borderWidth)
Draw a rectangle (borders only).

Parameters:


{string}color
An HTML color string, for example '#ffffff', '#fff', 'white', or 'rgba(255, 255, 255, 1)'
{number}borderWidth
The width of the border

Returns:


{Function}
A draw function to use with a Sprite object

(alphaStart,
alphaEnd,
time,
originalDrawCall,
callback)
Draw a sprite, gradually changing its transparency over time.

Parameters:


{number}alphaStart
The initial opacity, between 0 (transparent) and 1 (fully opaque)
{number}alphaEnd
The final opacity
{number}time
How many seconds the transition should last. Note that this won't be extremely accurate, as it ultimately depends on the actual frame rate of the app.
{function}originalDrawCallOptional
The draw function to use
{function}callbackOptional
A function to execute when the transition is over

Returns:


{function}
The draw function to use with Sprite.setDrawFunction()

(originalDrawCall)
Draws a flipped image of the sprite (mirrored vertically)

Parameters:


{Function}originalDrawCallOptional
The original draw call of the sprite

Returns:


{Function}
The draw function to use with Sprite.setDrawFunction()

(gradientDirection,
colors)
Fill the sprite's bounding box with a linear color gradient

Parameters:


{Object}gradientDirection
An object whose 'x' and 'y' fields represent the gradient's direction. Note that this has to be a unit vector.
{Array}colors
An array of strings representing HTML colors. The array must contain at least 2 elements

Returns:


{Function}
A draw function to use with a Sprite object

(numCellsX,
numCellsY,
color,
lineWidth)
Draw a grid with equally-spaced lines

Parameters:


{number}numCellsX
The number of horizontal cells
{number}numCellsY
The number of vertical cells
{string}color
A string representing an HTML color
{number}lineWidthOptional
The width of the lines, in world units. Default is 1

Returns:


{Function}
A draw function to use with a Sprite object

(originalDrawCall)
Draws a mirror image of the sprite

Parameters:


{Function}originalDrawCallOptional
The original draw call of the sprite

Returns:


{Function}
The draw function to use with Sprite.setDrawFunction()

(colors,
fadeOutColor)
Draw a circle with a radial gradient. The radius of the circle is calculated based on the size of the sprite's bounding box, and is half of the smaller dimension.

Parameters:


{Array}colors
An array of strings representing HTML colors. The array must contain at least 2 elements
{string}fadeOutColorOptional
the outer color to fade out to. Default is rgba(0, 0, 0, 0), which is transparent black.

Returns:


{Function}
A draw function to use with a Sprite object

(startWidth,
startHeight,
endWidth,
endHeight,
time,
originalDrawCall,
callback)
Draw a sprite that changes size over time

Parameters:


startWidth
The initial width
startHeight
The initial height
endWidth
The final width
endHeight
The final height
time
The time it takes to change size, in seconds
originalDrawCall
The original draw function of the sprite
callback
A function to execute when it's finished changing size

Returns:


{Function}
The draw function to use with Sprite.setDrawFunction()

(startWidth,
startHeight,
endWidth,
endHeight,
period,
originalDrawCall)
Draw a sprite that changes size periodically over time

Parameters:


startWidth
The initial width
startHeight
The initial height
endWidth
The final width
endHeight
The final height
period
The time it takes to change size (from initial to final or viceversa), in seconds
originalDrawCall
The original draw call of the sprite

Returns:


{Function}
The draw function to use with Sprite.setDrawFunction()

(r0,
g0,
b0,
a0,
r1,
g1,
b1,
a1,
numFrames,
callback)
Fill the sprite's bounding box with a color that transitions to another color over a specified number of frames

Parameters:


{number}r0
The red component of the first color. Valid values are integers between 0 and 255 included
{number}g0
The green component of the first color. Valid values are integers between 0 and 255 included
{number}b0
The blue component of the first color. Valid values are integers between 0 and 255 included
{number}a0
The alpha (opacity) component of the first color. Valid values are numbers between 0 and 1
{number}r1
The red component of the second color. Valid values are integers between 0 and 255 included
{number}g1
The green component of the second color. Valid values are integers between 0 and 255 included
{number}b1
The blue component of the second color. Valid values are integers between 0 and 255 included
{number}a1
The alpha (opacity) component of the second color. Valid values are numbers between 0 and 1
{number}numFrames
The duration of the transition between two colors, espressed as a frame count
{Function}callbackOptional
A function to execute when the transition is complete

Returns:


{Function}
A draw function to use with a Sprite object

(color)
Fill the sprite's bounding box with a solid color.

Parameters:


{string}color
An HTML color string, for example '#ffffff', '#fff', 'white', or 'rgba(255, 255, 255, 1)'

Returns:


{Function}
A draw function to use with a Sprite object

(color)
Fill the sprite's bounding box with a solid color, restricting all coordinates to integer numbers. This may be needed for the drawing to work on some specific browsers, such as Chrome for Android

Parameters:


{string}color
An HTML color string, for example '#ffffff', '#fff', 'white', or 'rgba(255, 255, 255, 1)'

Returns:


{Function}
A draw function to use with a Sprite object
()
Make a sprite transparent (i.e. - do not draw it)

Returns:


{Function}
The draw function to use with Sprite.setDrawFunction()