Search Unity

[FREE] [OPEN-SOURCE] Outline Effect

Discussion in 'Assets and Asset Store' started by cakeslice, Mar 28, 2015.

  1. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    Outline Effect for Unity



    FEATURES:
    Sprite/Line/Mesh renderer support

    HDR support (useful for bloom, etc...)

    Alpha cutout option

    Additive outline rendering option

    Merged outline between renderers (or you can add outlines between different colors)

    Erase option to keep outlines behind specific renderers

    Per renderer color support (up to three different colors)

    USAGE:
    Add "Outline Effect" component to camera

    Add "Outline" component to renderers

    TWITTER:
    cakeslice_dev

    DOWNLOAD:
    assetstore.unity3d.com/#!/content/78608
    github.com/cakeslice/Outline-Effect
     
    Last edited: Apr 9, 2017
  2. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    682
    Last edited: Mar 29, 2015
    EMGPY likes this.
  3. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    I'll check it out. You're welcome :)
     
    Last edited: Mar 28, 2015
    jasonzzz likes this.
  4. Cherno

    Cherno

    Joined:
    Apr 7, 2013
    Posts:
    513
    Hello, just found this, great asset. However, I have one problem with it :)

    Your demo project works correctly, however in my own scene, the sprite outline is mirrored on the y axis in screen space (if the sprite in at the botton, the outline is at the top, vertically mirrored). I tried to set up everythng like in you demo scene. Any ideas? :)


    Edit: This happens with an othographic camera.
     
    Last edited: Jul 24, 2015
    EMGPY likes this.
  5. Blasawebo

    Blasawebo

    Joined:
    Jan 2, 2015
    Posts:
    13
    Thank you, this is awesome.
     
  6. SebastianSTF

    SebastianSTF

    Joined:
    Nov 21, 2013
    Posts:
    1
    Same issue here! Would love a fix
     
  7. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    Just added an option to fix this problem ("Flip Y" on the effect component). Get it on github!
     
    Cherno likes this.
  8. Cherno

    Cherno

    Joined:
    Apr 7, 2013
    Posts:
    513
    You are awesome dude! Thanks for the fix!
     
  9. Cherno

    Cherno

    Joined:
    Apr 7, 2013
    Posts:
    513
    I have another question if you don't mind :)

    I use your asset to draw an outline around item sprites when the cursor is above them. When no item is under the cursor, The outline should disappear. Currently, in Update() of my cursor script I just cast the ray and check if it hits an item, and if yes, then the outLineRenderers list from the Outline script is created anew with the item's renderer as the sole element. If the ray doesn't hit an item, the list just gets cleared. What happens is that an error message is thrown by the OutlineEffect script

    Code (CSharp):
    1. Attempting to release RenderTexture that were not gotten as a temp buffer
    I wonder if it's save to ignore it; might there be any render texture bleeding or similar?

    Edit: Just solved it. I just set the renderTexture to null at the start of preCull whenever I have changed something in the outLineRenderer list.
     
    Last edited: Aug 2, 2015
  10. Sh4D

    Sh4D

    Joined:
    Dec 8, 2014
    Posts:
    17
    Hi, thanks a lot, you are a life saver! Althought could you help me to make the outline be black. I was searching for several days and started learning shader thingy, but really I can't seem to figure out a way to remove transparency when the color is black.... Thanks a lot anyway!
     
    Last edited: Oct 18, 2015
  11. Xelnath

    Xelnath

    Joined:
    Jan 31, 2015
    Posts:
    257
    This kicks ass! NIce job, dude!
     
  12. Xelnath

    Xelnath

    Joined:
    Jan 31, 2015
    Posts:
    257
    Having a weird issue where the whole shape is drawing ... well, oddly. Any ideas?



    Instead of being outlined.

    Update:

    Patched to unity 4.2.1p4 and that fixed part of the shading, but is still quite far off:

     
    Last edited: Oct 20, 2015
  13. Xelnath

    Xelnath

    Joined:
    Jan 31, 2015
    Posts:
    257
    A frame dump of the working project (yours) shows this at some point:



    I am wondering if the material my Image is getting set to is perhaps remaining stuck in this step.
     
  14. mafiadude1

    mafiadude1

    Joined:
    Jun 28, 2012
    Posts:
    59
    Alternatively, I found that you can add an empty entry to the OutlineRenderers list before adding your own. Which may be a simpler solution.
     
  15. The_BenEvans

    The_BenEvans

    Joined:
    Jul 31, 2012
    Posts:
    137
    Just finally implemented this into my project, looks great!
    Got the "Temp Buffer" error, but mafia's suggestion works well.
     
  16. Zinge

    Zinge

    Joined:
    Jan 30, 2016
    Posts:
    2
    I love this script so far. I am trying to tweak it to meet my needs but I've been having trouble understanding how the outline renderer colors work. If I have more than 3 objects that I want to apply outlines to in the scene, things seem to break down. I had thought that each Outline Renderer Color corresponded to the Outline Renderer of the same index. And that you could go between a value of 0, 1, or 2 to set the color of that renderer to Line Color 1, 2, and 3. But that doesn't appear to be the case.

    I've included a screenshot to give you an idea of what I am messing with. The squares in the scene are stacked in the order they appear in the Outline Renderer list. The Outline Renderer Colors are fine up until the 3rd and 4th element in the list. I want the 3rd element to be yellow and the 4th to be red but they're both green. I'm trying to add specific outline colors to objects depending on their HP. I have a system in place to populate the lists with the appropriate data, but the colors are behaving like they are in the below screenshot. Maybe it's not possible to accomplish this with the script but I thought I'd ask. Any insight on this would be super helpful. Thank you!
     
  17. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    This is fixed in the last version. I also added black/dark outlines functionality :)
     
    rakkarage likes this.
  18. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    This is a bug. Get the latest version on Github for the fix! You're welcome :)
     
  19. Zinge

    Zinge

    Joined:
    Jan 30, 2016
    Posts:
    2
    You're beautiful. Gonna try it tonight and see how it goes. Although I think I found an alternative to accomplish what I need. But it will be useful regardless. Thank you!
     
  20. ErikElgerot

    ErikElgerot

    Joined:
    Nov 24, 2014
    Posts:
    11
    It does not seem like the "outline" layer is used by the script when it draws the outline, is this correct?
    I wanted to add a blur to the outline, so I tried to cull the outline from the main camera (so I could pick it up on another camera with a blur effect), but even when all layers are disabled on the main camera, the outline is still drawn.
     
  21. coombsanity

    coombsanity

    Joined:
    Mar 24, 2014
    Posts:
    8
    Is there any way to get the shader to render outlines on textures? When we run it on sprites we get the results we want but our in game assets are textures and were just getting outlines on the PNG rather than the visual data.

    The object on the left is the 3d object with the png texture while the object on the right is a sprite.

     
    rakkarage likes this.
  22. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    Done! :D

    The effect now supports MeshRenderer & alpha cutoff

    https://gfycat.com/RashGenuineBlackwidowspider
     
  23. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    Sorry for late reply, the objects selected in the effect get their layer replaced temporarily to draw their "shapes" to a texture and then get their original layers back.
     
  24. rng42

    rng42

    Joined:
    Nov 23, 2015
    Posts:
    4
    exactly what i was looking for, but i got an issue. I need a 1 pixel thick outline for each resolution. if i change the resolution in game, the outline seems to scale and it is thicker than intended. how can i prevent it from resizing?

    thanks in advance!
     
  25. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    This wasn't intended, it's fixed now: https://github.com/cakeslice/Outline-Effect/commits/master
     
  26. rng42

    rng42

    Joined:
    Nov 23, 2015
    Posts:
    4
  27. Den_Now

    Den_Now

    Joined:
    May 12, 2015
    Posts:
    49
    Thanks for this awesome asset. :D

    Maybe you have an idea to fix my problem:
    When I use this on a desktop-build of my simple 2D game, everything is fine. But once I use this on my android build, my FPS decrease from 60 to about 5. Do you have an idea to increase the mobile performance of this shader? Maybe there is even a checkbox in Unity's settings that will greatly enhance the performance which I currently oversee.
     
  28. JustinBondy

    JustinBondy

    Joined:
    Oct 19, 2015
    Posts:
    1
    So far this asset seems amazing!

    I am having two issues though:
    1) The outline's seem to be rendered ontop of everything else in my scene, including any menus I open. I'm pretty new to Unity, and ordering things to be drawn ontop of each other has been confusing for me so far. Is there a way to adjust the script to have the highlights be behind specific objects?


    2) The outlines show up great running in the Unity Editor, but when I build to my android device, none of the outlines show up. It doesn't seem any exceptions are being thrown, the powers that accompany the outlines all trigger, but the outlines themselves do not show up. Have anyone else experienced anything similar?
     
  29. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    1) Maybe try "Screen Space - Overlay" mode in your canvas

    2) I'm not sure about this one, I will try it on my device and check it out
     
  30. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    This effect is expensive and not a lot can be done except lowering the resolution
     
  31. triper

    triper

    Joined:
    Dec 4, 2015
    Posts:
    1
    Hi, thanks for this asset, it's amazing!

    I had an issue, i used the asset in my playercontroller sprite (based on the unity tutorials) and, when it scales negative, the outline disappear and it never comes back.

    I avoided it by flipping 180 in y axis instead of scaling negative in x, but the bug is there. Just for you to know.

    Peace!
     
    Last edited: Aug 30, 2016
  32. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    Thanks, I'll check it out!
     
  33. JSwanFin

    JSwanFin

    Joined:
    Apr 10, 2013
    Posts:
    16
    Thanks for the great asset. Is there a way to draw inverse of what Erase renderer does? Like in the demo I would like to draw outline only for the parts that are behind the crate?
     
  34. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    Sorry but this is not supported. If you really want to do it, you will have to generate an Erase renderer that fills the entire screen with the exception of "the crate"
     
  35. carlself

    carlself

    Joined:
    Feb 5, 2016
    Posts:
    10
    Hi,Thanks for your great work. The hex on the left cover the hex on the right, but its outline doesn't. So how to set the z axis of outline? 1.png
     
  36. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    Hi, there is no way to set the z of the outline, it just "uses" the z of the sprite. It should cover the hex on the right.



    Are you sure the hex on the right doesn't have an outline applied? If you have a black outline it you be transparent and you wouldn't see it.

    Also to make the outline look better, you should make the sprite pixelated (use only 0 or 1 alpha) OR try to tweak the "Alpha Cutoff" value in the image effect.
     
  37. carlself

    carlself

    Joined:
    Feb 5, 2016
    Posts:
    10
    This is the settings of hexs and camera. And I found that if dark outlines turned on, the outline will behave normally. 1.png 2.png 3.png 4.png
     
  38. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
  39. carlself

    carlself

    Joined:
    Feb 5, 2016
    Posts:
    10
    I am really grateful for your patience. The project is attached in the post.
     

    Attached Files:

  40. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    Okay so the problem is that the outline effect uses additive rendering by default and with a bright color like that orange you can't see the outline.

    This is an example:


    I renamed the "dark outline" option to "additive rendering" to make it clear.

    So in your case you should turn off additive rendering and use the line color alpha value to make it a bit transparent.

    Also the line color alpha value wasn't being applied which is now fixed too.
    Get it on GitHub!
     
  41. _eternal

    _eternal

    Joined:
    Nov 25, 2014
    Posts:
    110
    Thanks for the asset! One question: is it possible to occlude an outline?

    For example, think of a glowing pickup in a platformer that's hidden behind a tile. The sprite will be occluded if I set its z-value higher than the tile's (or if I change the sorting layer), but the outline stays on top regardless.
     
  42. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    You're welcome!

    You can "erase" outlines, there is an example of this in the demo (https://gfycat.com/RashGenuineBlackwidowspider)

    The "crate" has an Outline component with the "Erase renderer" option, which basically erases the outlines drawn into the buffer.
     
    mikemccready and rakkarage like this.
  43. _eternal

    _eternal

    Joined:
    Nov 25, 2014
    Posts:
    110
    Perfect - got it working. Thanks for the quick reply.
     
  44. skytale

    skytale

    Joined:
    Feb 27, 2015
    Posts:
    1
    Hello cakeslice.

    First of all: Thanks for this great asset. Without such a great job I'd be lost. When shading, my understanding ceases ...
    Unfortunately, I have a problem with the outline effect. And maybe you have an idea.

    As long as I work in the editor everything is fine. But unfortunately I can see the outline effect only on one of my Android devices. I have used your sample project for testing, the only modification is, that I have removed OpenGL ES 3.0. Otherwise I get on the Android devices EGL_BAD_ATTRIBUTE messages.
    So, on my Galaxy S6 is everything as expected, but on a Galaxy S5 Mini and Galaxy Tab 3 there is simply nothing ... Do you have any idea what is going to happen? Or can I do anything to find out what is going wrong?

    Thanks!
     
  45. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    Sorry, but without a device that reproduces the issue I can't find the problem and I don't have any that do.

    But here's some things you can do to try to understand the problem:

    1. In OutlineShader.shader uncomment the line:
    Code (CSharp):
    1. //return outlineSource;
    2. In OutlineBufferShader.shader add those lines in the end of the "surf" function:
    Code (CSharp):
    1. o.Albedo = 1;
    2. o.Alpha = 1;
     
  46. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    Not possible, sorry.
     
  47. antonysze

    antonysze

    Joined:
    Sep 19, 2016
    Posts:
    1
    Edited:
    I found that it works on 5.5.0b3 and 5.4.1f1 on my personal desktop.
    Maybe it is not works on 5.4.0f3 or just something wrong on my school's computer.
    Btw, thanks a lot for the asset. ITS GREAT!

    ------------------------
    First, sorry about my English and I'm looking for help for my gradation project.

    I making a multi-player game in unity. (5.4.0f3 personal)
    I found this GREAT WORK and apply it to my game. Thank you so much for the asset.
    It work fine when I'm testing in Unity.

    But a problem was found that it go wrong in build version no matter is server side(host) or client side.
    Like below images (left is build version, right is testing in unity)
    I tried find the problem in many part of my own script. I still cannot find the answer.

    There are the list what my script will do:
    - change camera from main camera to player camera which has component <Outline Effect>
    - set active to true to "player camera" then "renderers" with <Outline> after finished initialization of "color" and "Outline Effect" in <Outline> script

    What I tried:
    - no longer check " _FlipY" in "OutlineShader.shader to make sure it run " uv.y = 1 - uv.y;"
    - no longer use Resources.Load<Shader>
    - build and test both x86 & x64bit version
    - solution on web: "Go Settings -> Graphics, and add the shaders you need to the "Always Included Shaders" list."

     
    Last edited: Nov 25, 2016
  48. cakeslice

    cakeslice

    Joined:
    Oct 18, 2014
    Posts:
    184
    Okay, glad you like it!
     
  49. FlopCoat

    FlopCoat

    Joined:
    May 6, 2015
    Posts:
    73
    Thank you so much! You just saved a few hours or even days for me! Works great!
     
    rakkarage likes this.
  50. MasqueNoMercy

    MasqueNoMercy

    Joined:
    Apr 26, 2014
    Posts:
    5
    Hi I can't get the base outline Demo to work. I have the following error:

    Code (CSharp):
    1. A game object can only be in one layer. The layer needs to be in the range [0...31]
    2. UnityEngine.GameObject:set_layer(Int32)
    3. OutlineEffect:OnPreCull() (at Assets/OutlineEffect/OutlineEffect.cs:155)