Forums » Help » HTML Hud?

Hey guys! So I played a couple of the demos I found around the site (I was actually checking out the demo for Z-Type ) and I realized something:

Early in the development of our game I read somewhere that for an HTML5 game, it'd be better to create the HUD using HTML elements (outside the canvas).
So for that reason that's what I've been doing, and I've been learning incredible amounts of JavaScript in the process to make everything work.

However, I realized Z-type didn't do this at all and it looks incredibly nice. Do you guys think that perhaps using HTML elements is a bad idea? Our game's been slowing down, I fear this might be a reason (although I can't think of good evidence to support that claim).

Also, the elements show pre-loading screen, since the loading screen only considers the canvas. I work with a video game start up but it's just a bunch of students and we're pretty new at this, both at game development and HTML canvasing. Any direction would be most helpful :D

You can scope out our game here: SigFigz

If you want to determine whether the hud is causing slow-down, stub it out and see if the performance returns.

By the way, be sure to check out http://impactjs.com/documentation/debug for tips on debugging and profiling.

There are two aspects to the hud, your code that calculates stuff and the painting of those results to screen.

First stub the whole thing out and see how your fps respond. If the fps jump up, then try isolating the draw from the calc. In this case the draw is probably just an update of innerhtml or some other thing. Haven't looked at your code so I'm guessing.

By the way, please bake your games before you make them live on the web. This game is not baked which means it is too easy for users to grab part of the impactjs engine. With javascript it seems to be impossible to hide code 100%. But it is silly to leave everything totally in the clear. So do Dominic a favor (and the rest of us that want to see him prosper so we get the value of this totally awesome engine) and bake before upload.

Definitely report back your results. Using html components vs. in canvas is an interesting question.

Oh, nice work on the game. Looks like it will be fun. Congrats to the art team as well.

Thanks a bunch man. Good point on the baking of the game, that's actually something I've been wondering a lot, how to do the best possible job to hide the JavaScript code and I guess I (or rather we) overlooked the baking process altogether.

Appreciate the input and help!