Forums » Help » Graphical HUD

Hey everybody,
I just tried to implement a graphical HUD where I have symbols representing different pieces of information about the player, e.g., health, score, level, etc. I implemented the HUD as an entity that consists of several HUD elements (health, score, ..). However, the problem is that the HUD is drawn dynamically on the screen. This means the position of the HUD is adjusted according to the movement of the player, i.e., one can see visible movement of the HUD elements. When I just used the font.draw() method I didn't have that problem. Is there any way to assign a constant position of the HUD elements on the screen?

I'm spawning the HUD in game.js after all level entities have been loaded. The HUD's update and draw method call the update and draw methods of all HUD elements, respectively. In this thread (http://impactjs.com/forums/help/divs-inside-of-canvas-in-relation-to-screen-size) someone said it would matter which entity spawned the HUD. However, this doesn't make much sense to me and also didn't make any difference in my case (bouncy images).

Is it possible to directly draw on the canvas and use divs or something?

Edit: Problem seems to be solved. I'm just using the draw method of the image class.

If you're using entities to represent your HUD elements, you can expect them to move around along with the map by default. It sounds like you're going to want to override the entities draw methods to a constant location, much like you do when you draw a font.

draw: function() {
	if( this.currentAnim ) {
		this.currentAnim.draw(
			10, // 10 from the left
			15 // 15 from the top
		);
	}
},

Right on. Do you think that there's any performance difference between using Image to draw rather than the anim? It's basically the same, anim being a wrapper for image?

I have just posted up a plugin http://impactjs.com/forums/code/dynamic-map-plugin that may be of interest. Its based on tiles but you can make as many dynamic maps as you need to create your HUD. It will cache the HUD so you should be able to reduce the number of draw calls and only force the HUD to update when something changes. Check the breakout clone demo it extends the dynamic map to create a very simple hud to display lives and score.