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.
new gamvas.Animation(name, [image], [frameWidth], [frameHeight], [numberOfFrames], [fps]);
name | A unique identifier as name |
image | A Image object that holds the frames of the animation (optional) |
framwWidth | The width of a single frame (optional) |
frameHeight | The height of a single frame (optional) |
numberOfFrames | The number of frames the animation has (optional) |
fps | The speed of the animation in frames per second (optional) |
gamvas. | Class for animated sprites |
Variables | |
name | The name of the animation. |
width | The width of a single frame in pixels |
height | The height of a single frame in pixels |
numberOfFrames | The the frame count of the animation |
currentFrame | The index of the current frame |
position | The current position as gamvas.Vector2D |
center | The center of rotation of the animation |
rotation | The rotation in radians |
scaleFactor | The scale factor (1 = not scaled, < 1 = smaller, > 1 = bigger) |
Functions | |
setFile | Sets a image as source of a animation |
setFPS | Set the speed of the animation in frames per second |
setRotation | Set certain rotation of the animation in radians |
rotate | Rotate the animation |
setPosition | Set the position of a animation |
move | Move the animation |
setScale | Set a certain scale factor |
scale | Scale the animation |
setScaleXY | Set a different scale for x and y axis |
setCenter | Set the center for an Animation. |
draw | Draw the animation according to its position, rotation and scale settings |
setFrameList | Allows to set a list of frames that are considdered to be the animation |
this.position
The current position as gamvas.Vector2D
setFile: function( image, frameWidth, frameHeight, numberOfFrames, fps )
Sets a image as source of a animation
image | a JavaScript Image object holding the frames |
frameWidth | the with of a single frame |
frameHeight | the height of a single frame |
numberOfFrames | the number of frames of the animation |
fps | the speed of the animation in fps |
setRotation: function( r )
Set certain rotation of the animation in radians
r | the rotation in radians |
gamvas.Animation.rotate http://en.wikipedia.org/wiki/Radians
rotate: function( r )
Rotate the animation
r | the amount to rotate the animation in radians |
gamvas.Animation.setRotation http://en.wikipedia.org/wiki/Radians
setCenter: function( x, y )
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);
x/y | the center, as seen of the upper left corner of the object |
setFrameList: function( fl )
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]);
fl | a array of frame indexes for the animation |
The name of the animation.
this.name
The width of a single frame in pixels
this.width
The height of a single frame in pixels
this.height
The the frame count of the animation
this.numberOfFrames
The index of the current frame
this.currentFrame
The current position as gamvas.Vector2D
this.position
The center of rotation of the animation
this.center
The rotation in radians
this.rotation
The scale factor (1 = not scaled, < 1 = smaller, > 1 = bigger)
this.scaleFactor
Sets a image as source of a animation
setFile: function( image, frameWidth, frameHeight, numberOfFrames, fps )
Set the speed of the animation in frames per second
setFPS: function( fps )
Set certain rotation of the animation in radians
setRotation: function( r )
Rotate the animation
rotate: function( r )
Set the position of a animation
setPosition: function( x, y )
Move the animation
move: function( x, y )
Set a certain scale factor
setScale: function( s )
Scale the animation
scale: function( s )
Set a different scale for x and y axis
setScaleXY: function( x, y )
Set the center for an Animation.
setCenter: function( x, y )
Draw the animation according to its position, rotation and scale settings
draw: function( t )
Allows to set a list of frames that are considdered to be the animation
setFrameList: function( fl )