Jump to content

Use Phaser sprite in DOM?


Recommended Posts

Hi all,

I've looked in the documentation, but can't seem to find anything referring to this issue.

I've loaded a spritesheet through Phaser, but I want to use one of the frames of the spritesheet in the DOM, not on the canvas, and was wondering whether this was possible? Maybe a method to export the frame to a DataURI that can be used in the DOM?




Link to comment
Share on other sites

var elm, frame, sprite;

frame = sprite.texture.frame;
elm = document.createElement('div');

Object.assign(elm.style, {
  backgroundImage: 'url(' + sprite.texture.baseTexture.source.src + ')',
  backgroundPosition: (-frame.x) + 'px ' + (-frame.y) + 'px',
  width: frame.width + 'px',
  height: frame.height + 'px',
  overflow: 'hidden'



Link to comment
Share on other sites


  • Recently Browsing   0 members

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