Forums » Help » Draw HUD entities on top of everything

I'm looking for a pain free way of drawing my HUD entities to the front of everything else.

Currently I just have the following for sorting elements which works fine for my top down shooter.

autoSort: true,
sortBy: ig.Game.SORT.POS_Y,

So I get enemy entities walking all over my HUD.

Entity's zIndex property is what you need.

How are you implementing your HUD? As an Entity?

Whenever I draw a HUD, I don't do it with entities, I do it directly in the game's draw method (after calling this.parent()), I find that makes it easier to deal with and there isn't the overhead of another entity per frame update.

I like the idea of having HUD entities. I will eventually have quite a few of them and will use them for things like an inventory screen which will be complex. The inventory screen will need to be on top of everything else like all other elements of the HUD. I do not want these things to exist in Game.

I've tried playing with the zIndex but it looks like autoSort and sortBy are overriding whatever I do. You can see the problem on my game. If you don't kill the enemies and weave past them to the right you will eventually see them walk over the weapon selection HUD.

http://project.dnsalias.com/

I'm open to any suggestions for handling my HUD elements. The current HUDs take up about 50 lines each, there are two of them.

If your HUD is not an Entity, then make sure you draw it after your Entities get drawn in your main.js:

draw: function(){
    this.parent(); //draw all entities
    this.hud.draw(); //draw hud
}

Okay. I'll make the HUDs the their own class and call their update and draw from main.js.

Quote from Bushstar
Okay. I'll make the HUDs the their own class and call their update and draw from main.js.

^^ THIS ^^