• Editor

  • How to change specific colors of an spine object

    inglés

  • Yimec

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

    Hello everyone!

    I'm working on a project where you can customize your character in different ways, and we're considering giving players the option to modify different color zones so they can choose the colors they prefer.

    I know that in Spine you can change the color of a slot, but would this mean having to modify the color of all slots separately?

    Speaking of a specific example, the character I'm attaching: we've proposed allowing players to change the orange fur and the white fur, giving each part a custom color. Is there a way to do this without having to divide, for example, the tail, into separate parts?

    Maybe some kind of RGB channel masking or something like that?

    Thanks a lot for your time!

    Related Discussions
    ...

    To allow players to customize specific color zones of a character in Spine, you can use a few different techniques. One approach is to split the character's assets into separate attachments for each color zone you want to customize, such as the orange fur and white fur. This way, you can change the color of each attachment individually by modifying the slot colors. Another method is to use grayscale assets and apply tinting to achieve the desired colors. This technique involves using a grayscale image and then applying a color tint to it, which can be done programmatically at runtime. Unfortunately, Spine does not support RGB channel masking directly, so you would need to manage color changes through these methods.

    • Harald

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

    @Yimec You could separate (split) your slots for each customizable color: you would then duplicate each multi-colored attachment into a red part and have transparent areas where it should not be colored (the white part), then have the same attachment with the white part and red parts transparent, and so on for each color. You would need to make sure the pair of attachments is always active at the same time, and deformed in the same way (e.g. use Linked Meshes).

    Another solution where you don't have to duplicate slots and attachments would be to write a custom shader (or Shader Graph) where you first author mask textures for each color (or a single mask texture use RGB channels, R for color1, G for color 2, B for color 3, and A for something else) and then multiply (or otherwise tint) the masked areas of your atlas texture.

    Note that you could create the mask images on the attachment level (one mask image per normal attachment) instead of drawing masks based on the exported atlas. Otherwise you would need to re-do the mask when the exported atlas layout is changed.

    When authoring masks on the attachment level, you would via a script run the Spine CLI texture packer to pack the attachments programmatically the same as your normal attachments. Just make sure to have the same transparent areas (whitespace), or disable whitespace stripping to not end up with a different atlas layout.

    • Yimec

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

      Hi Harald,

      My experience with shaders is limited unless using Shader Graph. Are there any specific considerations I should keep in mind when working with Shader Graph and Spine?

      I really like the RGB mask solution (using different channels for masking), and having three customizable elements is more than enough for my needs. I've used this approach in other contexts but never in combination with Spine.

      Additionally, could you provide more information about the CLI texture packer?

      Thanks a lot!

        • Harald

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

        Yimec My experience with shaders is limited unless using Shader Graph. Are there any specific considerations I should keep in mind when working with Shader Graph and Spine?

        You can check out the following documentation sections:
        https://esotericsoftware.com/spine-unity-rendering#Shader-Graph
        https://esotericsoftware.com/spine-unity-rendering#Writing-your-own-shaders

        In your case you could go with a straight-alpha workflow (regarding atlas texture export), then you mostly need to handle the skeleton's vertex color that comes from slot colors. This is not for the custom two-color tinting, just in general. If you don't need additive slot blend modes, you could disable Advanced - PMA Vertex Color at the SkeletonRenderer component to receive normal RGBA vertex color and multiply it with the texture color. If using PMA Vertex Color, you would need to change the output blend mode of your Shader Graph to Premultiply.