Forums » Help » Background image and entities

Hello,

Currently I've setup a game where I do have an ig.Image that is being drawn in ig.game.draw method.

Apart of that, I'm trying to do some canvas drawing in an entity.

My ig.game.draw looks like the following:

		draw: function() {			

			// Background			
			this.titleImage.draw(0,0);
			
			// Draw all entities
			this.parent();

			// Last drawn stuff (like texts on top of screen)
			this.fonts.text.draw( ig.storage.name, 286, 240, ig.Font.ALIGN.LEFT );

		}

And my draw method in entity:

		draw: function () {

		    var ctx = ig.system.context;
			var s = ig.system.scale;
		    var x = this.settings.x * s - ig.game.screen.x * s;
		    var y = this.settings.y * s - ig.game.screen.y * s;
		    var sizeX = this.settings.sizeX * s;
		    var sizeY = this.settings.sizeY * s;

		    ctx.save();
	    	ctx.beginPath();
		    ctx.fillStyle = this.settings.color;
		    ctx.fillRect( x, y, sizeX, sizeY );
		    ctx.closePath();
		    this.parent();
		    ctx.restore();


	        this.parent();

		}

The result I'm looking for is:
- Background image
- Entities over background (in this case, a canvas drawn on top of background)
- Text over entities and background

AFAIK when calling this.parent() on ig.game.draw it clears whatever was already drawn, however, I do need to use it to draw my entities.

What should I be using here to get this working?

Thanks!

I do recall running into this myself, but I honestly don't remember how I resolved it. I'm actually not sure I ever did.

One solution is to avoid using ig.Image directly and load your background image into weltmeister as a tile, but I've had issues with huge tiles and trying to get them to stay still in the background. I don't think it's really cut out for that.

You actually have a lot of options:

1. Directly edit the draw function in impact's game.js file. I don't recommend this.

2. Note that the screen only clears when "clearColor" is defined in your game instance. You could set "this.clearColor = null" in your game's init code, and instead keep a "this.hackyClearColor" variable, which you use to clear the screen yourself at the beginning of your draw function.

3. Don't call this.parent() at all. That means that you'd need to draw the maps and entities yourself.

I kind of don't like any of these solutions, but I'd almost certainly go with #2 in a pinch. You don't need to infer what the parent functions do, you have the code. You can take a look.

In your entity draw function this line:

var x = this.settings.x

Is there really a settings property in your entity? If yes, are you sure that it gets the correct values in your init?

Also, does the entity draw clears the whole screen? With the correct color? Do you see the text on top of the entity afterwards?

Thanks a lot @substandardgaussian!

That was exactly the problem! I've used your second suggestion as it seems the most reasonal to me either. Thanks a lot!

@dungeonmaster yes, I was sure those values were correct. I've tried debugging changing the order of the commands, and I was able to see it working (my other entities being drawn). I wasn't just been able to get them to show all up in the correct order, but it seems to be working good now.

If anyone else do come up with this problem, this should fix it:

	Main = ig.Game.extend({

		// Load fonts
		fonts: {
			text: new ig.Font( 'media/04b03.font.png' )
		},

		clearColor: null, // set clearColor to null to allow correct layer ordering
		hackyClearColor: '#000000', // set a color to that we could clear manually before ordering

		init: function() {
			// Start the magic!
		},
		
		update: function() {
			// Update all entities and backgroundMaps
			this.parent();
		},
		
		draw: function() {
			// Clear before everything!
			ig.system.clear( this.hackyClearColor );

			// Background			
			this.titleImage.draw(0,0);
			
			// Entity stuff
			this.parent();

			// Last draw stuff
			this.fonts.text.draw( ig.storage.name, 286, 240, ig.Font.ALIGN.LEFT );
		}
	});

To allow for layered drawing in my game I've got this injected into ig.Game.draw:

      var clearColor = this.clearColor;
      if (this.clearColor) {
        ig.system.clear(this.clearColor);
      }
      this.clearColor = null;
      this.fireEvent('predraw');
      this.parent();
      this.fireEvent('postdraw');
      this.clearColor = clearColor;

That lets me maintain a clearColor (I made an entity that sets this to something other than black for certain levels) but still draw my pretty image backgrounds under all my entities.

Oh for want of a scene graph.