Scrolling Parallax Images

Parallax is a 3D effect that is achieved using scrolling 2D images. Instead of using just one background image, a scene's background can be comprised of several overlaid images. Parallax is achieved if the foreground image scrolls fastest and each image that represents a depth that is further away from the viewer scrolls progressively slower, as shown in the example below.

Example of a parallax background (Run Example).

scrolling_parallax_images.js

/* Author: Derek O Reilly, Dundalk Institute of Technology, Ireland.             */
/* There should always be a javaScript file with the same name as the html file. */
/* This file always holds the playGame function().                               */
/* It also holds game specific code, which will be different for each game       */





/******************** Declare game specific global data and functions *****************/
/* images must be declared as global, so that they will load before the game starts  */
let skyImage = new Image();
skyImage.src = "images/scrolling_background_sky.png";
let middleImage = new Image();
middleImage.src = "images/scrolling_background_middle.png";
let foregroundImage = new Image();
foregroundImage.src = "images/scrolling_background_foreground.png";
/******************* END OF Declare game specific data and functions *****************/







/* Always have a playGame() function                                     */
/* However, the content of this function will be different for each game */
function playGame()
{
    /* We need to initialise the game objects outside of the Game class */
    /* This function does this initialisation.                          */
    /* This function will:                                              */
    /* 1. create the various game game gameObjects                   */
    /* 2. store the game gameObjects in an array                     */
    /* 3. create a new Game to display the game gameObjects          */
    /* 4. start the Game                                                */


    /* Create the various gameObjects for this game. */
    /* This is game specific code. It will be different for each game, as each game will have it own gameObjects */

    gameObjects[0] = new ScrollingBackgroundImage(skyImage, 30);
    gameObjects[1] = new ScrollingBackgroundImage(middleImage, 40);
    gameObjects[2] = new ScrollingBackgroundImage(foregroundImage, 50);

    // make the canvas wider for this example
    document.getElementById("gameCanvas").style.width = "1000px";

    /* END OF game specific code. */

    /* Always create a game that uses the gameObject array */
    let game = new CanvasGame();

    /* Always play the game */
    game.start();


    /* If they are needed, then include any game-specific mouse and keyboard listners */
}

In this example, we have three overlaid images, each moving at different speeds

    gameObjects[0] = new ScrollingBackgroundImage(skyImage, 30);
    gameObjects[1] = new ScrollingBackgroundImage(middleImage, 40);
    gameObjects[2] = new ScrollingBackgroundImage(foregroundImage, 50);