Use Phaser sprite in DOM?

[praine]

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?

 

Cheers!

Paul

[bruno_]

You can take a screenshot of the canvas.

See this: https://stackoverflow.com/questions/6887183/how-to-take-screenshot-of-a-div-with-javascript

Try also to search "html5 canvas screenshot" to see more examples.

[praine]

Hi Bruno, thanks for that. Unfortunately, I need a specific sprite not the whole canvas. Any other ideas would be appreciated.

 

Cheers!

 

Paul

[bruno_]

You can do something simpler, the sprite is just an image like any other, just use it where you want like any normal sprite.

See this examples: https://www.w3schools.com/css/css_image_sprites.asp

[samme]

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

document.body.appendChild(elm);

 

[samme]