Jump to content

Preferred way to integrate HTML elements into game.


William
 Share

Recommended Posts

I am working on a PandaJS game that requires several reasonably complex GUI elements (eg slidebars, buttons, non-bitmap text). I think the best way to accomplish them would be to use the overly the existing HTML tags that implement these elements over my game. 

 

I am wondering if anyone has experience doing this and knows the best way to go about it. I can think of several ways to hack it together but am curious if there is a recommended way. I am especially concerned about making it work well with re-sizing. PandaJS does a good job of resizing the game as the window grows and shrinks and I would like that functionality to still work with overlapped elements if possible. 

Link to comment
Share on other sites

I am 100% sure you can achieve this using only panda/pixi's graphic elements. but if that doesn't work for you, you can still use the DOM and create elements using javascript and style them with css. you can make the elements position relative to the canvas so it would make it easier to position them above it.

Link to comment
Share on other sites

I am 100% sure you can achieve this using only panda/pixi's graphic elements. but if that doesn't work for you, you can still use the DOM and create elements using javascript and style them with css. 

I know It can be done with only pixi/panda elements. The question is should it be done. After all why replace already existing and battle tested html input elements with something that would probably be buggier and harder to style.

 

 

you can make the elements position relative to the canvas so it would make it easier to position them above it.

Interesting, would you mind telling me how?

Link to comment
Share on other sites

I know It can be done with only pixi/panda elements. The question is should it be done. After all why replace already existing and battle tested html input elements with something that would probably be buggier and harder to style.

 

 

Interesting, would you mind telling me how?

 

place this code in your main init function:

var canvas = game.system.canvas; //get canvas reference//create overlay element that will contain all your UI elements and place it below canvas elementvar overlay = document.createElement('DIV');overlay.id = 'overlay';overlay.style.cssText = canvas.style.cssText;overlay.style['pointer-events'] = 'none';if (canvas.nextSibling) {  canvas.parentNode.insertBefore(overlay, canvas.nextSibling);}else {  canvas.parentNode.appendChild(overlay);}//create ui element and add it to the overlayvar uiElement = document.createElement('BUTTON');uiElement.style['pointer-events'] = 'auto';var t = document.createTextNode('click me');uiElement.appendChild(t);overlay.appendChild(uiElement);
Link to comment
Share on other sites

That works well initially but does not re-size when the canvas re-sizes (eg when I bring up the dev tools).

 

Is there any way to either make the size of the overlay relative to the size of the canvas through css or update it to the same size via javascript when the canvas resizes?

 

I suppose you could watch for window resize events and reset the size of the overlay to match the canvas but I am curious if there is a more idiomatic pandajs way to do it.

 

You would also need to adjust the positioning of any child elements to represent a percentage of the original size. I imagine you could do this by storing the original dimensions then looping through them and using some math to make there positions a percentage of the original.

 

It seems like a neat implementation of such capabilities would be a good candidate for a plugin.

Link to comment
Share on other sites

That works well initially but does not re-size when the canvas re-sizes (eg when I bring up the dev tools).

 

Is there any way to either make the size of the overlay relative to the size of the canvas through css or update it to the same size via javascript when the canvas resizes?

 

I suppose you could watch for window resize events and reset the size of the overlay to match the canvas but I am curious if there is a more idiomatic pandajs way to do it.

 

You would also need to adjust the positioning of any child elements to represent a percentage of the original size. I imagine you could do this by storing the original dimensions then looping through them and using some math to make there positions a percentage of the original.

 

It seems like such a neat implementation of such capabilities would be a good candidate for a plugin.

I don't know about any built in panda.js functionality for this.

As you said you could update the overlay size on window resize event based on game.system.canvas.clientWidth and game.system.canvas.clientHeight. then you could set your UI elements sizes to be percent based and they will inherit their size from the overlay div or you can set them to be pixel based and scale them up according to game.scale in case you have the hires option set in the config file or according to game.system.canvas width/height.

I updated the original bit of code to include pointer-events: 'none' on the overlay div and pointer-events: 'auto' on the ui elements as otherwise you wouldn't be able to click on the game below.(although sometimes it's a required functionality to block background interaction)

Link to comment
Share on other sites

About buttons you can check the plugin I wrote, here : http://www.html5gamedevs.com/topic/12290-button/

For input and other elements, Neso told me that he'll work on a UI plugin to make this work more easier ;)

 

Then, you could rewrite existing HTML components by drawing them with Panda, it's an hard work but if you make it work, you'll be proud of your work ^^

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...