[FREE] [OPEN-SOURCE] Outline Effect

Update 2019-10-11:

Hello guys!

Sorry but it's really hard to maintain an open source project while still working full time, I will do what I can...

Someone has been working on the project and I just merged his changes.

If you're interested in seeing what has changed, check out the fork: https://github.com/JimmyCushnie/Outline-Effect-but-its-faster

For the latest version go to: https://github.com/cakeslice/Outline-Effect

I will release it in the asset store soon

If you find any bugs it's better to post an issue on GitHub where we can track it. Use this link: https://github.com/cakeslice/Outline-Effect/issues



PS: Many thanks to https://github.com/JimmyCushnie !!!



----------------------------------------




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:
github.com/cakeslice/Outline-Effect

 

http://github.com/cakeslice/Outline-Effect

i cannot seem to open that binary demo scene or i think it is empty
you can force text in editor settings so the demo scene gets checked in as text instead of binary
http://docs.unity3d.com/Manual/class-EditorManager.html

tried following steps but...

looks great! thanks a lot

 

I'll check it out. You're welcome

 

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.

 

Thank you, this is awesome.

 

Same issue here! Would love a fix

 

Just added an option to fix this problem ("Flip Y" on the effect component). Get it on github!

 

You are awesome dude! Thanks for the fix!

 

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.

 

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!

 

This kicks ass! NIce job, dude!

 

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:

 

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.

 

Alternatively, I found that you can add an empty entry to the OutlineRenderers list before adding your own. Which may be a simpler solution.

 

Just finally implemented this into my project, looks great!
Got the "Temp Buffer" error, but mafia's suggestion works well.

 

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!

 

This is fixed in the last version. I also added black/dark outlines functionality

 

This is a bug. Get the latest version on Github for the fix! You're welcome

 

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!

 

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.

 

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.

 

Done!

The effect now supports MeshRenderer & alpha cutoff

https://gfycat.com/RashGenuineBlackwidowspider

 

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.

 

.

 

This wasn't intended, it's fixed now: https://github.com/cakeslice/Outline-Effect/commits/master

 

.

 

Thanks for this awesome asset.

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.

 

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?

 

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

 

This effect is expensive and not a lot can be done except lowering the resolution

 

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!

 

Thanks, I'll check it out!

 

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?

 

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"

 

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?

 

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.

 

This is the settings of hexs and camera. And I found that if dark outlines turned on, the outline will behave normally.

 

That's wierd. Can you send me a project that reproduces the issue?

 

I am really grateful for your patience. The project is attached in the post.

 

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!

 

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.

 

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.

 

Perfect - got it working. Thanks for the quick reply.

 

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!

 

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;

 

Not possible, sorry.

 

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."

 

Okay, glad you like it!

 

Thank you so much! You just saved a few hours or even days for me! Works great!

 

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)