loading...
Cover image for Programmatic Animated Sprite Coloration

Programmatic Animated Sprite Coloration

brettendo profile image Brett Bush ・4 min read

Preface

Whether it's for alternate outfit skins, enemy classes, or defining different types of items, sometimes you may wish to have a single, animated sprite region (e.g. shirt color, magic color, hair color) have the ability to either be or morph between multiple colors.

Ingredients

  • A Unity Project
  • Layered Sprite

Prep the Animation

  • Define which region of the sprite you would like to be programmatically colored, then extract that region into its own layer. We will refer to this layer as the "Color Layer".

  • Tip: If you have any shine or shadow you wish to preserve on the Color Layer, create separate layers with different opacities of white for shine and different opacities of black for shadow.

  • Fill the entire shape of the contents of the Color Layer as full opacity White #FFFFFF for each frame. It should look like a white silhouette of the original contents.

  • Note the order of the Color Layer with regards to other layers in the sprite.

Export Sprite Sheets

  • Hide all layers except for the Color Layer and export the sprite animation as a sprite sheet, representing the Color Layer of the sprite.
  • Show all layers
  • Hide the Color Layer and all layers behind the color layer (if present) and export the sprite animation as a sprite sheet, representing the foreground of the sprite.
  • If there are any layers behind the Color Layer (there are none in this example), show all layers and hide the Color Layer and all layers in front of the Color Layer and export the sprite animation as a sprite sheet, representing the background of the sprite.

You should now have two sprite sheets representing the Color Layer, and the foreground of the sprite (background too if present).

Prep in Unity

  • Drag the sprite sheets images into a Unity Assets/Sprites folder (or wherever you like in your project)

  • Split the sprite sheets:

    • Select the sprite sheet
    • From Inspector, select Sprite Mode Single
    • If you're working with pixel art, make sure to set the Pixels Per Unit and Filter Mode to "Point (no filter)"
    • Enter Sprite Editor
    • Split the sprite sheets either automatically or by row
  • Expand the sprites of the foreground animation, highlight all of them, and drag them into the Scene. This will create an animation automatically, name it as you like.

  • Expand the sprites of the Color Layer animation, highlight all of them, and drag them into the Scene. This will create an animation automatically, name it as you like.

  • From the Scene Hierarchy, name the foreground object "Foreground Object" and the Color Layer object "Color Object".

  • Also in the Scene Hierachy, drag the "Color Object" to be a child of the "Foreground Object" and set the Color Layer's X and Y coordinates to 0 (in order to be centered with parent).

  • Adjust the Z scale of the parent object and the Z position of the child object in order to ensure that the expected layer order is preserved.

Add Colors

  • Next add the Colorizer.cs script to your project and attach it to the Foreground Object
/**
 * originated by Brett Bush @ Alternate Bit
 *
 * feel free to expand this code and use however you like
 */

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Colorizer : MonoBehaviour
{
    public Color color;

    private SpriteRenderer colorRenderer;

    void Start()
    {
        foreach (Transform t in transform)
        {
            if (t.name == "Color Object")
            {
                colorRenderer = t.gameObject.GetComponent<SpriteRenderer>();
                colorRenderer.color = color;
            }
        }        
    }
}

  • Set the Color in the Inspector of the Colorizer script.

  • Next, make a few copies of the Foreground Object and give them different color values.

  • Press Play on your game and you will notice that they are color all through programming AND are fully animated! Feel free to expand this script further to do cool effects such as fading or other chameleon-like effects.

Bonus: Working with an Animator with Multiple Animations

  • This approach also works for sprites that may have multiple animations for a single Animator. It takes a little more work, but once set in place, is just as easy to leverage. A prerequisite to this approach is that you have an existing mapped Animator with multiple animations (e.g. Idle and Run).

  • Similar to when working with one animation as we did above, make sure that subsequent animations have been split between Foreground and Color Layer sprites. For example, if you had an Idle and Run animation for your sprite, ensure that you have Foreground and Color Layer sprite sheets of each animation.

  • Ensure that the Animator Component is on the parenting Foreground Object.

  • Select the Foreground Object from the Hierarchy and open the Animation window (Window > Animation > Animation)

  • In the Animation window, select the Animation you wish to work on.

  • Click Add Property and select "Color Object: Sprite"

  • Next, drag the corresponding Color Layer sprite images into the "Color Object: Sprite" property of the Animator and line them up with the Foreground sprites across the frames of the animation.

  • That's it!

Posted on by:

brettendo profile

Brett Bush

@brettendo

👾 Indie Dev Founder at AlternateBit 🧩 LoFive - iOS, puzzle tile game 🌀Project Swirl - Unity, 2D pixel action platform

Discussion

markdown guide
 

Thanks for sharing this! I have a game I've been working periodically on done in XNA and meaning to convert to Unity. We didn't want to make a ton of assets but wanted to denote differences through the color.

I am going to have to revisit this post when I pick up that port again.

Thanks for the info!

 

I guess I just assumed you had to have separate sprites for color transitions, never would have thought you could do this.

I could see this being useful for animating your character taking damage. You could change the color between red and his normal color rapidly to give the effect of getting hit. Great write up! If you can't tell I don't normally work with sprites, so thanks for explaining this in a way that I can understand :)