How can I include DOM elements inside of Phaser?

[0penS0urce]

Hey guys! I was wondering how to include DOM elements inside a Phaser canvas, since I am using jscolor to try and include a color picker in my game. If I just use a DOM element outside a game, there are forseeable scaling problems, since I want to try to get it on mobile, and it will be very problematic unless it is part of the canvas. Thank You So Much! Also, if you have an alternative color picker using Canvas, please post about it!

[rcoaxil]

Pretty sure you can't, Phaser works within canvas element and renders all the stuff right into it, or in other words, none of the stuff it renders are an actual DOM elements - there's only canvas.

But, with some clever CSS, you can implement scalable divs outside of the game canvas. Some of the latest additions include "calc( )" which works exactly as you'd expect, and "vw" and "vh", which stand for "viewport width" and "viewport height" respectively.

[d13]

17 hours ago, 0penS0urce said:

there are forseeable scaling problems, 

All you need to do is create an HTML UI layer that's positioned over the Phaser canvas (using CSS relative and absolute positioning) and scale it to the same ratio as your Phaser canvas.

I use this scale function:

https://github.com/kittykatattack/scaleToWindow

... apply it to both your Phaser canvas and HTML layer.

Here's an example of how this works in general with the Hexi engine - you'll have to adapt the specifics for Phaser:

https://github.com/kittykatattack/hexi#htmlIntegration