I’ve designed a small game in canvas, and I’d like to add an interface to it (just a standard thing with menu options like sound toggling and other settings, etc).
In Angry Birds html5 (http://chrome.angrybirds.com) they don’t have any html elements other than canvas to handle their interface.
I was just wondering, would it be bad practise for me to have my entire game designed in html5 canvas, and then the user interface totally designed using html elements like divs, with css styling?
I suppose the alternative would be somehow writing some sort of collision system to determine where the user clicks on the screen.
I was hoping someone could point me in the right direction here, and tell me which method (pure canvas, or with html elements) would be best for my canvas game. My 100% concern here is performance, testing both would take days and would be a tremendous pain.enter code here
It’s not so difficult to determine where the user clicked on the canvas. I use the library gee which makes it really easy. Just follow the examples in the API to create your gee canvas and always access mouse position (g.mouseX, g.mouseY) and mouse actions (g.mousedrag, g.mousedown, g.mouseover, ecc…). Off course, it also handles automatic refresh for animation (g.draw).
About your question: its just up to you if to make the UI in the canvas or outside with CSS. Usually, you dont need to care about performance in the user interface and there is no “better approach”: your performance depends on how you implement your code. A bad implementation may lead to performance lags, regardless of the technology you’re using to interface it.