• Unity

  • Additive Different Between Spine and Unity

    inglés
Related Discussions
...

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

  • Publicación n.º 3
  • Publicación en inglés

Are you exporting your texture atlas with PMA?

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:

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

  • Publicación n.º 6
  • Publicación en inglés

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.

5 días más tarde

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:

5 días más tarde

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.

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.

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 0.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.