I'm creating an HTML5 game using Canvas, but want to use DOM for the GUI for the reasons mentioned in there articles:

That being said, we have a component on the GUI that needs to be animated which will be through a sprite. Is it possible to render sprite animations through a DOM element?

  • 1
    \$\begingroup\$ Your question is just about displaying an animated image sequence in an HTML element? Does this require input from a game developer? Or would a web developer be able to answer this? There are a lot more of the latter, so asking this (or searching for existing Q&A) on StackOverflow might get you answers faster. ;) \$\endgroup\$ – DMGregory Feb 26 '18 at 2:50
  • \$\begingroup\$ @DMGregory fair, but I figured this domain knowledge falls under a game developer creating web games \$\endgroup\$ – Growler Feb 26 '18 at 3:29
  • \$\begingroup\$ @Growler It doesn't seem not on-topic here, I think the point is that you might get faster feed back there by virtue of the significantly larger user base as there are more HTML5 developers than there are HTML5 game developers. It's fine to leave it here provided you don't cross-post it. \$\endgroup\$ – Pikalek Feb 26 '18 at 4:13
  • \$\begingroup\$ @Pikalek I posted on SO, so I'll remove here \$\endgroup\$ – Growler Feb 26 '18 at 4:19

Yes. Your options are:

  1. use a (second, small) <canvas>, and draw your animations to that
  2. use an <img> or background-image (e.g. on a <div>) and use Javascript to update which image is displayed on a timer
  3. use a no-JS solution using CSS animation steps()
  4. encode an animated gif for each animation you want to display and just point an <img> to the appropriate one

Option 1 is the most versatile: for example, you could render live thumbnails of in-game scenes to your UI, or 3d spinning images of items.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.