DOM UI and Sprites

Phaser 3
1

Hi Phaser 3 Devs!

I would like some help in regards to best practices for DOM UI and Sprites. I’m currently loading each of my Sprites from individual spritesheets. These spritesheets contain frames for Stand, Walk, Attack.

Now, I’ve done a fair bit of research and decided that a DOM UI is the best approach for my game as I need some text input. Everything was going smoothly until I ran this issue:

Problem: Sprites are added to the MapScene, clicking on the Sprite brings up the “Sprite Info” UI panel. Now, I want to display only the Stand frame from the Sprite in a DOM image.

Two options I’ve researched:

  1. I experimented with texture.getSourceImage() but it obviously returns the entire source Spritesheet image. Ideally if there was some method to extract the single Stand frame into a HTMLImageElement fairly efficiently that would be perfect.

  2. Another option would be to create a separate image with only the Stand frame in it and attach that to the Sprite or load it separately.

I would appreciate any other ideas or suggestion how to handle this scenario or best practices?