html5 Should I use Phaser Graphics for UI or go with HTML5?

[Mickety]

Since Phaser is a web framework, we the developers, have a choice between drawing GUI (Menus, inventory screens, buttons etc) on the canvas or use built in browser elements with all the functionality and response and just connecting it to the game engine.

What would you recommend? Drawing and handling clicks on canvas is a little harder, but if there are any sound benefits to that I would love to know. Thanks

[charlie_says]

I recently was engaged to do a project for a new client, they, as part of the interview process asked me to to a test. The test was making an animated chart on canvas *without* a framework.

Fair test I thought, and I did it.

But, I was so relieved I did the test from home rather than in their office, as, I swore NON-STOP for the 3 hours it took me.

There's no point reinventing the wheel - use a framework.

[Mickety]

25 minutes ago, charlie_says said:

I recently was engaged to do a project for a new client, they, as part of the interview process asked me to to a test. The test was making an animated chart on canvas *without* a framework.

Fair test I thought, and I did it.

But, I was so relieved I did the test from home rather than in their office, as, I swore NON-STOP for the 3 hours it took me.

There's no point reinventing the wheel - use a framework.

I am sorry, I have been vague in my question.

Simply put I was asking whether I should use <button> (html tag) and place it over a game or should I use Phaser.Graphics module to draw it over canvas.

It seems to me using ready button html tags is an easier way out, because if I used canvas graphics (phaser or not) I'd have to declare a button class, have a place to store them and it would take more time to program each buttons response.

In a nutshell: I wasn't asking whether I should use phaser or not, I was asking whether I should use Phaser or html built in elements like <button> or <textarea>, and which way has benefits

I do however understand the agony you've experienced while working with a canvas without a framework, just thinking about it makes me feel dread.

[onlycape]

Hi @Mickety,

I see some advantages using html5 for UI.

If the game needs to be adapted to different sizes, using a html-based UI avoids easily problems with pixelated buttons and texts.
It also allows you to use the entire available screen and not just the canvas.
You can group the buttons and information in different div, and depending on the state of the game, hide or show the div/s for that state.

A problem in the case of using this option is to position the elements on the canvas when it's smaller than the available screen, which using phaser would be very easy. 

Greetings.

[Mickety]

3 minutes ago, onlycape said:

Hi @Mickety,

I see some advantages using html5 for UI.

If the game needs to be adapted to different sizes, using a html-based UI avoids easily problems with pixelated buttons and texts.
It also allows you to use the entire available screen and not just the canvas.
You can group the buttons and information in different div, and depending on the state of the game, hide or show the div/s for that state.

A problem in the case of using this option is to position the elements on the canvas when it's smaller than the available screen, which using phaser would be very easy. 

Greetings.

Hello @onlycape thanks for the insight.

That seems to be the case.

What if my game is fullscreen though and I don't intend on porting it to mobile devices?

[mattstyles]

Generally speaking HTML and CSS is pretty good for laying out UI's, far from perfect, but generally easier than a canvas alternative, particularly for dealing with different screen sizes.

Having said that, take your specific use-case and skillset in mind.

Are you already a dab hand at HTML/CSS and 'webby' style UI layouts? Does your game require complex UI elements? If yes to both then using HTML elements might be your best bet, maybe using a framework/library to help so you don't have to deal with the DOM too often.

Are you new to HTML but comfortable with canvas rendering? Does your game just need a few UI elements? Does your game need every ounce of performance? If yes to these then maybe just using the canvas will be more comfortable for you, there are a couple of libs out there to help, some (I think) specifically for Phaser.

Using HTML and CSS for layout stuff usually works out easier but bare in mind you will incur a bit of a perf hit from elements above (or even below probably) the canvas as the compositor and browser rendering functions will have to do a little more work than just pasting the canvas. Also bear in mind that DOM rendering libraries (such as Vue, Angular, React etc etc) are built more for ease of use than performance (perf is a concern, but frequently updating elements aren't a big one). If you think your game will struggle at all for performance then get your most complex 'scene' up and running, test it, then test whacking some DOM elements above it and test it again to see what the impact will be for you.

[charlie_says]

I think the other answers here are good, and apologies if I misread your question.

The only thing I wonder about using HTML elements over the canvas is if you have some kind of dynamic resizing, it could then be trickier to move the the HTML elements (although, it would still be possible.)

The one area where it would definitely be easier would be that of some sort of text input field (although, I'm a little out of date with phaser plug-ins and maybe there's a good one now.)

[Mickety]

2 hours ago, mattstyles said:

Generally speaking HTML and CSS is pretty good for laying out UI's, far from perfect, but generally easier than a canvas alternative, particularly for dealing with different screen sizes.

Having said that, take your specific use-case and skillset in mind.

Are you already a dab hand at HTML/CSS and 'webby' style UI layouts? Does your game require complex UI elements? If yes to both then using HTML elements might be your best bet, maybe using a framework/library to help so you don't have to deal with the DOM too often.

Are you new to HTML but comfortable with canvas rendering? Does your game just need a few UI elements? Does your game need every ounce of performance? If yes to these then maybe just using the canvas will be more comfortable for you, there are a couple of libs out there to help, some (I think) specifically for Phaser.

Using HTML and CSS for layout stuff usually works out easier but bare in mind you will incur a bit of a perf hit from elements above (or even below probably) the canvas as the compositor and browser rendering functions will have to do a little more work than just pasting the canvas. Also bear in mind that DOM rendering libraries (such as Vue, Angular, React etc etc) are built more for ease of use than performance (perf is a concern, but frequently updating elements aren't a big one). If you think your game will struggle at all for performance then get your most complex 'scene' up and running, test it, then test whacking some DOM elements above it and test it again to see what the impact will be for you.

A sound advice. I am used to using HTML elements over canvas for games as UI, but I always had thoughts like "What if that is a really silly thing to do but I don't know about it? What if it lowers performance greatly?" Well with answers given in this thread I have a direction to move toward to. Thank you.

[Mickety]

1 hour ago, charlie_says said:

I think the other answers here are good, and apologies if I misread your question.

The only thing I wonder about using HTML elements over the canvas is if you have some kind of dynamic resizing, it could then be trickier to move the the HTML elements (although, it would still be possible.)

The one area where it would definitely be easier would be that of some sort of text input field (although, I'm a little out of date with phaser plug-ins and maybe there's a good one now.)

Yes I've heard about this too. Luckily no dynamic resizing stuff or even mobile support is expected anywhere in the nearest future, so I can get away with just html tags. Thanks for the insight.

[mattstyles]

In theory dynamic resizing is actually easier with the DOM, canvas can scale easy enough but that usually isn't very helpful, i.e. even if its just a button you'll probably want the font size to be consistent even if the button changes size slightly over a range of different sizes (obviously at some point that breaks, but, again, its likely easier to deal with in DOM).

Depends largely on how complex your UI is.