• Runtimes

  • Spine Web Player - Transparency Issue with v3.4 Exports?

    anglais

Hello! I'm working on a project to embed previously-exported Spine animations onto a website, but I'm running into a few issues with inconsistent transparency display between browsers.

The Spine models I'm working with were exported from Spine 3.4.02, with premultiplied alpha disabled. I'd prefer not to reexport these models unless I really have to. I'm using the 3.7 version of the spine-player.js file, since 3.8 requires .skel files that I don't have.

When using the Spine Web Player to view these models with alpha turned off, they display perfectly fine in both Firefox and Chrome. (example: On the other hand, if I turn alpha on, there's a white "glow" around the edges from anti-aliasing. (example:

As well, if I attempt to export the canvas to an image (i.e. via .toDataUrl), some sections of the image appear with a strange, inverted color scheme. This is not visible on the canvas itself; only in the exported image, and this behavior only happens in Firefox and not in Chrome. I'm not very familiar with WebGL, but I suspect this is something to do with undefined behavior as a result of alpha multiplication. (example:

So, my questions:

  1. Given that I'm working with models from Spine 3.4, is the web player the best option for embedding them? I've tried with the 3.5 version of the widget as well, but it looks like these issues also appear here.
  2. Furthermore, is this a problem with version compatibility, the way the viewer is handling transparency, or is it an issue with the exported Spine files?
  3. What's the best way for me to get these files to display correctly with transparent background and for the canvas to save properly as individual images?

Thanks for the help. Sorry if this is a little scattered - I'm afraid I'm not familiar with this software. Happy to provide more information as needed.

Related Discussions
...

Officially to use an x.y version runtime you need to export from the corresponding x.y version editor:
Versioning - Spine User Guide: Synchronizing versions
It may work to use data from some other version of the editor, but if it does it is only a coincidence! I'm surprised 3.4 data can work with 3.7.

gentoo a écrit

I'm using the 3.7 version of the spine-player.js file, since 3.8 requires .skel files that I don't have.

FWIW, you can use the 3.8 player with JSON. It does not require binary (.skel), though binary is often smaller, especially when gzip or brotli is applied.

The latest spine-player in 4.0 has a whole lot of improvements. I highly suggest using that. You'll need to load your data in 3.4.02, save a Spine project file, then open the project in 4.0.xx and export. It might be worth doing this just to see if it fixes the problem.

The white glow is strange. It looks a bit like additive blending. Are you using any slots set to additive blending? Maybe try setting them all to normal, just to see if it fixes the problem.

Are you using PMA images? Have you set premultipliedAlpha on the player to match? It defaults to true if not set. Maybe try using or not using it to see if it helps your problem.

gentoo a écrit

As well, if I attempt to export the canvas to an image (i.e. via .toDataUrl), some sections of the image appear with a strange, inverted color scheme.

This seems like it may be a bug in Firefox.

gentoo a écrit

1. Given that I'm working with models from Spine 3.4, is the web player the best option for embedding them? I've tried with the 3.5 version of the widget as well, but it looks like these issues also appear here.

The player is definitely the easiest way to using Spine animations on a web page. I'm not sure if the problem is with using 3.4 data in 3.7 runtimes, or with the 3.7 runtimes themselves. If you can show the problem in the 4.0 runtimes, we'd be happy to fix it!

gentoo a écrit

2. Furthermore, is this a problem with version compatibility, the way the viewer is handling transparency, or is it an issue with the exported Spine files?

I can't say. We'd need to first pinpoint exactly what is going wrong.

gentoo a écrit

3. What's the best way for me to get these files to display correctly with transparent background and for the canvas to save properly as individual images?

I would expect the 4.0 player to work correctly. Saving the images may be a browser bug, but you might be able to work around it by using or not using PMA, or maybe something else. You'd need to try things out and hope to find something that works. Sorry I don't have a better answer!

gentoo a écrit

Thanks for the help. Sorry if this is a little scattered - I'm afraid I'm not familiar with this software. Happy to provide more information as needed.

No worries! We want you to be able to use Spine animations on the web and we're happy to help getting things to work as you need.