Additive Different Between Spine and Unity

JulianNobleSAG

Hi!

I'm having some issues getting additive elements to look 1 to 1 between Spine and Unity. I understand things won't look completely 1 to 1 between the two, but for this particular animation the differences are pretty extreme when it comes to the additive parts and I'm not sure if this is a limitation or if my workflow needs adjusting.

Here is what the first frame looks like in Spine:

Here is that first frame in Unity:

The effect is intended to be fire, but in Unity it's so desaturated that it ends up looking more like smoke.

Some notes on how I have it set up:

Unity: Project is in linear color space
Unity: Using the Skeleton shader
Unity: PMA Vertex Colors is checked on under SkeletonAnimation > Advanced
Unity: png has Alpha is Transparency checked on
Unity: Material has Straight Alpha Texture checked on
Spine: Flame slot is set to Additive blend mode
Spine: Flame alpha is animated by tinting from white > black in Spine, rather than using alpha
Spine: Flame source png has no alpha and uses a black background:

I have had better luck with other animations in regards to additive elements looking correct, so I'm really not sure why this looks so different.

Appreciate any help on this, and I'm happy to provide source Spine files if needed!

Mario

Are you exporting your texture atlas with PMA?

JulianNobleSAG

No, I am exporting with Premultiply Alpha unchecked.
But also the flame source image has no alpha transparency.

Here are the rest of my export settings:

Jamez0r

I don't have much experience with using the Blend Modes from within the Spine project, but could you verify that the exported / packed .png (the one in your unity project) also has no alpha transparency?

If you can upload your Spine project for the flame I could take a peek.

Nate

The blend modes are implemented in spine-unity by changing shaders/materials. BlendModeMaterialsAsset should be applied on import to automatically assign blend mode materials:
Docs: spine-unity Runtime Documentation: Included SkeletonData Modifiers BlendModeMaterialsAsset
Blend mode shaders: https://github.com/EsotericSoftware/spine-runtimes/tree/3.8/spine-unity/Assets/Spine/Runtime/spine-unity/Shaders/BlendModes
BlendModeMaterialsAsset code: spine-runtimes/BlendModeMaterialsAsset.cs at 3.8

For each attachment in a slot, BlendModeMaterialsAsset sets the RendererObject (which is the texture region and material/shader for the attachment) based on the slot's blend mode. If this is not done, the attachment won't have the (eg) additive material and so won't render with additive.

This is not actually ideal, since code can take any attachment and set it on any slot, or set it on multiple slots which may have different blend modes. Unity makes us jump through a lot of hoops, but we'll see about doing it another way in the future.

JulianNobleSAG

Yes I'm certain the exported png has no alpha for the additive flame portion.

We are using a greyscale source image and tinting it within Spine. Maybe that could be partially responsible for the difference in appearance?

Here is my project and the exports:

Harald

Sorry for the late reply. The main cause of the difference is the Unity: Project is in linear color space setup. When using your test asset we can see the same result when switching from Gamma to Linear color space. Is switching to Gamma space an option for your project?

Spine 4.0 will provide a setting to display in either Gamma or Linear blend mode to match the result in Unity.

JulianNobleSAG

Thank you for the reply!

Unfortunately, switching to Gamma color space is not an option for our project.

Sounds like that Spine 4.0 update will be our best bet 🙂

But also I found that tinting the fire within Spine was the main differentiator. Applying color to the source image of the additive effect and only tinting it from black to white to control transparency seems to bring it much closer in Unity to how it looks in Spine.

Spine:

Unity:

Original Source:

New Source:

This workflow is a bit limiting, as we can't really do hue shifting, but it works well enough for this effect.

Harald

Thanks for getting back to us. I just had another closer look at your project setup and your image files.

What I noticed is that your grayscale image is rather dark (with maximum at value ₀.65), while your new red source image is using the entire value range from 0.0-1.0. Linear color space would especially darken already dark input colors when blending, so making it use the entire 0-1 range would compensate at least a part of it.

Did you try a lighter version of your grayscale source image (e.g. by using Photoshops Auto Contrast on the gray image) with the existing tint colors? In theory this should lead to a result close to the red one when tinted in Spine.