CanvasAnimation

CanvasAnimation

Controls the animation of an image onto a CanvasObject

Constructor

new CanvasAnimation(source, canvasObject, fromRect, xopt, yopt, widthopt, heightopt)

Parameters:
Name Type Attributes Default Description
source HTMLImg

The source image to draw from
canvasObject CanvasObject

The CanvasObject to draw to
fromRect Rectangle

The Rectangle that defines where on the source to draw from, if none is passed a Rectangle with 0,0, width, height is created.
x Number <optional>
 0

The x position of the CanvasAnimation
y Number <optional>
 0

The y position of the CanvasAnimation
width Number <optional>
 0

The width of the CanvasAnimation
height Number <optional>
 0

The height of the CanvasAnimation

Members

_canvas :CanvasObject

The CanvasObject to draw to

Type:

_source :Image

The source image to draw from

Type:
  • Image

animationIndexOrder

animationSpecs :Object

Each animation is stored in the animationSpecs Object. Each property of animationSpecs is an animation name "left" "right" etc... holding an array of x and y indexes that define the animations frames. Each index is multiplied by the CanvasAnimation width and height to get the exact location in the source to draw from.

The first value in each animation Array is the all frames y index if onlyHorizontalAnimations is set. Then an inner array with the frame indexes. And in the case of onlyHorizontalAnimations being set, the inner Array would only have x indexes. By default onlyHorizontalAnimations is not set and the all frames y index is not used, but still present.

You can set the animationSpecs Object directly or you can use the defineAnimation method.

The animate method references the animation in animationSpecs using the currentAnimation property.

Type:
  • Object
Example
animationSpecs = {
        "left":[0,[1,2,1,3,1,4]],
        "right":[0,[4,2,4,3,4,4]]
    };

currentAnimation :String

The current animation to be displayed

Type:
  • String

fromHeightOffset :Number

An optional offset added to the height of the draw from area.

Type:
  • Number

fromRect :Rectangle

The rectangle used to define where to draw the current frame of animation from. The animate method updates this rectangle based on the currentAnimation.

Type:

fromWidthOffset :Number

An optional offset added to the width of the draw from area.

Type:
  • Number

fromXOffset :Number

An optional offset added to where to draw horizontally from.

Type:
  • Number

fromYOffset :Number

An optional offset added to where to draw vertically from.

Type:
  • Number

height :Number

The height of the CanvasAnimation

Type:
  • Number

toPoint :MoverPoint

The MoverPoint to draw the animation to.

Type:

width :Number

The width of the CanvasAnimation

Type:
  • Number

x :Number

The x position of the CanvasAnimation

Type:
  • Number

y :Number

The y position of the CanvasAnimation

Type:
  • Number

Methods

animate(throttopt)

Cycles through the frames of the animation as defined by animationSpecs and the currentAnimation. call blit to display the result onto the CanvasObject defined during construction.

Parameters:
Name Type Attributes Default Description
thrott Number <optional>
 1

Speed of the animation. 0.2 would be slow, 3 or higher would be fast. 1 is the default.

blit(ropt, popt, igfopt)

Draws the animation onto the CanvasObject given during construction.

Parameters:
Name Type Attributes Default Description
r Rectangle <optional>

optional Rectangle defining where to draw from. Default is fromRect (defined during construction and during animate calls)
p MoverPoint <optional>

optional MoverPoint defining where to draw to. Default is toPoint (this.x, this.y)
igf Boolean <optional>
 false

Default is false, if true fromWidthOffset and fromHeightOffset will not be part of positioning calculations. For example, if your colliding at 16x16 and yet the animation is 32x32 you would have defined a fromWidthOffset/fromHeightOffset of 16, and by default the animation would therefore be placed in the middle offset by 16. If you don't want this behavior pass 1 for igf.

changeDirectionAnimation(left, right, up, down, keepAniIndexopt, noIdleopt, keepUpDownopt)

More advanced but still general changing of animation based on directions given. When all directions are false/0 'idle' will be applied to the animation. For example if the last animation was 'right' and then no input is given, this method would set the animation to 'idleright'.

This method will also compute 'upleft' 'upright' and so on for when two inputs are given.

Other classes such as the BasicNinja Class and WeaponHoldingAttacker Class add functionality to this method via the addedAnimationChanges property. In those cases that method happens after this method has changed the animation.

Parameters:
Name Type Attributes Default Description
left Boolean
right Boolean
up Boolean
down Boolean
keepAniIndex Boolean <optional>
 false

When true lastAnim would be updated, by default this method does not update lastAnim
noIdle Boolean <optional>
 false

