Forums » Help » HUD

Hi,

Anyone knows how to create/implement a HUD or has a link to a page where it is explained?

This is my hud code, there is a large amount of bloat because I procrastinate on cleaning up things but it should give you an idea of how I handle my HUD

ig.module(
	'game.entities.hud'
)
.requires(
	'impact.entity'
)
.defines(function(){
EntityHud = ig.Entity.extend({
	size: {x: 320, y: 20},
	zIndex:800,
    //animSheet: new ig.AnimationSheet( 'media/hud.png', 320, 20 ),
	collides: ig.Entity.COLLIDES.NEVER,
	gravityFactor: 0,
	init: function( x, y, settings ) {
        //this.addAnim( 'idle', 1, [0] );
		this.parent( x, y, settings );
		this.pos.x=ig.game.screen.x;
		this.pos.y=ig.game.screen.y;
	},
	update: function(){
		this.pos.x=ig.game.screen.x;
		this.pos.y=ig.game.screen.y;
		if(ig.input.mouse.y<=20)
		{
			//console.log('mouse zone');
		}
		else
		{
		
		}
		this.parent();
	},
	draw: function(){
		this.parent();
		switch(ig.game.playmode)
		{
			case "timeattack":
				ig.game.font.draw( 'Score: '+ig.game.score, 7, 5);
				ig.game.font.draw('Collected: '+ig.game.drops+"/"+ig.game.tdrops, 167, 5);
				var CurrentTimeValue = new Date(Math.round(ig.game.getEntitiesByType(EntityLevelstats)[0].currentTime*1000));
				ig.game.font.draw('Time: '+CurrentTimeValue.getMinutes()+'\''+CurrentTimeValue.getSeconds()+'\''+Math.round((CurrentTimeValue.getMilliseconds()/10)),7,220);
				break;
			case "story":
				ig.game.font.draw( 'Score: '+ig.game.score, 7, 5);
				ig.game.font.draw('Collected: '+ig.game.drops+"/"+ig.game.tdrops, 167, 5);
				var CurrentTimeValue = new Date(Math.round(ig.game.getEntitiesByType(EntityLevelstats)[0].currentTime*1000));
				break;
		}
	}
});
});

It really depends on what your HUD needs to have, but ultimately I do much the same as the above code.

The main game's draw() method calls this.parent() to draw any backgroundMaps and entities, then I draw any status info on top as necessary, be that font draws or images or whatever.

Thanks guys, haven't thought about doing it outside the main's game class as entities.

This is interesting, looks like my own HUD may be done very inefficiently. I'm simply drawing it in the main.js draw function.

My main HUD includes a simple score count and health bar and I'm using if statements to make it not be displayed on transition levels. One level includes some boss stats and that's also being drawn in the same place, except with an if statement to limit it to only the boss level.

Performance wise is this generally a much more inefficient method compared to the above example?

It depends on what your HUD contains and how often it's updated, really. More importantly note that using font draws is expensive, it's one draw per character (but if you want nice fonts, especially some things that cannot be achieved in even so-called Web Fonts, then you kind of have to do that)

I don't think it's inefficient to update it once per frame, depending on how you go about it, what I tend to do is drop in a background for the HUD elements which includes things like the 'Score' writing pre-rendered etc. so I only have one draw call, then I write the per-frame stuff on that.

Hmm it does contain quite a bit of text on the boss level (by "a bit" I mean a few words that change depending on the boss's health), but other than that I don't even have "Score" being written, just the actual number. Aside from that it's just heart images for health with some other images being drawn in the boss level (boss health & boss avatar).

I might keep it as is and just keep an eye out for any performance issues.

If you're ever unsure about performance, fire up the Impact debug panel. Yes, it adds a performance hit of its own but the debug information it gives you is almost always worth it.

I've actually been using the debug panel, it's been very helpful :) Had to rearrange my entire level background drawing system due to performance issues found there a few days ago. Time consuming, but at least the debug panel helped me pick out what was happening.

I'm sure that using the draw section as you are is fine. I only use an entity because not all scenes require me to have a HUD, and I like to separate out as much as I can away from the main.js where I am trying to do many other bloaty things like maintain state in levels and so on.

I sometimes abuse the entity class for the sake of keeping things compartmental and organized. Even Dominic has an example where the grenade is declared below the player entity in a single js, I probably would split that out because I have forget a lot of things I write and get scatter brained. When I need to find something and it is labelled clearly in a .js file I save myself time. even if it is 20 lines of HUD code.

Do you have any examples as to how this gets implemented? spawnEntity?