GUI - Html or Canvas

[gca]

Hi guys,

I'm very new into the game dev scene (1 week new). My idea is to develop games using Phaser and then compile it, using phonegap, for mobile devices.

In this scenario - as I see some no-nos in others. Is it bad practice to use html + jquery and gsap to create the gui of the game, instead of the canvas?

 

I bring a lot of experience of dom manipulation into this new venture and I didn't like the way of positioning things around the canvas. Pixels, ew. I was on my way, building a javascript grid based on the phaser api, to mitigate the previous ew-remark, when I remembered good old html. But... standards, and you got to love standards. What's your view on this subject?

[mattstyles]

Zero problems with mixing html and canvas, canvas is html after all and its just a render target, how you structure your app is up to you.

[lukaMis]

It depends how much gui you have. A few buttons are easier wth phaser alone. If you plan dropdown menus and off-canvas navigation than css3 is your friend.  Here is example that has gui in html&css3 and phaser for animation render. (Spoiler that is mine): http://demo.irokus.si/irokusplus/kem8uc/kem8_ani_02/

There are no problems with mixing dom and canvas... Just structure you code appropriately. Phaser and jquery have very different ideas about code organization. 

[kbmonkey]

As @mattstyles said, zero problems and personal preference. A canvas UI is obviously a lot more work and always something you can include later if you decide, I would use the time to focus on the game engine first, while using a HTML UI during development.

[Gio]

I like to mix and match, but I find that some types of css transitions are unacceptably slow on mobile browsers, so for some things canvas is really the only viable option.