When true idle will not be applied to the animation
keepUpDown Boolean <optional>
 false

By default if idle is being applied, 'up' and 'down' are stripped so that only idleleft or idleright happen, if you want idleup idledown also pass true for this. By default this method is set up for platformers, that would never be idle in the air, for top down generally changeLeftRightUpDownAnimation is the method that would be used to change the animation.

changeFaceAnimation(toFace, keepAniIndexopt)

Change the basic direction animation to face towards the given Object. If the given Object is above the CanvasAnimation it would change it to 'up' If the given Object is left of the CanvasAnimation it would change it to 'left'

Parameters:
Name Type Attributes Default Description
toFace MoverSkeleton

A MoverSkeleton or Object with x,y,width and height.
keepAniIndex Boolean <optional>
 false

If true lastAnim will be updated, by default this method does not update lastAnim.

changeLeftRightUpDownAnimation(left, right, up, down, dontKeepAniIndexopt)

Basic change of animation based on left,right,up,down input. Changes the currentAnimation property to 'left' 'right' 'up' or 'down' based on params given.

Parameters:
Name Type Attributes Default Description
left Boolean
right Boolean
up Boolean
down Boolean
dontKeepAniIndex Boolean <optional>
 false

If set to true the lastAnim property would not be updated, otherwise, by default, lastAnim holds the last animation that was used before the currentAnimation.

defineAnimation(animationName, arrayOfXYIndexValues, yIndexopt)

Used to define a new animation.

Parameters:
Name Type Attributes Default Description
animationName String

The name of the animation being defined.
arrayOfXYIndexValues Array

An Array of the x,y index values that define each frame of the animation. For example defineAnimation("left", [2,4,3,5,3,7,2,4,5,9]) would create a "left" animation. The array is read as x,y index pairs, with x being multipled by the CanvasAnimations width, and y by height to get the position in the source to draw from. To change the animation you set the currentAnimation property and then call the animate method. To display the animation you call the blit method.
yIndex Number <optional>
 0

Optional param for when onlyHorizontalAnimations has been set.

delayedAnimateAndBlit(throttopt, milliSecondDelay, animationopt, clearBeforeBlittopt)

Changes and blits the animation after milliSecondDelay amount of time.

Parameters:
Name Type Attributes Default Description
thrott Number <optional>
 1

Throttle to use for the animate call
milliSecondDelay Number

Amount of time in milliseconds to wait before calling animate and blit
animation String <optional>

The currentAnimation to change to. Otherwise currentAnimation is used. this sets currentAnimation.
clearBeforeBlitt Boolean <optional>
 false

If true the canvas would be cleared before the blit

finishedCurrentAnimation() → {Boolean}

Returns true when the currentAnimation has gone through all its frames.

For example in a game loop you could test for if(myCanvasAnimation.finishedCurrentAnimation()) { ... }

Returns:
Type
Boolean

getDirectionOfAnimation(currentAni, onlyLeftRightopt, onlyUpDownopt) → {String}

Returns the direction string of the current animation. 'left' 'right' 'up' or 'down'.

Parameters:
Name Type Attributes Default Description
currentAni String

The currentAnimation or animation name you want to get the named direction from.
onlyLeftRight Boolean <optional>
 false
onlyUpDown Boolean <optional>
 false
Returns:
Type
String

getPosition(addedXopt, addedYopt) → {MoverPoint}

Returns a MoverPoint reference to the position of the CanvasAnimation.

Parameters:
Name Type Attributes Default Description
addedX Number <optional>
 0

An optional amount to add to the x position
addedY Number <optional>
 0

An optional amount to add to the y position
Returns:
Type
MoverPoint

init(source, canvasObject, fromRect, xopt, yopt, widthopt, heightopt)

Used as a super method for possible extension of this class.

Parameters:
Name Type Attributes Default Description
source HTMLImg

The source image to draw from
canvasObject CanvasObject

The CanvasObject to draw to
fromRect Rectangle

The Rectangle that defines where on the source to draw from
x Number <optional>
 0

The x position of the CanvasAnimation
y Number <optional>
 0

The y position of the CanvasAnimation
width Number <optional>
 0

width The width of the CanvasAnimation
height Number <optional>
 0

height The height of the CanvasAnimation

matchPosition(mover, xoffopt, yoffopt)

Match x and y to the mover given.

Parameters:
Name Type Attributes Default Description
mover MoverSkeleton

The mover to match positions with
xoff Number <optional>
 0

optional x offset
yoff Number <optional>
 0

optional y offset

resetCurrentAnimation()

Resets the current animation to the beginning frame.