Friday, August 17, 2012

Scrolling Background: Some Explanations


Scrolling background

I created a canvas with coloured background. Below is the CSS:

     canvas {
                position:fixed;
                left:0px;
                top:0px;
                background:#B1EDE7;
            }


This is one of the background that I used.

Using JavaScript, I drew the same background twice. The first one is placed on the canvas, and the other one is placed just outside the canvas.

When one of the background has moved outside the canvas (x <= 3 - room_width), it will be transferred back to x = 320, which is the width of the canvas. (I am used to Game Maker. That's why the variable is named as "room_width")


                //make the background scrolling - bgbukit
                if (bgbukit_x <= 3 - room_width) {
                    bgbukit_x = room_width;
                    ctx.drawImage(bg, bgbukit_x, y);
                } else {
                    ctx.drawImage(bg, bgbukit_x, y);
                }
                bgbukit_x += bgbukit_hspeed;
                if (bgbukit2_x <= 3 - room_width) {
                    bgbukit2_x = room_width;
                    ctx.drawImage(bg, bgbukit2_x, y);
                } else {
                    ctx.drawImage(bg, bgbukit2_x, y);
                }
                bgbukit2_x += bgbukit_hspeed;
                y += dy;


- "bukit" is a Malay word for hill :-)