Sprite Class
Sprite class creates game characters and manages their animation and movement. The sprite class do not mamange user events like pointer pressed / released etc. The user events are managed in GameControl class and all classes extended from this class.
Example:
class Character : Sprite
{
function init()
{
super.init();
// load image
this.image = Bitmap.fromFile("app://gfx/character.png");
// size of one frame
this.frameWidth = 27;
this.frameHeight = 32;
// create timer
this._createTimer();
}
function _createTimer()
{
// create timer (interval, repeat)
var timer = new Timer(200, true);
timer.onTick = function(sender)
{
// animate character
var self = this super;
self.nextFrame();
}
// start timer with 0 ms delay
timer.start(0);
}
}
// add character to scene or layer
var character = new Character({x: 100, y: 100});
this.add(character);
Item Index
Properties
Attributes
Methods
afterInit
() protected
Initialize properties onto default values
draw
canvas
Method to defines what is done if onDraw event is called. This method can be overwrite to draw something onto sprite. However, it is important to call super.draw(canvas) in overwriten method.
Parameters:
-
canvas
CanvasCurrent game canvas
init
() protected
Init sprite object instance. This method should be used as a class constructor in extended classes. However, it is important to call parent's init method (by super.init()) to ensure correct object initialization.
Example:
class Character : Sprite
{
function init()
{
super.init();
// load image
this.image = Bitmap.fromFile("app://gfx/character.png");
// size of one frame
....
}
...
}
nextFrame
rewind=true
Draw next frame in the sequence.
Parameters:
-
rewind=true
BooleanSet current sequence position to the begin if the sequence is at the end. Default value is true.
Example:
function init()
{
super.init();
// load image
this.image = Bitmap.fromFile("app://gfx/character.png");
// size of one frame
this.frameWidth = 27;
this.frameHeight = 32;
// create timer
this._createTimer();
}
// animate sprite
function _createTimer()
{
// create timer (interval, repeat)
var timer = new Timer(200, true);
timer.onTick = function(sender)
{
// animate character
var self = this super;
self.nextFrame();
}
// start timer with 0 ms delay
timer.start(0);
}
prevFrame
rewind
Draw next previous frame in the sequence.
Parameters:
-
rewind
BooleanSet current sequence position to the end if the sequence if sequence is at the beginning. Default value is true.
Example:
function init()
{
super.init();
// load image
this.image = Bitmap.fromFile("app://gfx/character.png");
// size of one frame
this.frameWidth = 27;
this.frameHeight = 32;
// create timer
this._createTimer();
}
// animate sprite
function _createTimer()
{
// create timer (interval, repeat)
var timer = new Timer(200, true);
timer.onTick = function(sender)
{
// animate character
var self = this super;
self.prevFrame();
}
// start timer with 0 ms delay
timer.start(0);
}
Properties
alpha
Integer
This property allows to change sprite's alpha level.
Example:
function hide() { // create animator var animator = new Animator({ transition : Animator.Transition.easeOut, // start up slowly and then quickly speed up at the end of the animation duration : 1500, // length of animation in miliseconds }); animator.addSubject(function(state) { // state starts from 1.0 to 0.0 var self = this super; self.alpha = (state*255).toInteger(); }) // play animator animator.reverse(); }
frameHeight
Integer
Set frame height There can be more frames into bitmap in image property, which is automatically divided into separate frames according to frame width and height.
Example:
var sprite = new Sprite({
image : Bitmap.fromFile("app://gfx/character.png");
frameWidth : 27;
frameHeight : 32;
});
frameWidth
Integer
Set frame width. There can be more frames into bitmap in image property, which is automatically divided into separate frames according to frame width and height.
Example:
var sprite = new Sprite({
image : Bitmap.fromFile("app://gfx/character.png");
frameWidth : 27;
frameHeight : 32;
});
image
Bitmap | String
Instance of Bitmap or string with location of bitmap, used to draw sprite. The image can contains more frames, which are automatically divided into frames acording to frame width or height.
Example:
var sprite = new Sprite({
x: 100,
y: 100,
image: img
});
Paint
Paint
Object used for final decoration. The Paint object allows to apply various effect like alpha level, mask or color filter onto sprite.
Example:
// fade out
function hide()
{
this.paint = new Paint();
// create animator
var animator = new Animator({
transition : Animator.Transition.easeOut, // start up slowly and then quickly speed up at the end of the animation
duration : 1500, // length of animation in miliseconds
});
animator.addSubject(function(state) { // state starts from 1.0 to 0.0
var self = this super;
self.paint.alpha = (state*255).toInteger();
})
// play animator
animator.reverse();
}
sequence
Array
Sequence of the frames. The sequence defines order of frames in animation. Frames can be gradually drawn by nextFrame or prevFrame.
Example:
// define all sequences
this._rest = [0];
this._run = [0, 1, 2, 3, 4, 5, 6, 7];
this._end = [8, 9, 10, 11, 12];
this._jumpUp = [13];
this._jumpDown = [14];
this._win = [16, 17, 18, 19, 20, 21, 22, 23 ];
// set current sequence
this.sequence = this._run;