|
Our goal is to create a background of the night sky with shinning stars. These stars will move from the right to the left side of the screen and will be randomly generated. To achieve the shining effect of the stars, theirs sizes will be smoothly resized pretending an animation.
Graphics
Before we can start writing the code, we have to prepare the graphics that will be used. We used an editor to create the stars and these have been created in 20 different sizes represented by 20 frames. All these will be used to achieve the shinning effect of the stars.
Image: animation frames (Normally, stars have transparent background. However, for the sake of this tutorial they have been placed on the gray background.)
Implementation
The background is created as a separate layer which is added to the game scene. Usually the games consist from several scenes - one for menu, one for high score screen and one or more for the game itself. Every scene can contain several layers and every layer can contain several sprites (scene does not have to contain layers and they can contain sprites directly). The background layer created in this sample can be easily added into all game scenes where needed.
Stars
Every star is created as an instance of the Star class that is derived from the Sprite class. The Sprite class creates a game characters or objects. It provides features for basic animation and does not support user’s events. All objects of Star class use the previously mentioned image, which is divided into separate frames according to frameWidth and frameHeight properties. In the init method a timer responsible for animating the frames and the movement of the stars is created.
Example: creating the Star class
class Star : Sprite
{
function init()
{
super.init(); // image with frames
this.image = GFX.star;
this.frameWidth = 50;
this.frameHeight = 50;
// first frame (start from random position)
this.frame = rand(19);
this._speed = 0;
this._scene = null; // start animation timer
this._timer = new Timer(50, true);
this._timer.onTick = function()
{
var self = this super;
// move to next frame
self.frame += 1;
if (self.frame > 19)
self.frame = 0; // move star on x axis
self.x -= self.speed;
// remoe star if it is out of the screen
if (self.x < -1*self.frameWidth) {
// stop timer
this.dispose();
// remove star from the layer
self.scene.detach(self);
}
}
this._timer.start();
}
Background layer
The init method is used to create the first stars that will appear on the screen once the application is started.
Example: creating the background layer
class Background : Layer
{
function init()
{
super.init();
// min and max gap between two starts
this._minGap = 25;
this._maxGap = 100;
this._speed = 80; /* px / second */ this._lastX = 0;
// generate stars which appears on the screen when the game starts
while (this._lastX < System.width) {
this._lastX += rand(this._maxGap) + this._minGap;
this.add(new Star({x : this._lastX, y : rand(System.height) + 10, speed : this._speed, scene : this}));
}
// add stars latery (during the game run)
this._addStar();
}
The rest of the stars that appear during the game run are added by the _addStar method where the random distance from the latest star is calculated. The _addStar method is called recursively.
Example: adding the stars
function _addStar()
{
// distance of the next star
var distance = this._minGap + rand(this._maxGap - this._minGap);
this._lastX += distance;
// add star when it is needed
var t = new Timer(1, 1);
t.onTick = function()
{
this super.add(new Star({x : this super._lastX, y : rand(System.height) + 10, speed : this super._speed, scene : this}));
this super._addStar();
}
// time = distance / speed (distance is distance bfrom the last star)
t.start((distance / (this._speed * 1.0 )/ 1000 /* seconds -> miliseconds */).toInteger())
}
Summary
After reading the guide above, you should be able to add a never ending scrolling background to your games. For education purposes a simple night sky background was created. Of course, the image can be easily changed.
|