Game2D Movement

Sample Movement demonstrates how to move a object with Moscrif. It shows movement of a cloud in front of the background. Key words: Game, Movement, Sprite, Bitmap

Show screenshots (4)

Sample Movement contains Background and Cloud. Both of them are instances of the Sprite class.

Background is a simple Sprite object with its own draw method.

//load background as game sprite
this.bg = new Sprite({image:"app://gfx/bg.png"});
this.bg.draw = function(canvas)
{
//override sprite draw, and draw simple image on Canvas
canvas.drawBitmap(this.image,0,0);
}

Cloud is a simple Sprite object, with extension of Cloud.directAngle and Cloud.speed property. Cloud.directAngle changes the direction of the cloud and Cloud.speed manages its speed. Cloud movement is done within system tick and cloud tick definition. Once the cloud reaches the end of the screen device, it starts again from the start position.

//load cloud image and set his position on screen
    this.cloud = new Sprite({image:"app://gfx/cloud.png"});
    this.cloud.x = 0;
    this.cloud.y = 0;
    this.cloud.directionAngle = 60;
    this.cloud.speed = 0.05;
    this.cloud.onProcess = function(sender)
    {
        var self = this super;
        //Check time, which passed from last refresh
        var time = System.tick - self.tick;
        //set new system tick
        self.tick = System.tick;         //formula s = v * t, move cloud in x and y co-ordinates
        self.cloud.x += Math.round(Math.cos(self.cloud.directionAngle/180.0 * Math.PI) * self.cloud.speed * time).toInteger();
        self.cloud.y += Math.round(Math.sin(self.cloud.directionAngle/180.0 * Math.PI) * self.cloud.speed * time).toInteger();         //if the cloud get on the end of scene, sets coordinates on the position [0, 0]
        if (self.cloud.x >= self.bg.width || self.cloud.y >= self.bg.height) {
            self.cloud.x = 0;
            self.cloud.y = 0;
        }     }