Adding Outline to Character based on multiple sprites?

Hey Guys,

I’m currently looking for a method to add an outline to a character which is made out of multiple sprites.

I’ve downloaded the PSD-Importer, 2D Animation and 2D IK Packages for Unity and “rigged” my Character already.

Now I want to give the whole character an outline (not the separate sprites itself).

This is how it currently looks:

I want to achieve a similar effect to this one:

I thought about copying each Sprite as a child of the original ones , move it behind the orignal character and resize it as a completely white sprite, but because the sprites use the SpriteSkin-Script, the scale/position are contrained to the bones of the character.
Also this wouldn’t be a very performant method.

Would love if someone could help me out with this.

EDIT:
I’m using Unity 2020.1.0b4, Universal Render Pipeline

2 Likes

anyone?

did you find any solution perchance?

Bump!

Been looking everywhere for a possible solution to this exact issue - need to outline a boned/multi-sprite character in URP, but it’s impossible to find one. The only solutions are per-sprite, or meant to work with 3d.

Would really appreciate any help, and I’m sure others could use some info on this too, judging by previous posters.

2 Likes

Found a way to create an outline around a multi-sprite character! If anyone is trying to do the same, my solution was as such:

  • Put the character sprites onto a separate layer (not sorting layer) to be outlined (for me, this was ‘Player’).

  • Create a second camera identical to the main camera that can only see the new layer. Make sure the environment is set to solid color, with an alpha of 0, and make sure it is not tagged with MainCamera.

  • Create a new Sprite Unlit ShaderGraph, and a new material to use that shader.

  • Follow one of the several YouTube tutorials for creating a 2D outline shader. Probably by accepting _MainTex and then offsetting the texture 4/8 times in each direction to create the outline.

  • In a short script:

  • Initialize a new RenderTexture to the size of the screen.

  • Assign the new camera’s output to the new texture.

  • Assign the new material’s texture to the new texture.

  • Create a UI Canvas on the main camera, and set the render mode to Screen Space - Camera. On that canvas, add a RawImage that fills the entire canvas. Set the RawImage’s material to the new material with the shader. This will send the output of the shader to the RawImage, which is then inserted into the camera’s view. I found this to be much more convenient than trying to use and position a quad in a 2d scene, which is done for 3d stuff.

That’s all. Basically, second camera puts the character with alpha onto a render texture, which is then fed to the outline shader, then put onto the material, which is put onto the RawImage object.

Here’s a simplified version of the script I’m using, which I put onto the second camera, which should do what you need. You would probably need to enhance it to deal with stuff like screen resize.

public class PlayerCameraManager : MonoBehaviour
{
    [SerializeField] private Material playerMaterialSquare;
    [SerializeField] private GameObject targetRawImage;

    void Awake()
    {
        // Generate a new render texture for the player layer.
        RenderTexture playerTexture = new RenderTexture(Screen.width, Screen.height, 8);
        Debug.Assert(playerTexture.Create(), "Failed to create texture.");

        // Assign the new, screen sized texture as the target texture of the player camera.
        Camera camera = GetComponent<Camera>();
        camera.targetTexture = playerTexture;

        // Set material texture to the texture generated by this camera. This will then be processed by the shadergraph.
        targetRawImage.SetTexture("_MainTex", playerTexture);
    }
}
6 Likes

After searching online on 300 different places, this proposed solution finally worked for me. I have decided to create a sample project with this here: https://github.com/albertferras/unity-2d-rigging-shader/tree/master

1 Like