Forums » Help » Draw some entities behind some background maps

Hello! Is it possible to draw certain entities behind background maps?

Let's say I have some clouds and I want to change their position every tick so that every cloud is travelling slowly from left to right or vice versa and with different speeds. At the same time, I want them to be behind the background map that I use for platforms. The latter is behind the entities layer. So basically, I need to have entities that are behind the background map which is itself behind entities layer.

How one goes about it in Impactjs? Is it possible to have several layers with moving entities

Precision: I don't want to construct a cloud out of tiles nor do I want to have animated tiles, since latter cannot move.

First, check this out.

I used the observable one in my game. I then emit events in my Game instance&039;s #draw method: "predraw" and "postdraw".

Then I do this:

    draw: function() {
      this.fireEvent('predraw');
      this.parent();
      this.fireEvent('postdraw');
    }

Then I have entities that subscribe to "predraw" (behind everything) to draw their clouds and stuff. The entities I wrote are using Image.drawTile, so I know that works.

I know you can draw layers above the entries layer in the map editor. I do that all the time for foreground objects. I'm pretty sure that you can have multiple entity layers as well. In my game I have some entities that are layered between different background layers.

I don't think I did anything special to achieve this, I'm pretty sure it was out the box.

@drhayes: Thanks on your, as usual, competent answer.

I was thinking, would it be OK to make some "enum" (ie. js literal object) with zIndexes, eg.

ig.game.LAYERS = {
SKY: -30,
MOUNTAINS: -20,
BUILDINGS: -10,
ENTITIES: 0
}

and than do .autoSort by .zIndex. I know that this solution would have an overhead of the entity sorting on each tick, but it seems acceptable.

This solution does not really answer my question, but could solve my problem. Anyway, you have to accept the limitation that you can use background maps only as the far background or the frontground, but that's OK. At least in my case.

What do you think about this solution?

P.S. Also, with this solution, you'll need to implement yourself the parallax, but that's an easy one :)

@lunarovich: (doffs hat)

Oh yeah, totally. Sure there's overhead but it's only a problem when it's a problem.

@drhayes: (smiles) :)

Performance-wise, maybe it would be OK to inject a modified .spawnEntity() in the ig.Game class. Instead of simply pushing the entity in the .entities array, the .spawnEntity could traverse .entities array and find the first entity with the same zIndex as the entity being spawned and splice it in there.

I think that operations of single find and single insertion cost less than the operation of sorting. The latter consists potentially of a whole bunch of finds and insertions (as far as I know :)

The game that does not spawn/kill too many entities in a short amount of time would have a better performance gain from this technique: entities will be "sorted" only upon their spawning and not in every tick.

That makes a ton of sense to me. I'd love to see a patch for that. ( = I can see where auto sorting makes sense for iso RPGs, say, but not for other games every frame.

Truthfully, I bet you wouldn't blip performance using sort vs. insert without having ~hundreds of entities. Array sorting in JS is pretty fast relative to canvas ops.

Check out these sorting algorithms. I woulda bet money that sort would perform around the same as quicksort, but hey, okay, TIL.