Search Unity

Outline/glow effect for 2D sprite

Discussion in 'Shaders' started by tropicalgames, Oct 15, 2014.

  1. tropicalgames

    tropicalgames

    Joined:
    May 15, 2014
    Posts:
    22
    Hi, I'm looking for outline/glow effect, which I can apply to 2D sprite. I don't care about 3D. Something pretty simple, because it has to be efficient on mobile devices. I know I can make second sprite with outline made in any graphical editor, but I have a lot of spritesheets, so I think shader will be better option. I only found somewhere extension or something, but it was said it doesn't work with sprites (3d crap only). I'm also aware that unity pro has that feature, but it's not worth buying to just get this one :) I'm looking for something free, efficient and simple.
     
    frenchfries5 and H0tCh0colat3 like this.
  2. tropicalgames

    tropicalgames

    Joined:
    May 15, 2014
    Posts:
    22
    Someone achieved this and wants to share :) ?
     
  3. aubergine

    aubergine

    Joined:
    Sep 12, 2009
    Posts:
    2,880
    Things are not simple, efficient and free at the same time.
    In your case, you have to paint all sprites individually.
     
  4. tropicalgames

    tropicalgames

    Joined:
    May 15, 2014
    Posts:
    22
    What if in code I'd make outlines of all frames, add them as childs and just hide/show them?
     
  5. aubergine

    aubergine

    Joined:
    Sep 12, 2009
    Posts:
    2,880
    Trying wouldnt harm, you could even learn new things.
     
  6. vetasoft

    vetasoft

    Joined:
    Nov 15, 2013
    Posts:
    432
    rakkarage likes this.
  7. Ippokratis

    Ippokratis

    Joined:
    Oct 13, 2008
    Posts:
    1,521
    @tropicalgames I think that the shader approach is not efficient.
    I would embed the outline in sprites themselves.
     
  8. hfiani

    hfiani

    Joined:
    Aug 5, 2014
    Posts:
    2
  9. bingheliefeng

    bingheliefeng

    Joined:
    May 8, 2014
    Posts:
    12
  10. Johannski

    Johannski

    Joined:
    Jan 25, 2014
    Posts:
    826
    spilat12, bome99, alpha_nexus and 3 others like this.
  11. Houdy

    Houdy

    Joined:
    Nov 14, 2018
    Posts:
    1
    If anyone doesn't want to go the shader way, there's this:
    https://assetstore.unity.com/packages/slug/146082

    This outliner creates an outline texture and attaches it as a child object of the parent sprite renderer.
    It can also recursively outline the entire hierarchy and can be used for UI Images as well.
     
  12. NathanAbercrombie

    NathanAbercrombie

    Joined:
    Apr 23, 2020
    Posts:
    2
    This is what I was looking for when I found this thread. Simple, open source, and easy to adapt. Basically just uses the Sobel edge detection algorithm on the alpha channel of the texture in a shader. I am going to use this. I will eventually figure out if I can make it outline a "compound object" where there are multiple sprites. I think I can either do this by first drawing all the component sprites to a buffer, and then running the sobel algorithm on that, or I can run this shader before drawing the sprites, so that it will be "behind" the sprites and only the outermost outline will appear.
     
  13. boadleFTG

    boadleFTG

    Joined:
    Nov 23, 2017
    Posts:
    18
    Did you ever get this work with multiple sprites?
     
  14. nikhilbailey

    nikhilbailey

    Joined:
    Sep 20, 2020
    Posts:
    1
    I discovered a free, efficient, and simple way to highlight a sprite, with no addons required:

    1) when you are designing your character, create it slightly brighter (glowing state)
    -if it is a premade sprite, you can use third-party software to do this
    2) use the SpriteRenderer color feature to change the sprite into its original shade, and tweak it to whatever you want
    -for me its (210, 210, 255)
    3) use the SpriteRenderer object to access the color feature

    Note: While this method acts similarly to just using two different images, It can be modified with loops to create an animated glow effect, or neatly wrap multiple glow states into a list (List<Color>). It is simply an alternative.

    Code (CSharp):
    1. //Tweak the value to whatever fits your sprite
    2. private static readonly Color baseColor = new Color(210, 210, 255);
    3. private static readonly Color highlightColor = new Color(255, 255, 255);
    4.  
    5. //Should be different function for each type of sprite
    6. public void makeHighlighted(GameObject gameObject) {
    7.         gameObject.GetComponent<SpriteRenderer>().color = baseColor;
    8. }
     
  15. DBarlok

    DBarlok

    Joined:
    Apr 24, 2013
    Posts:
    268
  16. spilat12

    spilat12

    Joined:
    Feb 10, 2015
    Posts:
    38
  17. mgear

    mgear

    Joined:
    Aug 3, 2010
    Posts:
    9,440