Overlays - Menu, HUD, UI, etc

This plugin provides an ig.Overlay class which can be extended into HUDs, menu systems, battle systems for RPGs, you name it. It creates a div which overlaps the canvas and renders arbitrary HTML on top of it, all in a neat little package.

I'm currently using this in a hud.js class, which is toggled by the tab key and shows a health, stamina, and xp/level meter. The plugin is dependent on jQuery, so you'll need to include that. I would also strongly recommend Bootstrap, since it's such a beautiful UI framework and is well-suited for this.

Installation instructions:

1) Add jQuery and, if you like, Bootstrap to your index.html file or other landing page.
2) Add overlay.js to lib/impact.
3) If you want to hit the ground running with hud.js, save that as lib/game/overlays/hud.js, and follow the instructions at the top of the file.

From there, it's up to you. The update() function on the overlay can be used to power whatever you want - title screens, level selection, RPG battle systems, pause menus, map screens, HUDs, whatever.

You could even include additional libraries like Wijmo if you want access to things like speedometers.

Recommended reading:
Getting Started with jQuery
Getting Started with Bootstrap

If you have any questions/comments/feedback of any sort, please add a comment!