Forums » Help » zIndex with .drawTile?

I was wondering if there is a way to specify zIndex of .drawTile or do I need to make an entity?

The Image's .draw() and .drawTile() method draw directly to the canvas and will draw over everything that's already on it. Everything you draw after this, will in turn be above.

So the order of your calls to .draw() is important. The zIndex just concerns one part of your game: entities. Entities with a low zIndex will be drawn first, entities with a high zIndex last (only if you sortBy zIndex, of course).

So, if you want to draw a HUD in the Game's draw method, do it like this

hud: new ig.Image('media/hud.png'),
draw: function() {
	// draw the background maps and entities
	this.parent(); 
	
	// draw the hud image afterward
	this.hud.draw(0,0);
}

If you want to draw a background image instead, do this:

clearColor: null, // don't clear the screen
background: new ig.Image('media/bg.png'),
draw: function() {
	// draw the background image first
	this.background.draw(0,0);
	
	// draw background maps and entities afterward
	this.parent(); 
}