Sprite
Sprite is a basic game object, which is used to create 2D games. Its main properties are image, position and size. It represents objects, which are displayed on the screen and they can move and interact among themselves. More about Sprite can be found here.
In this article we'll show how to use frames to animate objects. At first we need to clarify, what frames actually are.
Frames
Image: Frames example
You can see that we can split an image to more subimages. It is done by using properties frameWidth, frameHeight and frame. FrameWidth and frameHeight determine size of one subimage. We can describe just subimages, which have the same size. Now we can choose one by using property frame. Each frame has a number, an identifier, which starts at 0 and it is increased by 1.
Example: Create barrel
var barrel = new Sprite({image: this._barrelImg, frameWidth: 46, frameHeight: 60, x:x, y: y});
// add barrel to the scene
this.add(barrel);
onProcess
OnProcess event is called once per application loop and usually moves and interacts with other objects. You can see here how it is done.
Example: Create bullet
function _createBullet()
{
// create bullet
var bullet = new Sprite({image: this._bulletImg, x: System.width/2, y: this.tank.height});
// set onProcess function
bullet.onProcess = function() {
var self = this super;
// move bullet
this.y+=10;
// detect collisions with barrels
for (var barrel in self.barrels) {
// if this shot is in collision with barrel
if (this.intersectsBounds(barrel))
// destroy barrel
barrel.destroy();
}
// if this bullet is out of scene, it will destroy itself
if (this.y - this._anchorY > System.height) {
self.detach(this);
}
}
// add bullet to the scene
this.add(bullet);
}
Timer
We have showed how to define an onProcess event, which is directed by system not suitable to direct animation. If we want to make synchronized animation in time, it is good to use Timer, which we can be sheduled as needed.
Timer is a native object. When creating we have to define interval in miliseconds at which to raise the onTick event and how many times will be executed. Finally, we run timer by method start.
Now we use mentioned objects and properties to create animated barrel, which explodes at contact with a bullet. After animation it destroys itself.
Example: Create barrel
function _createBarrel(x, y)
{
var barrel = new Sprite({image: this._barrelImg, frameWidth: 46, frameHeight: 60, x:x, y: y});
// define our own destroy function, which we will call at collision with bullet
barrel.destroy = function() {
// create timer
var timer = new Timer(80, 7); // (sleep, repeat)
timer.onTick = function(sender) {
this super.nextFrame(false); // set next frame without rewind
}
// start timer with 0 ms delay
timer.start(0);
// set onProcess function
this.onProcess = function() {
// if it is the last frame
if (this.frame == this.sequence.length-1) {
// we return 3 level up
var self = this super super;
// remove from scene
self.detach(this);
// remove from our array
self.barrels.removeByValue(this);
}
}
}
// add barrel to the scene and to our array too
this.add(barrel);
this.barrels.push(barrel);
}
Here you can see that creating timer and register onProcess event are inside destroy function, which is called at the contact with the bullet. Next interesting thing is a method called nextFrame. This method increases property frame by 1. This is a more safer alternative and allows frame rewind.
Summary
In this article, we have showed how to create and animate Sprite objects. We used frames, which is easier to work with when implementing series of images. Then we explained how to use onProcess event and Timer and we showed practical illustration using these objects to animate barrel explosion.
|