Class Wade_drawFunctions
Constructor Attributes | Constructor Name and Description |
---|---|
The drawFunctions module contains a set of draw functions to use with WADE.
|
Method Attributes | Method Name and Description |
---|---|
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.
|
Class Detail
Wade_drawFunctions()
The drawFunctions module contains a set of draw functions to use with WADE.
A common usage example is:
sprite.setDrawFunction(wade.drawFunctions.solidFill_('green'));
A common usage example is:
sprite.setDrawFunction(wade.drawFunctions.solidFill_('green'));
Method Detail
{function}
additive_(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} originalDrawCall Optional
- The draw function to use
- Returns:
- {function} The draw function to use with Sprite.setDrawFunction()
alpha_(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
blink_(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
{Function}
boundingBox_(axisAlignedColor, orientedColor, originalDrawCall)
Draw the bounding boxes of the sprite
- Parameters:
- {string} axisAlignedColor Optional
- The color to use for the axis-aligned bounding box. Default is 'red'
- {string} orientedColor Optional
- The color to use for the oriented bounding box. Default is 'blue'
- {Function} originalDrawCall Optional
- The original draw call of the sprite
- Returns:
- {Function} The draw function to use with Sprite.setDrawFunction()
{Function}
composite_(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} originalDrawCall Optional
- The original draw call of the sprite
- Returns:
- {Function} The draw function to use with Sprite.setDrawFunction()
{Function}
drawRect_(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
{function}
fadeOpacity_(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} originalDrawCall Optional
- The draw function to use
- {function} callback Optional
- A function to execute when the transition is over
- Returns:
- {function} The draw function to use with Sprite.setDrawFunction()
{Function}
flip_(originalDrawCall)
Draws a flipped image of the sprite (mirrored vertically)
- Parameters:
- {Function} originalDrawCall Optional
- The original draw call of the sprite
- Returns:
- {Function} The draw function to use with Sprite.setDrawFunction()
{Function}
gradientFill_(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
{Function}
grid_(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} lineWidth Optional
- The width of the lines, in world units. Default is 1
- Returns:
- {Function} A draw function to use with a Sprite object
{Function}
mirror_(originalDrawCall)
Draws a mirror image of the sprite
- Parameters:
- {Function} originalDrawCall Optional
- The original draw call of the sprite
- Returns:
- {Function} The draw function to use with Sprite.setDrawFunction()
{Function}
radialGradientCircle_(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} fadeOutColor Optional
- 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
{Function}
resizeOverTime_(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()
{Function}
resizePeriodically_(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()
{Function}
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
- 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} callback Optional
- A function to execute when the transition is complete
- Returns:
- {Function} A draw function to use with a Sprite object
{Function}
solidFill_(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
{Function}
solidFillInt_(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
{Function}
transparent_()
Make a sprite transparent (i.e. - do not draw it)
- Returns:
- {Function} The draw function to use with Sprite.setDrawFunction()