Integrating DOM Elements

[quarks]

Does anyone have any suggestions for seemlessly integrating HTML DOM elements into a Phaser UI. Or can anyone point me to sample code that does so?

 

I'm thinking here of something like overlaying an input box, textarea, or even iframe atop the Phaser canvas to provide interfaces that would be tedious to re-implement in pure Phaser. I recognize that there is no magic bullet for this and that ultimately it's a matter of careful positioning and styling with Phaser and CSS, but seeing a model for how someone else has solved this could save me some trial and error.

 

Thanks.

[semk]

I actually just migrated to Phaser from Famo.us (famous.org). 

 

Famo.us uses what they called "Mixed Mode" which allows you to manipulate DOM elements directly, it's still in Alpha and doesn't have as many pre-built modules and examples as Pixi.js, but maybe it would be worth it for you to check out?

[gianthead]

I've done this before by overlaying some jquery UI controls on top of a Phaser game to save implementing ui. I don't have code for you but the game is here and you can use Chrome dev tools to see how I laid out and styled the elements to make it work.

 

I do have this advice for you. While it saves some UI work, it also introduces a bunch of issues:

 

1. You cannot selectively show some sprites within the game above any UI elements. All your UI elements are above all Phaser sprites.

2. You lose the benefit of Phaser's scale manager. So you have to manually scale your overlays to match.

3. You lose the benefit of Phaser's state manager. So you have to manually show/hide your UI when you switch states.

 

The gist of it is whatever you do in Phaser, you need to also do the extra work to keep your html elements synced.

[mwatt]

I use a "dialog" methodology.  It's a div that is typically very low in the z-index with alpha of zero.  When I want to display it, I bring it to the top of the z-index, higher than the canvas.

 

If you are looking for a complex HUD that constantly displays I guess you can do that too, but you'd have to size your canvas appropriately I suppose.

[ForgeableSum]

I've done this before by overlaying some jquery UI controls on top of a Phaser game to save implementing ui. I don't have code for you but the game is here and you can use Chrome dev tools to see how I laid out and styled the elements to make it work.

 

I do have this advice for you. While it saves some UI work, it also introduces a bunch of issues:

 

1. You cannot selectively show some sprites within the game above any UI elements. All your UI elements are above all Phaser sprites.

2. You lose the benefit of Phaser's scale manager. So you have to manually scale your overlays to match.

3. You lose the benefit of Phaser's state manager. So you have to manually show/hide your UI when you switch states.

 

The gist of it is whatever you do in Phaser, you need to also do the extra work to keep your html elements synced.

True that. I think even with all that, the pros outweigh the cons but ONLY if you are very experience with HTML/CSS/jQuery UI, etc. Personally I work with the DOM all day long so it's second nature. But typical game developers might find it easier to do everything in Phaser (which is the equivalent of positioning everything fixed or absolutely, without using floats) because they don't have to learn the intricacies of HTML/CSS.