Forums » Help » Parallax background scrolling appearing above tiles and entities.

I am using the following ParallaxLayer Class by @jerev:

http://impactjs.com/forums/help/main-menu-w-parallax-scrolling/page/1#post20575

I am finding that the parallax layer appears above all entities and tiles. I&039;ve tried to set the #zIndex property to -1 in the ParallaxLayer hoping that would fix the issue, but it doesn't.

If someone could lead me in the right direction as to how to make it appear in the background that would be great.

Thanks in advance.

Thanks to snooze82 and jerev over IRC, they suggested a fix for the issue with the parallax appearing above entities and the tile layers.

By modifying the lib/impact/game.js like so:

draw: function(){
	if( this.clearColor ) {
		ig.system.clear( this.clearColor );
	}
	
	// This is a bit of a circle jerk. Entities reference game._rscreen 
	// instead of game.screen when drawing themselfs in order to be 
	// "synchronized" to the rounded(?) screen position
	this._rscreen.x = ig.system.getDrawPos(this.screen.x)/ig.system.scale;
	this._rscreen.y = ig.system.getDrawPos(this.screen.y)/ig.system.scale;
	
	var mapIndex;
	for( mapIndex = 0; mapIndex < this.backgroundMaps.length; mapIndex++ ) {
		var map = this.backgroundMaps[mapIndex];
		if( map.name && map.name == "parallax" ) {
			// Draw parallax layer.
			if (ig.game && ig.game.parallax) {
				ig.game.parallax.draw();
			}
		}
		if( map.foreground ) {
			// All foreground layers are drawn after the entities
			break;
		}
		map.setScreenPos( this.screen.x, this.screen.y );
		map.draw();
	}
	
	
	this.drawEntities();
	
	
	for( mapIndex; mapIndex < this.backgroundMaps.length; mapIndex++ ) {
		var map = this.backgroundMaps[mapIndex];
		map.setScreenPos( this.screen.x, this.screen.y );
		map.draw();
	}
},

Notice the map.name checking for a placeholder layer called "parallax"? This was added in Weltmeister below the main layer and above a background layer.

So basically ig.game.parallax.draw(); is drawn before entities and wherever the placeholder is placed within Weltmeister.

Obviously removing the original this.parallax.draw(); in the main game draw() method was required now that it&039;s drawn within the #game.js.

It works perfectly now! Thanks guys.