Forums » Help » Layer zindex

I just want to change the main layer's zindex to prevent some odd overlapping. Searched the forums and documentation but couldn't quite find a clear answer.

Problem is I need zindexing for my entities. Some of them are large and should be in the background, those entities over overriding my main layer tiles.

Does this help:

Entity.zIndex = n

http://impactjs.com/documentation/class-reference/entity

With the Game's default draw() method, all entities are on one "layer". You can't have some entities behind a background layer and others in front of it.

Have a look at the draw() method in lib/impact/game.js - it just draws all background layers and entities. You could overwrite this method in your Game class to go through the .entities array twice: draw all entities with a special flag in the first pass, draw your background layer, then draw all entities that don't have the flag.

I'm familiar with zIndexing in . I've got an interactive background like Smash Brothers right now. So the background is more like a bunch of entities than a flat tiled sheet.

Based upon Dominic's suggestion I think I'll modify the tile sets into unmovable entity chunks on the screen (I just need two of them). Should be a simple workaround.

Could anybody expand on this .. ive been messinga round with zindex for the last day and just found this post :-( I need to display entities on different distances, moving at different speeds and different zindexes?

You mean like a parallax effect?

yes i have multiple level parallax and need entites to be drawn on the different levels so the player can interact with them and they can go infront and behind different scenery levels...

So this is the routine to sort the entities?

		// Entities
		this.entities = [];
		this.namedEntities = {};
		for( var i = 0; i < data.entities.length; i++ ) {
			var ent = data.entities[i];
			this.spawnEntity( ent.type, ent.x, ent.y, ent.settings );
		}
		this.sortEntities();

and this is the order of the draw?

//this is drawing the background
		for( mapIndex = 0; mapIndex < this.backgroundMaps.length; mapIndex++ ) {
			var map = this.backgroundMaps[mapIndex];
			if( map.foreground ) {
				// All foreground layers are drawn after the entities
				break;
			}
			map.setScreenPos( this.screen.x, this.screen.y );
			map.draw();
		}
//this is drawing the entities ...

		for( var i = 0; i < this.entities.length; i++ ) {
			this.entities[i].draw();
		}
// this is the foreground layers

		for( mapIndex; mapIndex < this.backgroundMaps.length; mapIndex++ ) {
			var map = this.backgroundMaps[mapIndex];
			map.setScreenPos( this.screen.x, this.screen.y );
			map.draw();
		}
	},

So i guess i need to add a variable to define which layer the entity is on in weitmeister/entity definition:

var entlayer = value;

Then i separate the entities into entlayer 1; entlayer 2, entlayer 3? How do i do that in the above function?

Then how would i draw entlayer1 before the background?
entlayer2 infront of background?
entayer3 infront of foreground layer 1
etc etc

i see that that the foreground layers would also need some flags, which could only be entered via weistmeister?

forlayer1
forlayer2

this would allow the entities to be drawn in the correct way on the different foreground layers as well?


CAN anyone give me some pointers towards this ... im really struggling?

You could add a key/value pair for entities in Weltmeister. I.e.:
drawBeforeLayer:3

Normally all Entities are on the same layer. To draw them on several different layers, you need a custom draw() method. Something like this (untested):

draw: function(){
	if( this.clearColor ) {
		ig.system.clear( this.clearColor );
	}
	
	this._rscreen.x = Math.round(this.screen.x * ig.system.scale)/ig.system.scale;
	this._rscreen.y = Math.round(this.screen.y * ig.system.scale)/ig.system.scale;
	
	// Loop through all bg maps
	for( var l = 0; l < this.backgroundMaps.length; l++ ) {
		
		// Loop through all entities. Check if their drawBeforeLayer
		// property matches the current layer and Draw it
		for( var e = 0; e < this.entities.length; e++ ) {
			var ent = this.entities[e];
			if( 
				typeof(ent.drawBeforeLayer) != 'undefined' &&
				ent.drawBeforeLayer == l
			) {
				ent.draw();
			}
		}
		
		// Draw the background map
		var map = this.backgroundMaps[mapIndex];
		map.setScreenPos( this.screen.x, this.screen.y );
		map.draw();
	}
	
	// Draw all entities that don't have the drawBeforeLayer property
	for( var e = 0; e < this.entities.length; e++ ) {
		var ent = this.entities[e];
		if( typeof(ent.drawBeforeLayer) == 'undefined' ) {
			ent.draw();
		}
	}
},

Looping through all entities for each background layer isn't that elegant though. It shouldn't be much of a performance problem, but you could separate your entities into different layers on level load, instead of doing it for each frame in draw().

trying to get this to work results in these errors:

this._rscreen.x = Math.round(this.screen.x * ig.system.scale)/ig.system.scale;
this._rscreen.y = Math.round(this.screen.y * ig.system.scale)/ig.system.scale;

Uncaught TypeError: Cannot set property 'x' of undefined
ig.Game.ig.Class.extend.drawlib/impact/game.js:190
ig.Game.inject.drawlib/impact/debug/graph-panel.js:16
proto.(anonymous function)impact.js:365
ig.Game.extend.drawmain.js:96
window.ig.Class.extend.prototype.(anonymous function)impact.js:394
ig.Game.extend.runmain.js:107
ig.System.ig.Class.extend.runlib/impact/system.js:101
ig.System.inject.runlib/impact/debug/menu.js:14
proto.(anonymous function)impact.js:365
(anonymous function)impact.js:54

Please re-download Impact. This was a known problem.

More here: http://impactjs.com/forums/help/undefined-is-not-an-object-evaluating-ig-game-rscreen-x

Cheers .. i re downloaded and got mapindex errrors .. i tried to fudge the old map index code but just made it worse:

lib/impact/game.js:225Uncaught ReferenceError: mapIndex is not defined
ig.Game.ig.Class.extend.drawlib/impact/game.js:225
ig.Game.inject.drawlib/impact/debug/graph-panel.js:16
proto.(anonymous function)impact.js:373
ig.Game.extend.drawmain.js:96
window.ig.Class.extend.prototype.(anonymous function)impact.js:402
ig.Game.extend.runmain.js:107
ig.System.ig.Class.extend.runlib/impact/system.js:101
ig.System.inject.runlib/impact/debug/menu.js:14
proto.(anonymous function)impact.js:373
(anonymous function)impact.js:62

almost got it working now, thx!!!!