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.
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).
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.
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 ❤️
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.
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 :)
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.
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).
Man you are such an inspiration you inspired me to make games and a RUclips video aside to that i love it when i get a notification for one of your videos thank you
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
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".
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.
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.
@@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.
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.
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.
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
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.
Cool solution, though I think tiling the shadow could probably optimize the shader graph script, rather than copy/pasting the shadow offset three times.
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.
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.
The tutorial is specific to pixel art, but the thumbnail shows a totally different sprite with a totally different outline and the title does not suggest it is for pixel art. This kind of bothers me, because it is deceiving for newer devs
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.
Great tutorial, but I have something weird happening to my texture. It's a PNG file. Without the shader, it looks fine in Game and Scene with the transparent background. When I apply the shader/material to it, it pops a black background almost as if it was a JPEG instead of PNG. Searching on the internet, it seems like this problem is called chroma keying and I've seen some people suggesting how to fix it using script, but I wonder if you know any tricks to solve that via sprite editor or directly in the shader. Thanks!
For everyone who still needs the answer on how to fix it: After the last "Add" node, you'll need to create a "Split" node, connect these nodes, get the alpha channel from "Split" and connect it to Alpha channel in "Fragment" box
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!
I love Brackeys tutorials because they show things that I didn't know existed. I hate Brackeys tutorials because the methods used are often unoptimized and could be done better. Can someone say what is the overhead for using this approach? What if I have a separate spritesheet that includes the outline - how much cpu will it save?
@@herlantmajor5883 I was wondering how sampling the sprite 5 times per pixel compares to just creating a posteffect which samples every screen pixel once.
How about making one copy in the same location with the outline colour and scaling it up, thus no strange scaling and no need for additional copies of the texture for each direction 🤔
Good comment, and that would work for most 2d games, however this is a pixel art game and if you scale the sprite the pixels will become different sizes and not look right in the game. Also this will generally follow the shape much better, which isn't as important in non-pixel art games but for this game it looks better if it is even as in this method.
It seems like it'd work, but you'll actually get weird behaviors with certain shapes, and the outline won't quite match up. Source: Artist for a decade. I've tried this for a lot of things and it's never worked quite right.
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.
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!
I'm trying to follow this using the new split master nodes, but I always get a weird glitchy effect from importing my sprite in. Does anyone have a fix for this?
I had the same issue and found on a forum that it can be fixed by dragging the alpha from the original sample texture into the alpha under fragment, hope that helps
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
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...
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
Trying to apply this shader component only when I mouse over the sprite is harder than I thought, wouldn't the shader component take a lot of CPU if my screen is having like, I don't know, 30+ sprites and I hover them 1 by 1 rapidly? That's a design choice I'm facing right now, trying to reproduce the sprite highlight from diablo 1 & 2 so...!
how to create outline for object that contains multiple objects, with skeletal animation doe? I want to achieve the outline as the whole object, appearing only the outer side of the whole object. Basically the result would similar like this, only it has separate objects (sprites) unlike this one, because this one is animated with frame to frame sprite sheet. Making outline for each sprite, and overwrite each other is not really what I want to. So any suggestion anyone?
At 1:30 it shows one of Windows 10 lock screen wallpapers. I have the same one set on my computer, and I have no idea what that red and black thing is. Can someone please fill me in? I've shown it to several people and they all just say "it looks like machinery of some sort." What sort of machinery, though?
hi, when i set the cinemachine and use the confinner component and hit play to test, it automatically start the "isCrouching" parameter. Some idea that why this happens?, thanks!!(i'm using a polygon collider instead of a tileset, i dont know if that influences)(and use the CharacterControllerScript and PlayerMovementScript too).
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!
4 года назад
@brackeys i want to highlight all edges of an 3d object like wireframe but with texture like blender cavity. Not only outline. But i can't find any guide or tutorial. Please help me.
How do u make your own textures. I found out about unity yesterday and i try to make a bowling game. Can you explain how i can draw my own texture for my bowlingball?
i wonder if it works on tilemap? I want to add outline to my tilemap. Not imported tilemap but made by Tilemap Component. I tried the way in video, but there are outlines for evey single grid rather than for entire map.
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?
Hi, I'm new on this world of game development and i have a doubt, do you recommend to first learn blender o any software of the sprites and 3D objects or it's better to learn how to use unity first?
Hi. if you are looking to learn game development, it is probably better to dive straight into developing and learn whatever sprite/model designing software you want later as you need it.
Hi Brackeys! can you make some tutorial about First Person Shooter on mobile phones because other tutorials didn't work for me. Some tutorials are very old now and i couldn't find enough information to make this could work. Please Brackeys i need your help. Thank you! Btw Congrats on 1M subs! keep it up!!
Has anyone been able to make this work on Unity Shader Graph 10? I keep getting the outline on the opposite of the intended side, and it's always just white for some reason. Any help is appreciated!
Hello I was wondering if you could make a "Bacon" clone tutorial. The physics seem similar to pinball but I can't find a good 2D or 3D tutorial for pinball games either. Thank you
Is it possible to make outline when your character consists of several gameobjects each of them having sprite component (head, body, etc), and animated in Unity? When we dont have atlas
my outline is not working properly. Might have to do with the fact that my sprite sheet is not like a square and instead rectangular? Is there any way to change the form of the sprite sheet?
![Unity Tutorial [ Deutsch ] Volumetric light in URP](http://i.ytimg.com/vi/qtO3YQjUpGI/mqdefault.jpg)
![🔥Эффект огня шейдером [Tutorial] [Shader Graph] - процедурный пиксельный костёр](/img/1.gif)
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.
@@Mijdax 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).
@@Mijdax 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
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 :)
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))
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?
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 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
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.
Thank you so much! This finally made it work for me
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 !!
I searched for this like 2 months ago and I couldn't find anything satisfying, but the unity lifesaver is here again!
Man you are such an inspiration you inspired me to make games and a RUclips video aside to that i love it when i get a notification for one of your videos thank you
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
I waited so long for this video. Thank you for finally making it! 😁
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".
This was pretty helpful for those who wanted an outline on their characters.
Thanks, Brackeys!
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!
I just want to thanks for your videos. I started to learn unity and you are a great teacher!! :) Thank You! :)
for whoever cant find 2D Renderer and Shader Graph,
goto window > package manager
search "Universal RP" while selecting Unity Registry
install it
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.
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.
you are a lifesaver
Nvidia Add ... Damn ... Brackeys, you really made it, hahaha! BUT, you derserve it! Without you, i wouldn't be programming! Thx man!!
Coool! Really great 2D outline tutorial! 👍🤓🧡
Looks amazing, thanks for the tutorial! :D
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
ruclips.net/video/QSQwZlRMVAM/видео.html
Thank you so much for this Brackeys, best Unity tutorials as always!
Wow! An NVIDIA Sponsor! 🤯
Exactly when needed! Thanks! :)
Thank you for this! This shader is a great exercise to learn basic operations like Add, Subtract, Multiply, Negate.
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.
You should make a tutorial on randomly generating worlds
This guy makes a tutorial out of everything, props to you!
There is a youtuber hes name is derrad he made me know your channel and i loved it :) ❤
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
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: ruclips.net/video/joG_tmXUX4M/видео.html
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.
Cool solution, though I think tiling the shadow could probably optimize the shader graph script, rather than copy/pasting the shadow offset three times.
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. :)
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.
Brackeys, thanks you for your work!
congrats on 1 mil
I don't know if anyone needs this... if all the sprites you've got are each single image, this will still work and you won't have to correct a thing!
That's a fantastic effect!
Important notion: Use you need to setup a UNIVERSAL RENDER PIPELINE project in order to make use of this tutorial.
Incredible , this is exactly what I wanted to do one week ago but I hadn’t find anything
The tutorial is specific to pixel art, but the thumbnail shows a totally different sprite with a totally different outline and the title does not suggest it is for pixel art. This kind of bothers me, because it is deceiving for newer devs
I know right!
With added diagonal outline textures, this can still work
Seems to work fine for non pixelart aswell, as shown here: ruclips.net/video/FvQFhkS90nI/видео.html
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.
Excellent tutorial, works perfectly S2
could you make a video about how to make a jelly cube or just jelly, you are the only one who makes good tutorial
Great tutorial, but I have something weird happening to my texture. It's a PNG file. Without the shader, it looks fine in Game and Scene with the transparent background. When I apply the shader/material to it, it pops a black background almost as if it was a JPEG instead of PNG.
Searching on the internet, it seems like this problem is called chroma keying and I've seen some people suggesting how to fix it using script, but I wonder if you know any tricks to solve that via sprite editor or directly in the shader. Thanks!
Did you ever find a fix for this? currently having this issue :|
For everyone who still needs the answer on how to fix it:
After the last "Add" node, you'll need to create a "Split" node, connect these nodes, get the alpha channel from "Split" and connect it to Alpha channel in "Fragment" box
This was really cool, thanks.
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!
The first three seconds, I thought my computer is lagging like shit
Not gonna lie, they got us in the first half
I love Brackeys tutorials because they show things that I didn't know existed.
I hate Brackeys tutorials because the methods used are often unoptimized and could be done better.
Can someone say what is the overhead for using this approach? What if I have a separate spritesheet that includes the outline - how much cpu will it save?
Check it yourself with the profiler if you care.
Drawing the outline in the spritesheet is better, but it takes a lot more time and work.
You won’t save any «CPU » the shader is executed on your GPU, but sampling 4 times the same texture can be expensive with a lot of sprites
@@herlantmajor5883 I was wondering how sampling the sprite 5 times per pixel compares to just creating a posteffect which samples every screen pixel once.
NoArtistAvailable if you’re doing a blur that’s basically what happens and that’s slow
How about making one copy in the same location with the outline colour and scaling it up, thus no strange scaling and no need for additional copies of the texture for each direction 🤔
Good comment, and that would work for most 2d games, however this is a pixel art game and if you scale the sprite the pixels will become different sizes and not look right in the game. Also this will generally follow the shape much better, which isn't as important in non-pixel art games but for this game it looks better if it is even as in this method.
Good point..
@@sashadali8464 good answer.
It seems like it'd work, but you'll actually get weird behaviors with certain shapes, and the outline won't quite match up.
Source: Artist for a decade. I've tried this for a lot of things and it's never worked quite right.
Thanks for the replies, I don’t work in 2D and it was just a suggestion :)
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.
Maan Amazing video . I will use that in my game!
Make a 3d platformer tutorial! With velocity retention and turning in the direction of movement!
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
Thanks for the help!I really need it:)
Can you please make a revamp of your survival game series please and also love your vids keep up the good work
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!
I'm trying to follow this using the new split master nodes, but I always get a weird glitchy effect from importing my sprite in. Does anyone have a fix for this?
I had the same issue and found on a forum that it can be fixed by dragging the alpha from the original sample texture into the alpha under fragment, hope that helps
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
Where Is the "color 4" in the new version of Unity? anyone can help me out please?
the gltchy color beyond the borders is pixel dilation from the looks of it, used for padding, for mip maps afaik.
Can you make something for us to download that gives us your visual studio fonts and colors?
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
Nós brasileiros somos gratos a ti
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...
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.
If there is a way to give outline shader for 2D rigged object (contains child objects), that would be helpful too!! 😳😳
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
Can u also upload the menu project file?I am getting a lot of trouble with it.please
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.
Trying to apply this shader component only when I mouse over the sprite is harder than I thought, wouldn't the shader component take a lot of CPU if my screen is having like, I don't know, 30+ sprites and I hover them 1 by 1 rapidly? That's a design choice I'm facing right now, trying to reproduce the sprite highlight from diablo 1 & 2 so...!
how to create outline for object that contains multiple objects, with skeletal animation doe? I want to achieve the outline as the whole object, appearing only the outer side of the whole object. Basically the result would similar like this, only it has separate objects (sprites) unlike this one, because this one is animated with frame to frame sprite sheet. Making outline for each sprite, and overwrite each other is not really what I want to. So any suggestion anyone?
Cool video! Useful!
At 1:30 it shows one of Windows 10 lock screen wallpapers. I have the same one set on my computer, and I have no idea what that red and black thing is. Can someone please fill me in? I've shown it to several people and they all just say "it looks like machinery of some sort." What sort of machinery, though?
Might be a tent? It's hard to see in the video for me, but just guessing based on the other Windows Ten wallpapers I've seen.
A backpack?
hi, when i set the cinemachine and use the confinner component and hit play to test, it automatically start the "isCrouching" parameter. Some idea that why this happens?, thanks!!(i'm using a polygon collider instead of a tileset, i dont know if that influences)(and use the CharacterControllerScript and PlayerMovementScript too).
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!
@brackeys i want to highlight all edges of an 3d object like wireframe but with texture like blender cavity. Not only outline. But i can't find any guide or tutorial. Please help me.
How do u make your own textures. I found out about unity yesterday and i try to make a bowling game. Can you explain how i can draw my own texture for my bowlingball?
You are great!!! :) Do you plan to continue your tower deffense game programming course?
Awesome video thanks Brackeys
But is it possible to switch the outline off through script?
That what I call a sponsor
I think, The 2d outline is cool feature.
Me when the new brackeys video finishes 😨😰😱😲😵😡😡😡 then jump out of the window (all in my mind 😂)
i wonder if it works on tilemap? I want to add outline to my tilemap. Not imported tilemap but made by Tilemap Component. I tried the way in video, but there are outlines for evey single grid rather than for entire map.
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?
Hi,
I'm new on this world of game development and i have a doubt, do you recommend to first learn blender o any software of the sprites and 3D objects or it's better to learn how to use unity first?
Hi. if you are looking to learn game development, it is probably better to dive straight into developing and learn whatever sprite/model designing software you want later as you need it.
Hi Brackeys! can you make some tutorial about First Person Shooter on mobile phones because other tutorials didn't work for me. Some tutorials are very old now and i couldn't find enough information to make this could work. Please Brackeys i need your help. Thank you! Btw Congrats on 1M subs! keep it up!!
How would one go about doing this if the character consisted of multiple sprite renderers (arms, legs, body, head separated)?
Has anyone been able to make this work on Unity Shader Graph 10? I keep getting the outline on the opposite of the intended side, and it's always just white for some reason. Any help is appreciated!
Hello I was wondering if you could make a "Bacon" clone tutorial. The physics seem similar to pinball but I can't find a good 2D or 3D tutorial for pinball games either. Thank you
Can we achieve the same effect by coping the sprite and color it then scale it up a tiny bit ?!!
yeah thats what i was thinking. what a waste of memory duplicating it 4 times.
Nope, won’t look the same as it’s gonna be scaled from the center the objets on the left won’t have right outline for exemple
great stuff! Except when my sprite renderer is flipped (on one axis), the image turns invisible. Any ideas why?
Figured it out! Had to put Render Face to 'Both' in Graph Inspector Universal settings
Is it possible to make outline when your character consists of several gameobjects each of them having sprite component (head, body, etc), and animated in Unity? When we dont have atlas
This is... AMAZING! OMG i'm almost crying :')
I'm really grateful for your amazing and useful content!
my outline is not working properly. Might have to do with the fact that my sprite sheet is not like a square and instead rectangular? Is there any way to change the form of the sprite sheet?
Hi Brackeys! can you make a video on how to make enemy AI that if come in a certain range they start shooting at you but still stay on the same place?