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&039;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.