Forums » Help » Creating Menus & Buttons In-Canvas?

Anyone have extensive experience in creating menus & buttons in impact? I could use some advice on the easiest way for me to convert a bunch of HTML & CSS menus into html5 canvas menus for use in Ejecta.

Here's a demo of all the menus

Just my opinion, but wouldn't menus be better off if they're also coded in-game using Impact?

Depends on your definition of better. I chose HTML b/c I am a Web Developer full time. So I can whip out professional looking UI using HTML/CSS/JS very quickly. Creating/Using Images & JS for position and layout is not my forte. Not to mention all the tools out there like jQuery, templating, etc which make creating dynamic user interfaces a dream.

I created a simplified GUI system within my impact game, based on canvas. I did this mostly because I wanted to have large pixels for the interface, matching the game's graphics, which is hard to do with HTML/CSS. If it wouldn't have been for that, I'd have rather gone with HTML/CSS as well.

Some recommendations I can give:
- Don't use entities to draw the interface, better create specific GUI classes (deriving from ig.Class) that do their own drawing using the canvas API directly
- I wouldn't try to recreate HTML/CSS within canvas, that's just way overkill. But still I took some inspirations from HTML/CSS specifically from CSS animations.
- What worked pretty well in my case the combination of a global GuiManager on one hand and several classes for each individual GuiElement (deriving from a common base class) on the other
- You can structure your GUI elements in a tree structure for rendering and use this structure to position GUI elements relatively to their parent.
- In my case, I used 3 states of alignments for Y and X axis each (top, center, bottom and left, center, right), but I skipped float functionality. Those are handy, but inside a game with a fixed resolution they are not quite as essential, I think
- You can do the drawing from the GuiManager with a recurisve structure traversing the tree of GuiElements. Each GuiElement is drawn first, then their parent. Using the canvas drawing state (with save() and restore() ) is very helpful during the drawing traversal. It allows you to write generic drawing functions for each GuiElement that always draw relative to the origin and do the rest with translations, scalings and rotations of the canvas state.
- You also need to implement some functionality to make your GUI elements clickable, but this is not too much work, if you already have the drawing working. You just need to apply inverse translations, scaling, rotations etc. on the mouse position and check with the rectangular bounds of your GUI elements
- And because it's likely to happen: if you are thinking about using patterns to draw repeating backgrounds and so on, just be warned that this might be really slow on certain browsers (this was the case for me with Firefox on older machines). I also don't know about Ejecta support for patterns. There are ways to simulate pattern drawing, but that's another piece of work.

Overall, it is a bit of work to create a practical GUI System for your game, but it's doable, if you keep it simple - and I think it really pays off, if you have many interfaces in your game. You probably don't want to hack all of those.

Btw. couldn't really see a demo for your menus - there was no link :/

@lachsen - Thanks you for the thorough reply! Do you have any code you could share in regards to the GuiManager ? In my latest game build I have the following screens outside of the game-play:
- Start Screen
- Main Menu
- Store Main
- Weapons Upgrades (5 of these)
- Options
- About The Game
- About the Devs
- Promo Screen

I was able to pull these off in a way that it doesn't seem too hacked. My 'GUI Manager' portion of the code isn't an entity, but it creates & organizes Button Entities. Most of these screens are pretty basic, though they do feature the ability to turn into a scrollable list if the UI can't show all but buttons that are set to be be drawn. For instance on the level select screen, once you get above 8 buttons (or 6 on iPhone 4), a next/prev arrow will appear and allow you to scroll through the list.

I have plans to create a GUI manager to share in the future. I'd like to create something which features many things we've come to expect in jQuery like animation tweens and more. Also it would be great if we had better tools for laying out buttons, lists, and text containers. Create a "fake dom" which allow the elements to flow. Something like a Weltmeister for menus.

If you'd ever want to collaborate on GUI Manager project let me know. We could create something great!

I've removed the demo of the game until it has passed iOS App Store Review. It should be available in 5 days for download. Then you can check it out!

Hi there,

I think I would release my GUI classes. The problem is, that I'm not sure, if they are compatible with impact.js, since I use a heavily modified version of the engine (even changed the interface of ig.Image etc.) So I'd have to check beforehand.

Looking forward to the demo of your game.

@lachsen I'd definitely be interested in your system. Even if I can't copy-paste because of your modified engine, I could pull chunks from it instead of rolling my own (which I was about to do before I read this thread)

lachsen: posting the code even if not completely compatible would be good for reference.

This might be a necro, but is there any chance you would be able to release some of this GUIManager code if only to take a look at it, lachsen?