Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
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).
/* 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);
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.