Forums » Help » Simple background level, how to ?

Hello, I'm stuck at a simple task :

I just want to show a big background (no tile, jsute the 384*240, my screen size, background).

When doing :
var background = new ig.Image('media/levels/1.png');
background.draw(0,0);

I end up with entities not visible ("zindex" problem, they are behind the image), how can I change an image's z-index ?

I think it would be strange to create a new specific entity but this is perhaps the best option

Thx

I've never had to use it, but it's in the Docs :)

Z-Index Docs

Yes but this is only for an entity, I just wanted to use an image, not create a whole entity.

This works with an entity btw I tested, I know have an "BgLevel" entity, not the best option I think

I haven't tried this yet, but it seems that in theory it would work:
(borrowing from some of the documentation)

MyGame = ig.Game.extend({
    // This image will be loaded by the preloader. It is created
    // as soon as the script is executed
    titleImage: new ig.Image( 'media/title.png' ),
    
    init: function() {
        ....
    },
    ...
    draw: function() {
        // Draw the titleImage(background Image) first.
        this.titleImage.draw(0,0);
        // Draw all entities and backgroundMaps
        this.parent();
    }

});

The keys here are that:
1. The titleImage image is loaded by the preloader as soon as the script is executed.
2. The image is then drawn before all other entities and background maps.

When I get a chance I'll try to see if this works.

Quote from dominic -- see here
The problem is, that when you call this.parent() in your Game's draw() method, it clears the screen.

The trick is to call draw() for each entity separately instead of calling this.parent():

draw: function(){
	this.titleImage.draw( 0, 0 );
	
	for( var i = 0; i < this.entities.length; i++ ) {
		this.entities[i].draw();
	}
},

That said, you might be better off making your background an entity itself or perhaps using a BackgroundMap instead.