How to make a 2D OUTLINE in Unity!
Vložit
- čas přidán 2. 05. 2020
- Thanks to NVIDIA for sponsoring!
Learn more about NVIDIA Studio► nvda.ws/38AaA8K
Razer Blade Studio laptops► www.razer.com/studio
In this video we create outline effect using 2D Shader Graph!
● Learn more about 2D Shader Graph: • Get started with 2D Sh...
● 2D Glow Tutorial: • How to make 2D GLOW in...
● Get Gothicvania Church Pack: assetstore.unity.com/packages...
● Get the Ninja Sprite: assetstore.unity.com/packages...
Inspired by: • Sprite Outline (Animat...
····················································································
❤️ Donate: www.paypal.com/donate/?hosted...
► Join Discord: / discord
● Website: brackeys.com/
● Twitter: / brackeystweet
● Instagram: / brackeysteam
····················································································
► All content by Brackeys is 100% free. We believe that education should be available for everyone.
❤️ Donate: www.paypal.com/donate/?hosted...
····················································································
♪ "ES_Dress Code_Black - oomiee" by Epidemic Sound
♪ "Brooklyn Flava - Mattias Andreasson" by Epidemic SoundIn this video WE CREATE AN AWESOME 2D Glow effect.
![🔥Эффект огня шейдером [Tutorial] [Shader Graph] - процедурный пиксельный костёр](http://i.ytimg.com/vi/WQemGUcz0QM/mqdefault.jpg)
About 15:16, it's because PNG images store the entire 32-bits of a pixel (RGBA) even if the alpha channel is 0. So random color data that the artist left on the picture is sustained even if the pixel is transparent. It's super easy to fix without additional shader overhead - just pop the spritesheet into any decent image editor (e.g. GIMP) and export it with the "keep transparent pixels color" option deselected. You could also replace all transparent pixels with black transparent pixels instead.
I respect your wisdom about shaders and appreciate your helpfull suggestion for the community but please dont call gimp a decent image editor.
@@SquareTales Well, I'll settle for "sufficient for the task".
You make it sound like it's some kind of bug, but that's actually useful feature. If you work with non-premultiplied alpha, this kind of color preservation in transparent parts helps with texture filtering (otherwise you'll be filtering with black pixels which will lead to this ugly black outline around transparent sprites).
@@SquareTales GIMP is a great image editor
@@bip901 Lets agree on sufficient :P
damn i needed this, thancc daddy bracky
ur welcome
nice
Danny ur comment looking thiccc
Dani how bout we collab and make a really good game. Even better then karlson
notice me senpai
Hey Brackeys... I'm a 17 year old student from Greece and I discovered your videos probably 2 years ago. I'm naturally pretty lazy but I thought it would be the perfect time with the quarantine going on to follow one of your tutorials and I'm happy to say I finished my first game. It really means a lot to me as I want to become a developer and you've really helped set me to the right path. I'm forever grateful ❤️
good job mate!
I love Greece, hope your game is already done))
Great video as always!
One caveat with this technique is that the outline thickness will change with sprite dimensions. If you want constant outline thickness regardless of sprite size you can use the "Texel Size" node and some math to calculate the offset value for the "Tiling and Offset" node.
For instance, if you want the outline to be 1 pixel thick, the horizontal offset will be 1 / texelWidth and the vertical offset will be 1 / texelHeight
I wish I'd found this comment before I muddled through it on my own. An added bonus to dividing by "Texel Size" is that your sprite sheet doesn't need to be square.
Your comment needs to go higher
Exactly what I was looking for, thank you so much :)
I swear, I was just making this earlier today looking for reference material
I don't know how Brackeys is doing this 🤷♂️
Same lol
NO SWEARING THIS IS A CHIRSTIAN MIMECRAFT SERVER
@@genuinefraud8262 thx for your protection
This was pretty helpful for those who wanted an outline on their characters.
Thanks, Brackeys!
I searched for this like 2 months ago and I couldn't find anything satisfying, but the unity lifesaver is here again!
I waited so long for this video. Thank you for finally making it! 😁
There are so many methods to achieve this:
You can create a height map of your sprite and light the edges up, with this you can also create 2D lightning.
You can create a sobel filter and light it up (multi pass) + offset.
You can create a depth/copy of your texture, sample the edges, light them up or add the pixels to the edges and light them.
Are there any decent Shader Graph resources on these other methods? I'd love to learn one that's less about creating 4 drop shadows (if that's possible)!
@@cam4722 I really wish I could give you an answer. I came from the GLSL world. There're plantly of tutorials and examples. But mostly you have to implement the examples and tweak some values, add or remove chuncks to get an understanding and create your own and share it.
@@dragoran149 Sorry for the necropost, but could you send me some tutorials on especially the sobel filter and depth copy methods?
Man you are such an inspiration you inspired me to make games and a CZcams video aside to that i love it when i get a notification for one of your videos thank you
Thank you so much for this Brackeys, best Unity tutorials as always!
Looks amazing, thanks for the tutorial! :D
Thank you for this! This shader is a great exercise to learn basic operations like Add, Subtract, Multiply, Negate.
This guy makes a tutorial out of everything, props to you!
Shader graph makes me Giddy! It's so much easier than writing by hand. Great tutorial, 2D outlines are commonly needed by us game developers!
Thank you! I have been waiting for someone to make this exact shader in shader graph. I really did not want to learn how to write my own shaders by hand.
Pra galera que usa uma versão mais recente do unity. Botão Direito do Mouse "Criar Nó", então procure "SPLIT" do "Add Out(4)", você se conecta ao "In(4)" do "Split" e então do "A(1)" do "Split" ao "Alpha(1)" do "Fragment".
For people who use a newer version of unity. Right Mouse Button "Create Node", then look for "SPLIT" of "Add Out(4)", you connect to "In(4)" of "Split" and then to "A(1)" of "Split" to the "Alpha(1)" of the "Fragment".
Espero que isto ajude :) / Hope this helps :)
muito obrigado mano
fricking life saver
My life saver love u bro
Herói
I just want to thanks for your videos. I started to learn unity and you are a great teacher!! :) Thank You! :)
Exactly when needed! Thanks! :)
Coool! Really great 2D outline tutorial! 👍🤓🧡
That's a fantastic effect!
Incredible , this is exactly what I wanted to do one week ago but I hadn’t find anything
This was really cool, thanks.
Cool solution, though I think tiling the shadow could probably optimize the shader graph script, rather than copy/pasting the shadow offset three times.
Excellent tutorial, works perfectly S2
Thanks for the help!I really need it:)
Brackeys, thanks you for your work!
Cool video! Useful!
15:00 I think that weird colour glitching around the sprite is BECAUSE you have an alpha channel, making it black should remove it, but then your sprite will have a black border, you have already fixed this problem
If anyone else had problems with the outline not displaying properly due to the image dimensions of each animation, my solution was to add a Texel Size node with the input MainTex (thus getting the dimensions of the image) and then divide the offset by the width and height of the image so that it is consistent with every image size (divide by width for horizontal offset and by height for vertical offset).
@Deduction God Bless you Brother! You helped me a lot !!
Maan Amazing video . I will use that in my game!
congrats on 1 mil
For future videos, do you think you could come up with a way to control multiple objects similar to Command & Conquer, Age of Empires, and such? Basically a kind of top-down mouse/keyboard controlled system where you select a bunch of units and perform actions like "Go here" with right-click or CTRL-1 to group objects and pressing just 1 deselects everything, then selects all objects in group 1?
Most of what I've seen in Unity is the player controlling a single object and actions are performed from that object. I'd like to see something C&C style and how it can be done for a game I'm brainstorming on.
Really usefull, thanks dude
now do a 3d outline please brokkis daddy
Fresnel and round. Not good at giving exact instructions but that's what you're gonna want to use. Not the best outline effect since it's more of an inline but it works.
A real toon outline would require some vertex manipulation, more than I think Shader Graph is capable of right now.
Edit: said voronoi when I meant fresnel. I'm dumb
You can also play around with the fresnel node. Maybe combine it with a smoothstep node. To display a black color, try using negate and one minus nodes. Its actually really simple, but you are right its more of an inline than an outline. Anyways a quick way to make things more visible in a dark scene.
Anderson Macedo In blender you can create a duplicate and invert the normals and make it a bit bigger
Anderson Macedo it’s brackeys
@@philiphanhurst2655 lier this is better
czcams.com/video/QSQwZlRMVAM/video.html
15:15 From what I understand, the "color glitch" is caused by the way an image is saved, though I call it "color noise".
When an image is saved with an alpha channel, pixels that are transparent don't simply have no color, but rather the image viewer knows to ignore whatever color data is present. However, the program used to format the image to a file has to make a choice as to how the color data should be represented, and from there it's just a problem of optimization. Typically, the color it chooses is based on what color is nearest the edge so that it can represent the same data in fewer bytes. For example, it is easier to say "the next 13 pixels are brown, but only render the last one" as opposed to saying "the first 12 pixels are black but do not render them, then the next pixel is brown which should be rendered".
Wow! An NVIDIA Sponsor! 🤯
Shaders is fascinating
Nvidia Add ... Damn ... Brackeys, you really made it, hahaha! BUT, you derserve it! Without you, i wouldn't be programming! Thx man!!
This is awesome!!!!
for whoever cant find 2D Renderer and Shader Graph,
goto window > package manager
search "Universal RP" while selecting Unity Registry
install it
Thx for the tutorial
You should make a tutorial on randomly generating worlds
powerful soulution!!!! thank you!!!
Nós brasileiros somos gratos a ti
Would love to see a borderlands style 3D one for non-pixel art sometime too, would also be extremely helpful!
In the meantime if you are curious, just read stuff about "cell shading", that is what the stylized shader is called.
There's a video from Unity about that: czcams.com/video/joG_tmXUX4M/video.html
You are great!!! :) Do you plan to continue your tower deffense game programming course?
I've followed the tutorial thoroughly. But when I apply the material (with shader) to a SpriteRenderer I get the correct border, but I also get what looks like "texture bleeding". Meaning outside of the texture I get colors from the original texture. I can't figure out what I am doing wrong.
Unfortunately it is not working for me. The Shader Graph is also looking different now instead of Master Unlit Graph you got Vertex + Fragment. The color is not a Base Color (4) anymore, but it is now stupidly divided by Base Color (3) and Alpha (1). Sadly, I am going to look for another Tutorial, which is more recent.
yes im facing the same issue here. Im using a farly new version of unity 2023.2.2f1 and a lot has changed the last few months when it comes to the URP Nodes. Im curently tring to find a way to recreate this with the new notes but it seems very confusing so far + noone has jet made a good tutorial about it as far as i see:( also im not sure if this tutorial lets you use this shader for multiple sprites easily...
@@copicatscorner works fine for me, just have to take the 'out' of the final add node twice, once feeding into the base color of the fragment and once into a split node, take the alpha out and feed that into the fragment alpha
15:16 I figured out how to fix the color outline at the end. Create an add node, add the alpha from the original image input, add the outline from the clamp. Put this into the alpha spot on Fragment below Vertex.
The idea here is the alpha should cover the entirety of the original image, plus the entirety of the outline you just created, but nothing more than that. As long as you do that the entire rest of the image will be transparent except the outline you created.
Can we get a video on how to script these shaders? For example, turning on and off the outline affect when the player gains a power up? Great video, as always. Thanks!
If your outline thickness doesn't seem to be responding to the thickness variable, don't forget to go to your sprite, Sprite Mode, Mesh Type and change "Tight" to "Full Rect".
The shader will only show the outline within this border, so you need your sprite border to include the full picture including all of the alpha, not just the colored portions and a small border around them.
thank you man, you saved my sanity.
Could you do a video or even a series looking at the new core game engine. It just released into open alpha and it looks promising.
This is... AMAZING! OMG i'm almost crying :')
I'm really grateful for your amazing and useful content!
If you're working with a newer version of unity you also should add a split after the final addition in the graph, so that the alpha channel goes in the alpha component of the Fragment and the Vector4 goes in the Base Color. Otherwise there are issues when you just default map the Vector4 to the Float that is the Alpha component of the Fragment.
Im trying to do it, but i cant make it work. Where i should put the split and connected to what?
@@Maxo13_vth Right Mouse Button "Create Node", then search SPLIT. From the Add Out(4) you connect to In(4) from the Split and then from the A(1) of the Split to the Alpha(1) from the Fragment.
@@FortbloxNET yes, i dont remember how, it was some time ago, but trying and trying, i found a way to make it work. Ty anyways.
Make a 3d platformer tutorial!
With velocity retention and other stuff, like what can be found in games like Mario Odyssey and A Hat In Time
Make a 3d platformer tutorial! With velocity retention and turning in the direction of movement!
I LOVE YOU BRO!!!
Yay a new video
Can you please make a revamp of your survival game series please and also love your vids keep up the good work
Why don't you make a tutorial for sub graphs? I think it would be a perfect opportunity as a continuation of this video because basically the same nodes are getting used for the 4 directional offsets.
could you make a video about how to make a jelly cube or just jelly, you are the only one who makes good tutorial
Where Is the "color 4" in the new version of Unity? anyone can help me out please?
thanks!
There is a youtuber hes name is derrad he made me know your channel and i loved it :) ❤
the gltchy color beyond the borders is pixel dilation from the looks of it, used for padding, for mip maps afaik.
I think, The 2d outline is cool feature.
That what I call a sponsor
Good tutorial! Helped a lot. Can you make a tutorial how to make DataBase SQL connection with Unity without PHP if possible.
My Outline work well only when i create left outline. But when i create right, top and bottom. I think issue come from Add node. When i add left, right, top and bottom together. Even i slide thickness to 0, its still small Outline around the player. Help me please!
Awesome video thanks Brackeys
But is it possible to switch the outline off through script?
smug brackeys is my favorite
The color glitching is due to the import from png probably. Take Photoshop and note that if you save an image with alpha in png format it will save the transparency. If you remove the transparency after opening the png file you will get those strange, glitchy artefacts.
If you save your file as TGA on the other hand you will have full information about colors and alpha in separate channels. Also you won't get these artefacts.
Hey Brackeys! How are you? Hope you’re doing good! I have a little question, could please make a tutorial on a online player list on the top right of the screen? I would really appreciate it! Thank you!
You could use a saturate node instead of a clamp.
I think is faster and compact
Hi dude! your videos have helped me a lot now that I am making a project on Unity. I have a question regarding an issue similar to this video. I am making an interactive map, and I want that, when mouse is over a building (a sprite) it gets an outline, and when the mouse point to other place, this outline disappears until the mouse is over it again. I don't know if I explained it well, I hope so. Thank you in advance!
tysm big brack
I want have your skill... let’s learn !
Can I joint?
The first three seconds, I thought my computer is lagging like shit
Not gonna lie, they got us in the first half
inverse kinematics for next vid pls 💙
I had to add a clamp between the Subtract and the Multiply nodes to not have the opposite side of the offset direction go transparent (alpha goes below 0 after the subtract, and does't go back all the way up with the final add). Might only be an issue when the outline goes in only one direction.
Might be a little late, but thank you so much for the tip! Was struggling on this for awhile, but you really helped me out. :)
Can u also upload the menu project file?I am getting a lot of trouble with it.please
How does this work with multiple sprites? Do you have to set this for every sprite in your game? If you add more sprite animations, do you have to adjust this?
Nice
Important notion: Use you need to setup a UNIVERSAL RENDER PIPELINE project in order to make use of this tutorial.
Love your videos. Do you know how to implement normal maps on tiled2unity?
Brackeys i need help. I've been into music production in 2 years but I want to start game development. What should i focus on because it takes up time and im still a student
Hello, nice vídeo can you made one explaining how you organize the project, things like how you decide where you will add the script.
Other question, can you teach how to create a skins system ?
is it possible to copy the sprite in full on white and scale it up, so u have the background of it. Afterwards u should still be able to adjust glow, intensity and thikness with a shader connected to the copied sprite. I dont know if this works, but it would do the same as copy it to all 4 directions and should be faster to do...
Nice tutorial as usual, i have a question for you or anyone in the comments that might know the answer, im recently experimenting with shader graph in 2D and i wanted to add a specular map but none of my attempts seem to work, if anyone knows how to add it plz let me know.
Hey Brackeys! Love the content you put out, I´m a 2D artist and I was wondering, if anyone can answer, Can I use animations with the shader system?
In unity or where?
@@ANAND-zw1on In unity. In his tutorial of setting up the shader graph and using it to make the player disappear with the thanos effect, he used noise to do it, I was wondering if it was possible to use a custom sprite sheet or animation.
Joel Aguirre As said in the tutorial, the shader will also work with animations, but first you need to check if the box image is enought big to contain the outline.
Have you ever considered doing a tutorial on mod support for games?
I need solid script for projectile trajectory prediction, a video on that would help a lot
dude i think he is stalking me. when i need something he makes a video of it
Noname same
Same!
I literally spend hours searching for a vid like this, and when I stop looking, he makes one
Can you make a video that covers the best practices to use when working in Unity?
26,000 people: Interesting.
Me: I can do something better than that, I have smarter eyebrows.
Brackeys: No you fan, I am smarter.
So im having a few issues with this method in the newest Shader graph. First is that I dont get the Unlit Master Node and instead I get two nodes instead. The second is that the MainTex sprite looks all janked up, even when previewed on a quad.
i just wanna ask, that instead of offsetting outline textures why don't you just scale it and offsetting might leave the corners . if it is possible, well, i am new to shader graph, so i don't know much about shader graph
Hi, I was trying to make an object glow inside, it's boudary is black, I used a subtract to isolate the glowing part, then color that and then I add the texture of only the boundary but this doesn't work, any idea how o solve this? I thinks is because of the black color but even if I change the color to red (for example) the boundary doesn't appear in the master
Can you make something for us to download that gives us your visual studio fonts and colors?