Jump to content

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


Recommended Posts

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");
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 weeks later...

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 years later...

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.

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.

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.


  • Recently Browsing   0 members

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