gamvas.Animation

Description

Class for animated sprites

The image for the animation is a JavaScript Image object, that holds all the frames with a certain width in one image.

For example, if you have a animation with 10 frames sized 64x64, you could make a image of 640x64 and put the 10 images side by side, or you could make 2 rows with 5 images on each and make a 320x128 image.

Constructor

new gamvas.Animation(name, [image], [frameWidth], [frameHeight], [numberOfFrames], [fps]);

Parameters

nameA unique identifier as name
imageA Image object that holds the frames of the animation (optional)
framwWidthThe width of a single frame (optional)
frameHeightThe height of a single frame (optional)
numberOfFramesThe number of frames the animation has (optional)
fpsThe speed of the animation in frames per second (optional)
Summary
gamvas.AnimationClass for animated sprites
Variables
nameThe name of the animation.
widthThe width of a single frame in pixels
heightThe height of a single frame in pixels
numberOfFramesThe the frame count of the animation
currentFrameThe index of the current frame
positionThe current position as gamvas.Vector2D
centerThe center of rotation of the animation
rotationThe rotation in radians
scaleFactorThe scale factor (1 = not scaled, < 1 = smaller, > 1 = bigger)
Functions
setFileSets a image as source of a animation
setFPSSet the speed of the animation in frames per second
setRotationSet certain rotation of the animation in radians
rotateRotate the animation
setPositionSet the position of a animation
moveMove the animation
setScaleSet a certain scale factor
scaleScale the animation
setScaleXYSet a different scale for x and y axis
setCenterSet the center for an Animation.
drawDraw the animation according to its position, rotation and scale settings
setFrameListAllows to set a list of frames that are considdered to be the animation

Variables

name

this.name

The name of the animation.  Must be unique within all animations of a actor

width

this.width

The width of a single frame in pixels

height

this.height

The height of a single frame in pixels

numberOfFrames

this.numberOfFrames

The the frame count of the animation

currentFrame

this.currentFrame

The index of the current frame

position

this.position

The current position as gamvas.Vector2D

center

this.center

The center of rotation of the animation

rotation

this.rotation

The rotation in radians

scaleFactor

this.scaleFactor

The scale factor (1 = not scaled, < 1 = smaller, > 1 = bigger)

Functions

setFile

setFile: function(image,
frameWidth,
frameHeight,
numberOfFrames,
fps)

Description

Sets a image as source of a animation

Parameters

imagea JavaScript Image object holding the frames
frameWidththe with of a single frame
frameHeightthe height of a single frame
numberOfFramesthe number of frames of the animation
fpsthe speed of the animation in fps

setFPS

setFPS: function(fps)

Description

Set the speed of the animation in frames per second

Parameters

fpsThe animation speed in frames per second

setRotation

setRotation: function(r)

Description

Set certain rotation of the animation in radians

Parameters

rthe rotation in radians

See

gamvas.Animation.rotate http://en.wikipedia.org/wiki/Radians

rotate

rotate: function(r)

Description

Rotate the animation

Parameters

rthe amount to rotate the animation in radians

See

gamvas.Animation.setRotation http://en.wikipedia.org/wiki/Radians

setPosition

setPosition: function(x,
y)

Description

Set the position of a animation

Parameters

x/ythe position of the animation in pixels

See

gamvas.Animation.move

move

move: function(x,
y)

Description

Move the animation

Parameters

x/ythe pixels to move the animation

See

gamvas.Animation.setPosition

setScale

setScale: function(s)

Description

Set a certain scale factor

Parameters

sthe scale value (1 = no scale, < 1 = smaller, > 1 = bigger)

See

gamvas.Animation.scale gamvas.Animation.setScaleXY

scale

scale: function(s)

Description

Scale the animation

Parameters

sthe scale factor (< 0 = shrink, > 0 = enlarge)

See

gamvas.Animation.setScale

setScaleXY

setScaleXY: function(x,
y)

Description

Set a different scale for x and y axis

Parameters

xthe scale of the x axis (1 = no scale, < 1 = smaller, > 1 = bigger)
ythe scale of the y axis (1 = no scale, < 1 = smaller, > 1 = bigger)

See

gamvas.Animation.setScale

setCenter

setCenter: function(x,
y)

Description

Set the center for an Animation.  If you have a round object for example with a size of 64 by 64 pixels and you want to rotate it around the center, you would use myObject.setCenter(32, 32);

Parameters

x/ythe center, as seen of the upper left corner of the object

draw

draw: function(t)

Description

Draw the animation according to its position, rotation and scale settings

Parameters

tthe time since last redraw

setFrameList

setFrameList: function(fl)

Description

Allows to set a list of frames that are considdered to be the animation

Immagine a animation of a jumping ball, where on the first frame (0) it is squashed as it hits the ground, then jumps up, slows down and falls back down where it is squased again.

You would want to play the ground hitting frames fast, while you would want to play the slow down frames a bit slower, so assuming your animation had 5 frames, you would simple repeat * them, by setting a framelist of setFrameList([0, 1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 3, 3, 3, 2, 2, 1]);

Parameters

fla array of frame indexes for the animation
this.name
The name of the animation.
this.width
The width of a single frame in pixels
this.height
The height of a single frame in pixels
this.numberOfFrames
The the frame count of the animation
this.currentFrame
The index of the current frame
this.position
The current position as gamvas.Vector2D
A 2D vector class
this.center
The center of rotation of the animation
this.rotation
The rotation in radians
this.scaleFactor
The scale factor (1 = not scaled, < 1 = smaller, > 1 = bigger)
setFile: function(image,
frameWidth,
frameHeight,
numberOfFrames,
fps)
Sets a image as source of a animation
setFPS: function(fps)
Set the speed of the animation in frames per second
setRotation: function(r)
Set certain rotation of the animation in radians
rotate: function(r)
Rotate the animation
setPosition: function(x,
y)
Set the position of a animation
move: function(x,
y)
Move the animation
setScale: function(s)
Set a certain scale factor
scale: function(s)
Scale the animation
setScaleXY: function(x,
y)
Set a different scale for x and y axis
setCenter: function(x,
y)
Set the center for an Animation.
draw: function(t)
Draw the animation according to its position, rotation and scale settings
setFrameList: function(fl)
Allows to set a list of frames that are considdered to be the animation
Close