Parallax / On Darlingjs

Here is short article about creating parallax effect upon game engine darlingjs

What is the parallax?

In our case parallax is an effect of perception that takes place when 3D environment is translated into 2D display surface. For example we have an observer with 'view port' (2D) and some objects on different distance from the observer in 3D. If the observer takes left or right step than visually objects located nearby will move faster than objects located further away from the observer. If an object is placed very far from the observer for a short period of time it will look as if it doesn't move at all, like the sun for the observer on the Earth.

If you've found a misspelling please select it with your mouse and press Ctrl+Enter to send it to me so I can fix it fast as possible.

Here is an excellent visualization of parallax (from wikipedia)



To implement such behaviour in darlingjs we need one component to mark depth (ng3D) and another component-marker to show which component should apply this transformation (ngConvert3DtoParallax).

Example of implementation from ng3D module

	/**
	* Component of position in 3D environment
	*/
	m.$c('ng3D', {
	x: 0.0,
	y: 0.0,
	z: 0.0
	});
	/**
	* Component of parallax effect
	*/
	m.$c('ngParallax', {
	//basis of parallax effect
	//1 is original plane, 0.5 - further, 0.25 - twice times further
	basis: 0.5
	});
	/**
	* Marker for converting 3D to tune parallax property
	*/
	m.$c('ngConvert3DtoParallax');
	/**
	* ngConvert3DtoParallax
	*
	* Use z to calculate basis of parallax effect.
	* Need recalculate each time z has changed
	*
	*/
	m.$s('ngConvert3DtoParallax', {
	$require: ['ng3D', 'ngConvert3DtoParallax'],
	$addEntity: ['$entity', function($entity) {
	if (!$entity.ngParallax) {
	$entity.$add('ngParallax');
	}
	$entity.ngParallax.basis = 1 / (1 + $entity.ng3D.z);
	$entity.$remove('ngConvert3DtoParallax');
	}]
	});
	/**
	* ngSimpleParallax
	*
	* Apply parallax effect to calculate 2D position ng2D
	* by 3D position (ng3D), parallax basis (ngParallax)
	* and look at position (ng2DViewPort).
	*
	*/
	m.$s('ngSimpleParallax', {
	$require: ['ng3D', 'ngParallax'],
	$addEntity: ['$entity', function($entity) {
	if (!$entity.ng2D) {
	$entity.$add('ng2D');
	}
	}],
	$update: ['$entity', 'ng2DViewPort', function($entity, ng2DViewPort) {
	var ng3D = $entity.ng3D;
	var ng2D = $entity.ng2D;
	var basis = $entity.ngParallax.basis;
	ng2D.x = ng2DViewPort.lookAt.x +
	basis * (ng3D.x - ng2DViewPort.lookAt.x);
	ng2D.y = ng2DViewPort.lookAt.y +
	basis * (ng3D.y - ng2DViewPort.lookAt.y);
	}]
	});

view raw parallax.js hosted with ❤ by GitHub

Parallax & Cyclic background

More interesting effects you can get from applying parallax to cyclic background. But you should use special 3D version of cyclic system to run it properly. Because we need to compensate parallax effect and use a more wide pattern than for 2D cyclic.

Example of Usage

Here is a quick example of using such techniques.

	(function(darlingjs, darlingutil) {
	'use strict';
	var width = 640,
	height = 480;
	//Create game world
	var world = darlingjs.w('theCyclicWorld', [
	'ngFlatland',
	'ngCyclic',
	'ng3D',
	'ngPixijsAdapter',
	'ngStats',
	'ngPerformance'
	]);
	// ---------------------------------------------------------------
	//
	// Systems adding section
	//
	// ---------------------------------------------------------------
	//any system add some abilities
	//start log performance
	world.$add('ngPerformanceStartLog');
	//start log statistics
	world.$add('ngStatsBegin');
	//define viewport properties
	var ng2DViewPort = world.$add('ng2DViewPort', {
	lookAt: {
	x: width / 2, y: height / 2
	},
	width: width,
	height: height
	});
	//visualization
	world.$add('ngPixijsStage', {
	domId: 'gameView',
	width: width,
	height: height,
	useWebGL: true
	});
	//create sprites
	world.$add('ngPixijsSpriteFactory');
	//update positions
	world.$add('ngPixijsUpdateCycle');
	//update position based on viewport
	world.$add('ngPixijsViewPortUpdateCycle');
	//convert ng3D properties to ngParallax.basis
	world.$add('ngConvert3DtoParallax');
	//convert ngParallax and ng3D to ng2D
	world.$add('ngSimpleParallax');
	//support cyclic of ng3D position (use ngCyclic)
	world.$add('ngMarkIfOutsideOfTheViewPortVertical3D');
	world.$add('ngMarkIfOutsideOfTheViewPortHorizontal3D');
	world.$add('ngMarkIfInsideOfTheViewPortVertical3D');
	world.$add('ngMarkIfInsideOfTheViewPortHorizontal3D');
	world.$add('ng3DCyclicLayer');
	//defined custom system for rambling viewport
	var time = 0,
	speed = 2;
	world.$s('ramblingViewport', {
	//every frame we just update position of viewport
	$update: ['ng2DViewPort', function(ng2DViewPort) {
	ng2DViewPort.lookAt.x += speed * Math.cos(0.0007 * time);
	ng2DViewPort.lookAt.y += speed * Math.sin(0.0003 * time);
	time++;
	}]
	});
	//end of collecting statistics
	world.$add('ngStatsEnd', {
	domId: 'gameView'
	});
	//end of collecting performance
	world.$add('ngPerformanceStopLog');
	// ---------------------------------------------------------------
	//
	// Entities adding section
	//
	// ---------------------------------------------------------------
	// just feel square with entities
	var xStep = 16,
	yStep = 16,
	icount = Math.ceil(width / xStep) + 13,
	jcount = Math.ceil(height / yStep) + 10,
	pixels = [
	'blue-pixel.jpg',
	'green-pixel.jpg',
	'yellow-pixel.jpg',
	'purple-pixel.jpg'];
	for (var j = 0; j < jcount; j++) {
	for (var i = 0; i < icount; i++) {
	var depth = Math.cos( 2 * Math.PI * j / jcount) *
	Math.cos( 2 * Math.PI * i / icount);
	world.$e('node_' + i + "_" + j, {
	ng3D: {
	x: xStep * i,
	y: yStep * j,
	z: 0.1 + 0.2 * depth
	},
	ngConvert3DtoParallax: true,
	ngCyclic: {
	group: 'nodes',
	patternWidth: xStep * icount,
	patternHeight: yStep * jcount
	},
	ngSprite : {
	name: pixels[Math.floor(i) % 4],
	spriteSheetUrl: 'assets/spritesheet.json',
	anchor: {
	x: 0.0,
	y: 1.0
	}
	}
	});
	}
	}
	//run world
	world.$start();
	})(darlingjs, darlingutil);

view raw infinite-surface-with-parallax.js hosted with ❤ by GitHub

PS

Also for visualization I've used pixi.js javascript rendering engine, that supports WebGL and Canvas. In upcoming articles I'm going to describe some technical details about using Pixi.js in Darlingjs with ngPixijsAdapter module.

Don't forget that darlingjs is a modular game engine so you can implement your own rendering engine or use any other existing engine, so sooner or later somebody (maybe you ;) ) will add EaselJS, FlashJS and other rendering engine implementations.

See you!