Sign in to follow this  
quarks

Integrating DOM Elements

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.