Building code-free shaders in Unity with Shader Graph
Вставка
- Опубліковано 27 чер 2024
- Heya Pals!
This week's tutorial is a bit of a deeper look into shaders using Unity's Shader Graph, where we build a custom outline shader from scratch while discussing the ins and outs of the tool.
Enjoy!
Music:
Helynt - Our New Horizons [Gamechops.com]
Chapters:
0:00 - Introduction
0:47 - Why use shaders?
1:48 - Getting started with Shader Graph
3:46 - Making your first shader
8:11 - Getting creative with maths (Colour and UV)
13:09 - What is an outline?
14:50 - Making an outline shader
17:43 - Offset subgraph
19:13 - Compositing the offset shapes
22:35 - Placing the texture inside
24:40 - Recap so far
25:14 - Adding a colour input & cleanup
27:43 - Results
28:26 - Reflection & outro
----
This video features clips from my stream. Catch it live: Mon, Tues, Wed and Fri 1-6pm AEDT.
Twitch: / adamcyounis
Twitter: / adamcyounis
Discord: / discord
Become a Patron at / adamcyounis
Download assets and games from the stream at uppon-hill.itch.io/
Later, pals! - Наука та технологія
I’d love to see more shader videos. They’re incredibly interesting, but hard for beginners (like me) to wrap their head around. So seeing you go through the process again and show more examples would be awesome. Your content is amazing.
One of the best shader graph tutorials out there! Thanks for your detailed explanation! More of shader graph please :)
Hey adam thanks for all your videos and tutorials, they are always helpful and insightful, I don't even use unity (or have any plan to) and I watch your unity specific videos because I know I will learn something new. You keep me inspired to continue learn art and game development. Thanks for all the hard work you put into these videos.
Wonderful video!! Shaders are such a cool topic too. I've always been scared of anything math related lol, but you broke it down in such an understandable and approachable way that makes me want to try it! Much appreciated!! 🙏
I appreciate your patience in teaching me this. It is a quite an extrordinary effort for an outline but once you showed how the last bit of programmatically and procedurely manipulating the shader it clicked for me just how powerful this can be.
This is the best Shader Graph tutorial video I have seen. I have never been able to understand it, but you break it down so well.
by far the best video about shader graphs out there for someone who works in pixel art. All the quirks such as the weird sample texture 2D you addressed, and it was really clear and to the point.
I tried following a similar tutorial but they just blew through the content. This was a great introduction to Shader Graph and I really appreciated how you took the time to explain what things were and show us what they did rather than just tell. Every time I see someone ask about youtube content for game dev I always put your name out there because you're one of the best creators in this community.
I was just looking for a pixel perfect outline shader for Unity and Adam uploads THIS! Thanks you so much Adam!
This video has been absolutely wonderful. Thank you so much for creating content of such high quality. Not only did I find what I was looking for, which was an outline shader with the latest version of Unity (the others are absolutely outdated), but I was also able to understand, though not internally process, the concepts of shaders. I hope that with practice I can create something as amazing. Thank you very much once again.
Yes! I haven't seen anyone be able to explain Shader Graph this well. Thank you!
Hope you make more videos on useful shader stuff, this is really really helpful and you explain it amazingly, keep up the good work!
adam i freaking LOVE you man. This video covers ALL of my pains so thoroughly, and I sincerely never thought I would understand any of this. You are a godamn hero man.
I’m definitely interested in seeing more shaders. This was cool!
So clear and understandable. You even explained multiply 9:00. I never got multiply until now. Your explanation of shader graph is so good. Thanks so much.
Great video! Would love to see more Shader Graph tutorials by you. My impression is that there's a real demand for this type of high-quality Shader Graph work!
Subbed and eager for more.
Mate, you not only go at a good pace, you articulate shader concepts exceptionally well. I am learning shader behaviour in addition to examples of effects made possible by shaders. This is the best shader video I have watched so far.
Bravo, sir. You are invaluable. 👏
Great tutorial, thanks for not rushing and actually explaining everything
I was going crazy for the following reasons:
♦ Invert the alpha channel (One Minus).
♦ Remove the extra color from around the texture (Clamp).
♦ Add the 4 offsets and generate a mask (Another Clamp)
This tutorial is perfect. By the simple act of stopping at each step and explaining it.
I was about to try to go to a later version.
Because in some tutorials they used "Sprite Unlit Master".
Dude! It’s like you are reading my mind! I needed this so much. Thank you!
MORE SHADER EXAMPLES PLS
This was exactly the kind of demystifying I needed to get me started on this... black magic that is shaders lol. Thanks so much for all your excellently put together content!
This is a fantastic video and I appreciate the time you put into creating it. Really taught me a lot, thank you.
YES please please make more videos about shaders, your tips here were great!!!!!
I have been wondering how to do this for a couple weeks and I was watching your other pixel art videos when I found this. Thanks so much for the quality explanation! I learned a lot. Would really like to see more shader videos.
Love it ! Yes I'd be very happy to see more shader examples :)
superb introduction to shaders! you could really help many aspiring devs by sharing more of your vast knowledge about the topic! :)
You always have such insightful videos, just like your recent video on tiled. it was exactly what I needed! Keep up the awesome work…
This video comes in really handy, because I was just about to start learning to use shaders in Unity. I'd like to see more examples for sure and as always, a great video!
this is such a funy coincidence, i was just looking into shadergraph for my project and then this video gets released hahaha. nice work and super understaneable. appreciate the effort!
Fantastic video! Shader is not easy and you explained every detail and also your decisions. Best Shader video I've ever seen.
I’d love to see more shader videos. They’re incredibly interesting, but hard for beginners ...more examples would be awesome. Your content is amazing.
Awesome tutorial. Thanks!
A really excellent sprite outline shader tutorial =D very well explained!
Thanks Adam my broski, your vid here makes it so damn easy and digestible to understand shader workflow and its underlying mechanics. Big love.
Dang, this is a great tutorial. Thank you!
Awesome ! Very good tutorial!
Thank you so much for this! I am making a 3D game with 2D character like "Don't Starve" and no other outline video was really helping me here, cuss one was for 3D objects only and the other was for 2D shaders in a 2D project, but yours fixed my problem and had the perfect result I was looking for!
I really like the way you explain things, please make more videos teaching us!
Yes more shader vids please, just showing what you’ve achieved with them and how it was done would be amazing
Easily the best outline shader tutorial on UA-cam.
Thank you for amazing tutorial!
I was, last week, watching you make some shaders for the Prince of Pilgrims videos and I kept thinking "oof I wish he made a tutorial about this". You read my mind! Awesome video! :D
I'd very much like to see some examples of the cool things you can do using shaders. Also anything to do with UI in general is always super interesting.
THANK YOU for making a video that can be understood by someone who knows nothing about this, taking the time to explain WHY you do stuff. A long and slow video, but there is not really any time wasted, it was all useful and necessary.
Also, everything I would find was with older versions of Unity that wouldn't work with the current versions without tweaks (again, as someone who knows nothing about this stuff it's impossible to even know what could be wrong).
Please make more!
This was fantastic, thank you!
This was so helpful, thank you!
thanks for explaining your thinking process. To me this is more far more useful than following along a video to copy their work.
Dude!!! Thank you a lot! You made my week!!!
Super helpful thank you! Taking a beginners course at Uni and this helps out so much with my assignment :D
That was really helpful. Thanks a lot man 🙂
i dont usually comment on tutorials, but this one is actually very good!
Amazing video! Thanks
Yesss more shader graph content please
Man, can I just say I love how chill you are? I feel like I'm watching a Bob Ross video :D
bien joué pour le bac !
i saw many videos but your really Good like a wow
Thank you for this clip. I've been struggling to get shaders working for a few days now but everything was outdated and nothing worked right. You saved me.
Yes please to the more shader graph videos! There really aren't that many good ones for 2D out there, and your effects are awesome.
hey love your videos they're sooo helpful
This was really awesome! I'd love to see even more practical examples for using shader graph for 2d pixel art.... it's hard for me to recognize when I should be considering shader graph over some other solution.
Love this, so interesting man. I haven't really ever got around to touching shader graph before, only now ready to start taking a crack at it. The maths side I'm fine with, but wow there is a lot to learn, practice and even get to know just what options there are for nodes. Thanks for the tutorial!
Edit: Not sure if its a certain version of Shader Graph but my sprite had a black background instead of transparent in the final result. Adam did not mention this so maybe different version or he edited it out? But if you get the same problem, click on your Graph Inspector, go into Graph Settings and look for Surface Type -> change it to Transparent and your good to go!
excellent video
Would be lovely if you could make a shadow shader video, enjoyed this one and got excited for what I can do with this now. Your videos give me great motivation to keep learning new things.
🙏🙏🙏It was cool. Please shoot more about the shader graph
Woah !!!! need more video Shader please !!
Thanks Mr Adam
Just... thank you :)
I was today years old when I finally understood why it's called Multiply. Also, great episode!
nice 2d shader tutorial thanks
Great Video!
I guess I am going to be one more of many other saying "More Shader Graph videos please!!!".
Would love to see your Leonardo setup, yours looks so beautiful!
Thanks Adam! This is a perfect intro to shader graph, and super useful. (Please make more shader tuts!)
One question... is there a list somewhere that shows what all the available Reference Names are for 2d sprites? Like "_MainTex" and "_MaskTex", etc.?
Thank you for making this! Shader is one of the unity topics I want to learn but just can't understand
Man this was such an amazing video, how did you started to learn about shaders, im reading the book of shaders now :)
Amazing O.O
When I saw the sprite animate like a water my jaw dropped, because how easy it was. Wow.
thank you, you just became a father figure to me
Wow! It’s just coding! Thanks for making it so inviting
Thanks, this is great. I'm not strong in shaders - so how would i make the outline fade in and out. Im thinking that i need multiply-node with a float somewhere.. But i cant quite figure out where?
after watched 10 adds 100 begs for subs and 1h explained why it is fun i finally knew
i dont need it that much xD
Great tutorial for every basic shader stuff a pixel art game needs.
I created a verry similar shader and have a problem with my outlines:
the outlines are cutted of on the sprites borders.
Did anyone know how i can fix it?
(without giving the graphics more space)
Hey, if you don't want the subgraph to change everything to a strange 3D view you can switch the preview mode to 2D in the main graph Graph Inspector (Node Settings) or even better switch it directly inside the sub graph inside the Graph Settings.. then you can inherit the preview mode from the main graph .
I was under the impression that this feature was broken at some point after v2019, and unresolved in 2020.x. Maybe I'm mistaken, I'll have to check again!
@@AdamCYounis In my 2021.2 build it works fine, so maybe they got around fixing it by then.
Great tutorial! I went from knowing very little about shaders, to having made one.
My only issue is that, when applying it to a square/boxy shape, it doesn't seem to apply. It works well with all other shapes, though. Any advice is appreciated!
the outline works so good
if you animate that sprite, does all the frames of the animations get their outline?
I would love it if you attempted to make the same shader using unreal engine instead of unity, just to highlight any differences between the two platforms.
Hey, thanks for the great tutorial!
However I did notice a small issue: if there is any pixel where there isn't any adjacent pixels around, the outline shader causes them to become transparent. I'm not sure what caused this, would appreciate if you could provide an explanation, thanks!
Awseome tutor
Can you help please?
I have 'Texture 2D' with multiple sprites in Sprite mode
where i can find how to apply shader for only one sprite out of several?
I used to make a water shader that distorts background object. At first, in 2018-2019 I took a shader on shader language, but after unity update it stopped to work. Then I produced my own water shader on a graph, and after new URP update - I think in 2019-2020 Unity finally broke it, the node "Scene color" just didn't work, and they support responded that 2D is "not currently in priority". After another URP updated the node begun doing its job, but the added I think "Vertex" or "Color" output graph, so it stopped working again.
I can use this to resolve a problem isometric tiles?
btw my outline have a result that makes a line that went diagonally, it makes a triangle shape, instead of a group of squares
Please can you make an up-to-date / easier to understand version of Palette Swapping using Shader Graph? Say you have a base sprite that has five colors and you want to be able to manually specify a replacement color for each one, so that you can create a bunch of different "costumes", e.g. for a shop?
The new haircut suits you well!
Fantastic video, does anyone know if its the same process (or even possible) for 3d
Can you help please?
where i can find a solution for "black box" shader in a 'game' window?
it perfectly works in 'scene' and black in game?
Cool tutorial as always, I also seem to keep missing your Twitch feeds :/
I find the alpha colour bleed annoying, from what i can tell it's something to do with moving elements or erasing parts of an image ( in the case of gimp). I found out when I needed to dither the alpha, only to find copies of older edits still present on the colour channels
I do kind of see why though as editors can't say what colour it should erased too if an alpha channel is present.
Hey Adam. First of all thank you for your tutorials.
I'm working on a super small game project for myself containing different characters in different teams. I want to use outlines as a method to show who belongs to which team (blue outline for blue team etc.). Would Shader Graph be a good method to do this somehow or could you recommend a better approach? I would not give my sprites outlines in Aseprite in this case. I'm a beginner so I kinda lack the scope of things.
Sure, a procedural outline using a shader would be a good approach if you wanted to use the same assets for different teams, and shader graph is one way to do that. otherwise yeah if you're using sprite animation and the team colours are baked into the sprites, you now have an additional animation set to swap between for every additional team, which might become cumbersome depending on how much character animation there is.
@@AdamCYounis Thank you for your quick response and help!
sorry i'm late to this vid, hope you still see this, I'd love to see how these shaders could produce something like torchlight? not actual cast light outside the sprite boundary, but could you, for instance, create a color overlay material with noise and directionally mask it to simulate fall-off, so that a lamp/torch-on-wall type asset could flicker against its' base on the wall?
maybe if there's a way to point to other sprites or scene factors in the node system it could even be possible to create a directional highlight or shadow that points to some sort of IS ORIGIN_light tag, so that a nearby object can be "lit" (not in the jake paul sense)
IDK, i only know blender, i'm just learning as i go, but this kind of potential would be cool.
BONUS QUESTION: How do I change the alpha/opacity of JUST the outline? 🤔
Hello!
I've seen your seen graph many times in your videos, and i've searched for a way to code it,
but never managed. I have also found people selling scene connector codes, but i prefer coding it myself.
Could you please show us how you did it?
Thank you in advance!