Preferred way to integrate HTML elements into game.

[William]

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. 

[LinkTree]

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.

[William]

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?

[LinkTree]

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);

[William]

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.

[LinkTree]

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)

[William]

Ok, thanks for your help. I will experiment with those techniques.

[SkyzohKey]

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 ^^