Making a div (or other HTML object) into a sprite on Phaser

[dmarques42]

I am a recent (about 4 months) user of Phaser, and have successfully built 4 games, not too complex. I have been struggling with putting up geometrical objects without making an image and loading that. The easiest way (that I know) to dynamically create the geometries I want (eg, rounded rectangle with dashed border) is a div with CSS styling specifying the border and position. This works from inside the javascript code fine, but then I cannot specify the Z-plane (to make it appear at all I need to do position:absolute and then it is always on top, and buttons beneath it do not get touch/click events) and I cannot enable drag.

 

Is there a good solution for this within a Phaser game? If I can get this mix of CSS styling and sprites to work, there are a lot of things I could do with them.

 

The attempt:

 

    objBack = document.createElement("div");

    objBack.setAttribute("id", "objectBackground");

    var xoff = WIDTH/2-obhalfx

    var yoff = HEIGHT-butLoc

    objBack.setAttribute("style", "position:absolute;float:center;left:"+xoff+"px;top:"+yoff+"px;color=#77ccff;width:800px;height:200px;border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;border: 2px dashed #8a888a;")

 

    var gameDiv = document.getElementById("game");

    gameDiv.appendChild(objBack);

 

[rich]

It's pretty easy to position DOM elements over a Phaser game, but they will always capture mouse/touch events first, before Phaser can get to them. Depending on your game this may be ok - or it may not, it's hard to know!

[dmarques42]

Sorry I wasn't clear. I can position the floating div over the game, no problem there. But there are 2 problems: I can not put it between other elements (eg, under a button) and any other object in the same space does not get events, as you say, even if the div is transparent. That is a problem for me. I can process mouse/touch events for the floating div, but then that processing is different from the event handling of the sprites, though I can get that to work, of course. What I would like is to either make the floating div behave as a sprite (insert in z-position relative to other objects either based on order of build or based on bringToTop(), and use the Phaser drag&drop mechanisms) or apply css style (eg, border) to geometry objects. Another option for some situations would be a mechanism to pass through mouse/touch events to objects under, but Phaser (or canvas) does not appear to have a mechanism to do this. But that wouldn't work for what I need in this instance. The biggest problem is the z-plane, getting a floating div behind a button or other object. That doesn't seem to be possible.

[rich]

You can't put DOM elements INTO a Phaser game (so they appear behind any other game element) as Phaser renders to a canvas, which is one single DOM entity, so the browser has no way of positioning within that.

[dmarques42]

Thank you for the explanation, I thought that was the case. I was more hoping for a way to put CSS styling (or like it) on a sprite, eg rounded corners and dashed border on a rectangle.

[hustlerinc]

You could turn the contents of a div into a png image then load it as you would any sprite. There are frameworks that do this for you, but I haven't used any myself. Here's one: http://html2canvas.hertzen.com/ and here you can see it in action: http://jsfiddle.net/Sq7hg/2/

 

Based on the question in the topic this is what you want, but I would only do this if you actually need to use it as an actual sprite in your game. If it's just UI elements I would stick with a div.

[dmarques42]

Thank you, that is useful, though I wish I could do it dynamically -- that is, create the div and then before display in the browser, make it a sprite. Otherwise, just using Photoshop works fine. The reason for my wanting to create sprites on the fly from parameters is that I scale and change layout to suit each browser/device, and scaling of images is not quite as nice as making divs to the correct size, and changing layout (portrait/landscape) for images requires 2 images (or distortion on resizing). The reason I want them as sprites instead of just divs is that I typically use these for backgrounds of interactive objects, and I can't push a div behind anything else on the canvas, and can't pass mouse/touch events through the div.

[thevrnrd]

You can pass the handled click event of the overlayed div on to the canvas.

[waechtertroll]

To sort elements, if z-position is not enought, try depth-sorting your elements by giving them proper z-indices. In CSS, objects on top of each other are sorted by z-index: <number>, from low number = below to highest number = on top.

To pass on your events you might want to create an event listener that does nothing but pass the event on, and add that listener to all elements that might ever appear above those elements which are meant to receive clicks. You might want to search the web for the term event bubbling for some background information.