Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Adding Outline to Character based on multiple sprites?

Discussion in '2D' started by Cellenseres, Apr 8, 2020.

  1. Cellenseres

    Cellenseres

    Joined:
    Mar 30, 2015
    Posts:
    67
    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:
    upload_2020-4-8_12-32-50.png

    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
     
    Last edited: Apr 8, 2020
    drewjosh and jonjons like this.
  2. Cellenseres

    Cellenseres

    Joined:
    Mar 30, 2015
    Posts:
    67
  3. andreburgobaptista

    andreburgobaptista

    Joined:
    Dec 17, 2020
    Posts:
    1
    did you find any solution perchance?
     
  4. prokhorvlg

    prokhorvlg

    Joined:
    Sep 12, 2021
    Posts:
    6
    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.
     
    drewjosh and iancox890 like this.
  5. prokhorvlg

    prokhorvlg

    Joined:
    Sep 12, 2021
    Posts:
    6
    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.

    Code (CSharp):
    1. public class PlayerCameraManager : MonoBehaviour
    2. {
    3.     [SerializeField] private Material playerMaterialSquare;
    4.     [SerializeField] private GameObject targetRawImage;
    5.  
    6.     void Awake()
    7.     {
    8.         // Generate a new render texture for the player layer.
    9.         RenderTexture playerTexture = new RenderTexture(Screen.width, Screen.height, 8);
    10.         Debug.Assert(playerTexture.Create(), "Failed to create texture.");
    11.  
    12.         // Assign the new, screen sized texture as the target texture of the player camera.
    13.         Camera camera = GetComponent<Camera>();
    14.         camera.targetTexture = playerTexture;
    15.  
    16.         // Set material texture to the texture generated by this camera. This will then be processed by the shadergraph.
    17.         targetRawImage.SetTexture("_MainTex", playerTexture);
    18.     }
    19. }
    20.  
     
  6. etkzz

    etkzz

    Joined:
    May 20, 2023
    Posts:
    5
    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