Cannon.Display.Sprite
Implements the Cannon.ChildSystem and the Cannon.DisplayObject.
The Sprite object offers an easy way to draw images to the canvas. You can use it to display a single image or to loop through an animation.
This page only covers the properties and function that are particular to the sprite, but the actual object will also contain all properties and functions from ChildSystem and DisplayObject.
Contains the images
x position of the top left corner of the image
y position of the top left corner of the image
An optionnal fixed width for the sprite. Default is null.
An optionnal fixed height for the sprite. Default is null.
Contains the coordinates of the sprites center in the form [x,y].
loader:Cannon.LoadingSet
A loading set that handles the preloading of all the sprites images.
Keeps track of the images loading state.
The index of the frame that is currently displayed.
Wether the sprite is automatically looping through the images or not
- frames:Array
- x:Float
- y:Float
- width:Float : optionnal
- height:Float : optionnal
Creates a new Sprite.
The first argument, frames, is an array containing all the images for the sprite. However, if you wish to display only a single image, you don't need to pass an array as a parameter, the image alone will do.
In any case, images can be in the form of a string, in which case the given string is the path to the image. Images can also be HTMLImageElements, HTMLCanvasElements or HTMLVideoElements - which means you can use a Sprite object to draw the content of an image tag, the content of another canvas or the content of a video element.
If x and y parameters are omited, the image will be position at {0,0}.
WIdth and height parameters should only be passed if you wish to force the drawing of images at a certain size. Otherwise, images will be drawn at their natural size.
Displays the next frame of the sprite.
Displays the previous frame of the sprite.
Automaticaly plays each frame of the sprite after the other.
Srops the animation on the currently displayed frame.
- frame:Integer
Goes to the desired frame and plays the animation from there on.
- frame:Integer
Goes to the desired frame and stops there.