Forums » Impact Engine » Foreground layers

It would be great to be able to put layers in front of the entity layer. This allows for some very nice effects like walking in tall grass, passing behind bushes or waterfalls or into doorways.

Since I have the source, I decided to try it myself. It is about 14 lines of changes in game.js. I did it by looking for the word 'foreground' in the layer name and keeping a separate foregroundMaps list. I bet you could do it in a better way that integrates with Weltmeister.

I'm happy to post or upload my changes once you've given us the go ahead to post engine modifications someplace.

-josh

Would definately be interested in this code. Possibly for hosting files these could be placed in the "private" licence holder only forum? That dominic mentioned adding to his todo list on IRC

That's a good Idea to implement in Impact! I think it would be better to introduce a new "Foreground" Flag in Weltmeister for layers, than discerning them by name. For your own game however, that's perfectly reasonable.

You don't have to change the source of lib/impac/game.js though. When you subclass your game from ig.Game you can just overwrite the .draw() and loadLevel() methods. E.g. (untested code ahead):

MyGame = ig.Game.extend({
	foregroundMap: null,
	
	loadLevel: function( data ) {		
		// Load the level as usual
		this.parent( data );
		
		// Find your layer in the backgroundMaps Array somehow.
		// In this case we just check if the .distance is < 1
		for( var i = 0; i < this.backgroundMaps.length; i++ ) {
			var m = this.backgroundMaps[i];
			if( m.distance < 1 ) {
				// Set it as our foreground map
				this.foregroundMap = m;
				
				// Erase it from the backgroundMaps Array
				this.backgroundMaps.erase( m );
			}
		}		
	},
	
	update: function() {
		// Update everything
		this.parent();
		
		// Update the foregroundMap
		if( this.foregroundMap ) {
			this.foregroundMap.setScreenPos( this.screen.x, this.screen.y);
		}
	},
	
	draw: function() {
		// Draw as usual
		this.parent(); 

		// And draw our foregroundMap on top
		this.foregroundMap.draw();
	}
});

One problem here is, that instances of BackgroundMap don't have a .name property, like the layers in the Level Data, so I just checked the .distance property.

Thanks! I'll use this subclass instead so that my customization is kept separate from the engine. That'll make future upgrades easier.

In the long run it would be handy to just rearrange the entity layer as a peer to the other layers in Weltmeister - or even have multiple entity layers. For example, the distant robots in Canabalt.

I figured out how to get it to work, but if you set the distance to 0 it doesn't show the layer at all, so I changed it to less than 2 and set only the foreground later to distance 1 and it worked.

-edit-
Actually, doing above messed up the layers. 0 makes the background now appear so I edited the for loop code to reset the distance to 1 after it finds the layer with distance 0 so that its visible.

	for( var i = 0; i < this.backgroundMaps.length; i++ ) {
		var m = this.backgroundMaps[i];
		if( m.distance < 1 ) {
		    this.backgroundMaps[i].distance = 1;
		    // Set it as our foreground map
		    this.foregroundMap = m;
		    console.log(m);
		    // Erase it from the backgroundMaps Array
		    this.backgroundMaps.erase( m );
		}
	    }        
	},

I don't suppose there's any chance this'll make it as part of the engine soon. Would be super useful, and I'm still pretty new to all this. :P

That'd be very cool if it was implemented in the next version.

Rather than background/foreground maps, I'd like to be able to place entities on specific layers.

Layer 0 would be on top of the stack. I could put entities there if I like. If I want some foreground layers, I could put my main Player entity on Layer 3, and have two foreground layers.

That in itself seems pretty easy to support.

It gets tricky when you consider parallax scrolling. In theory, you could figure out a layer's position relative to an Entity and the Entity's current layer, but that could get complicated. Maybe instead you could have a setting in Game that would be used as the "primary" layer. If Layer 3 was your primary layer, then layers 0-2 would be foreground layers, layers with a distance greater than 3 would be background layers.

One word. Groups. If Weltmeister had support for groups, we could define which is which. So one group for entities, one for foreground stuff (above all, including entities) and one for backgrounds.

I should also add, I've just been making entities passive and using them as foreground layers. It's not the best method. But you name them F-NAME it works as a decent temporary solution :)