Graphic.Sprite Class
The Sprite class provide methods to draw sprites on a context. the aim of the sprites object is to be added to a Layer or to be use directly with a graphical context by invoking the draw method of the Sprite.
If many sprites with same image are added to te scene, they should use only one (shared) Image instance.
A good way to reduce number of files, and so loading time, is to put many sprite images in one file.
The imageRect property is a good way to display only a part of the image.
var mySprite = new TW.Graphic.Sprite({
image: myImage
});
mySprite.draw(canvasContext);
Constructor
Graphic.Sprite
-
[params]
Parameters:
-
[params]Object optionalparams is given to GraphicObject constructor.
-
[image]Image optionalimage source displayed
-
[imageRect]Object optional-
[x]Number optional -
[y]Number optional -
[width]Number optional -
[height]Number optional
-
-
Item Index
Methods
draw
-
context
This method allow you to draw the sprite on a context.
Parameters:
-
contextObjectthis parameter must be a valid canvas context, otherwise the behavior of the draw method is unspecified.
notifyParentChange
()
protected
This method notify the parent that a change has been done, and that it should clear his cache.
rotate
-
angle
This method allow you to rotate the Graphical object around the center point of the GraphicalObject.
Parameters:
-
angleNumberrepresent the angle of rotation, it's expressed in degree.
scale
-
x -
y
this method allow you to do a scale on the GraphicObject.
Parameters:
-
xNumberthis is the x scale factor
-
yNumberthis is the y scale factor
setAttr
-
attrs
Setter availlable for updating attibuts and correctly clear the caches. You can set all attributes supported by this instance (see the GraphicObject constructor for common available properties)
Parameters:
-
attrsObjectGraphicObject attributs. See the constructor for more details.
Example:
object.setAttr({
width: 20,
height: 20
});
object.setAttr({
pos: {
x: 0,
y: 0
}
});
skew
-
a -
b
This method allow you to do a skew transform on the GraphicObject.
Parameters:
-
aNumberthe factor of skew on the y axis
-
bNumberthe factor of skew on the x axis
translate
-
x -
y
This method allow you to translate the GraphicalObject, Internally this method modify the GraphicObject's matrix.
Parameters:
-
xNumberthis is the translation scalar of the x axis.
-
yNumberthis is the translation scalar of the y axis.
Properties
alpha
Number
value of opacity, between 0.0 (fully transparent) and 1.0 (opaque)
centerPoint
Object
default center of all matrix transformations.
values are exprimed depending on the size of the object. 0;0 is the up-left corner.
Sub-properties:
-
xObject -
yObject
height
Number
image
Image
image to display.
Note: this property should be modified only with setAttr.
imageRect
Object
rectangle source from image to display.
If you specify it you can used just a subImage of the current image to use. It is useful for the spritesheets for example where you only want to draw a specific area of the image.
Note: this property should be modified only with setAttr.
Sub-properties:
-
xNumber -
yNumber -
widthNumber -
heightNumber
matrix
Matrix
matrix applied to this object before draw.
parent
Layer
parent containing this object.
width
Number
x
Number
position on X axis
y
Number
position on Y axis
zIndex
Number
zIndex, used to determine the drawing order. Hight zIndex are drawn first.