Get started with 2D Shader Graph in Unity - Dissolve Tutorial

Поділитися
Вставка
  • Опубліковано 6 лют 2025
  • Create your own 2D Shaders with Shader Graph!
    ► Check out Zenva's RPG Academy: academy.zenva....
    ● Project Files: github.com/Bra...
    Free assets used:
    ● Pixel Adventure 1:
    assetstore.uni...
    ● Pixel Adventure 2:
    assetstore.uni...
    ····················································································
    ❤️ Donate: www.paypal.com...
    ► 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...
    ········································­­·······································­·­····
    ♪ "ES_Dress Code_Black - oomiee" by Epidemic Sound

КОМЕНТАРІ • 568

  • @Danidev
    @Danidev 5 років тому +908

    thanos would be proud

    • @ngothanh1350
      @ngothanh1350 5 років тому +15

      Yes, he is. And make sniper Dani.

    • @memerx9022
      @memerx9022 5 років тому +11

      Dani Do You Can Make Tutorial About How To Do Mission ( OR You Can't )

    • @krushilnarola853
      @krushilnarola853 5 років тому

      Hi bro I know you

    • @krushilnarola853
      @krushilnarola853 5 років тому

      I like your videos would you please check out my game as well

    • @krushilnarola853
      @krushilnarola853 5 років тому

      play.google.com/store/apps/details?id=com.UnitedGameDevelopers.PlankRunner

  • @adamwhite1433
    @adamwhite1433 3 роки тому +249

    For everyone using Unity 2020 where the main node is now split to a Vertex and Fragment node, you need to add a Split node to split the Combine out to show the Alpha Channel that can be linked to the Alpha channel in the Fragment Node.
    Steps are:
    1. Add Split Node.
    2. Link Combine RGBA(4) to Split In(4)
    3. Link Combine RGBA(4) to Fragment Base Color(3)
    4. Link Split A(1) to Fragment Alpha(1)
    Thanks to CodeMonkey for explaining the new new changes. This specific change is at 4:47 in this video - ua-cam.com/video/azGMuP9ks8U/v-deo.html

    • @KacperOgrodniczuk
      @KacperOgrodniczuk 3 роки тому +5

      Dude thank you so much

    • @cringykid3385
      @cringykid3385 3 роки тому +1

      thank you so much! you really helped me out :D

    • @ehad1753
      @ehad1753 3 роки тому +2

      Thank you so much, I was so confused why it wasn't working with the alpha

    • @munchymcmouthington298
      @munchymcmouthington298 3 роки тому +1

      many thanks buddy x

    • @gush5436
      @gush5436 3 роки тому +2

      I'm so glad, I've met your comment, stranger on the Internet, thank you very much!

  • @DotNetCookbook
    @DotNetCookbook 5 років тому +204

    Yeah, more ShaderGraph videos would be much appreciated

    • @GabrielAguiarProd
      @GabrielAguiarProd 5 років тому +11

      In case you are interested in learning more tricks with Shader Graph, I got quite a few on my channel :)

    • @oldshamen
      @oldshamen 5 років тому

      @@GabrielAguiarProd How about one for 2D pixel perfect outlines? ;-)

    • @matama9053
      @matama9053 5 років тому +2

      Yeah this really brings a whole new dimension to my game

    • @DelhiTechnologyClub
      @DelhiTechnologyClub 4 роки тому +2

      @@GabrielAguiarProd amazing stuff 😀

    • @shlokshah5379
      @shlokshah5379 3 роки тому

      @@oldshamen brakeys did it

  • @sykoo
    @sykoo 5 років тому +245

    Shader Graph is just so good to use! It's kind of crazy actually how easy it makes creating shaders, whereas scripting them was a headache for me as a newbie to shaders.

  • @GabrielAguiarProd
    @GabrielAguiarProd 5 років тому +24

    2D Shader Graph is awesome, well done!

  • @technotechmusic
    @technotechmusic 5 років тому +122

    Hi Brackeys.
    Well done Brackeys.
    Good job Brackeys.
    Thank you Brackeys.
    Keep doing Brackeys.
    Like the intros Brackeys.

  • @realthoke
    @realthoke 5 років тому +4

    I'm going through the basic coding in Unity tutorials right now, but decided to comment on a newer video. Your tutorials are so good man. Easy to follow and interesting to keep watching. Clear, nice voice with smart explanations for terms depending on the audience (or target group) of the video. I'll definitely keep watching your tutorials throughout my junior dev years and recommend your channel to others. Thanks for making these videos!

  • @feliperibeirosilva900
    @feliperibeirosilva900 4 роки тому +8

    I must say Brackeys taught me so much stuff. I am eternally grateful.

  • @OutrageGames
    @OutrageGames 5 років тому +43

    Finally an easy and understandable tutorial about 2D shaders! 😁

    • @dynaheart
      @dynaheart 5 років тому +1

      Will we see something about it on your HTP series? Y'know, for vfx

    • @OutrageGames
      @OutrageGames 5 років тому +1

      @@dynaheart I do not have something in mind, but maybe I will try it out because I believe it is a very cool way to make your 2D games look better.

    • @maistrogaming7911
      @maistrogaming7911 5 років тому +1

      Ooo hy ..great videos man....I wish good luck

    • @bishnuchourasiya128
      @bishnuchourasiya128 4 роки тому

      You understood it so please can you explain to me as well help much appreciated 🙏How that woks. I mean he used sprite titled fall on idle's material and he used that same material on that chicken but it rendered it as a chicken

  • @CryptoWhisperer-jw6hd
    @CryptoWhisperer-jw6hd Рік тому +1

    You just started a new fire in me. Thank you Brackeys

  • @MuriloMielke
    @MuriloMielke 3 роки тому +3

    Just want you to know that before seeing this video I had never TOUCHED shaders, but after watching it - and almost dying of frustration for 6 hours because I couldn't get it right - I finally managed to create a very nice shader for my game. So hell yeah, thanks a lot

  • @minticedteaenjoyer
    @minticedteaenjoyer 5 років тому +4

    I have bought the Complete Unity Mini-Degree course and I must say, I am pretty satisfied.

  • @b97501063
    @b97501063 4 роки тому +21

    My eyes: Ok. I got it.
    My brain: No you don't.

  • @thehugopolsat1349
    @thehugopolsat1349 5 років тому

    I have been searching for 2D Shader Graph tutorial recently and now you uploaded this. Thank you !

  • @TheAnanth003
    @TheAnanth003 4 роки тому

    Each and every second is worthful.... No fillers, very nice

  • @nicka3375
    @nicka3375 5 років тому +4

    Amazing tutorial. Feedback: the Add node in your shader graph causes the edge color to add with the underlying sprite color. To preserve the edge color, replace the Add node with a Blend node and choose Mode>Overlay. That will make the colored edge overlay (i.e. replace) so that the edge color is preserved - which I think it is the desired effect.

  • @MesaTheAalfa
    @MesaTheAalfa 5 років тому +2

    I'm really glad that you posted this video, I've watched 2 tutorials about the same concept. everything was looking good until I reached the end .. somehow it won't render the offset and the colors ... when I saw that you upload this video I give it another try and it worked!! Now I can finally sleep in peace :"(
    Thank you so much !!

  • @abhaasshah5740
    @abhaasshah5740 3 роки тому

    You are simply the best teacher of the digital era!

  • @Moon17511
    @Moon17511 Рік тому

    This video describes each step in a digestible and easy to understand way - thanks for the great tutorial!

  • @armansvd1932
    @armansvd1932 5 років тому

    bro,you have the best youtube channel.your channel is so rich.I have learned a lot from your videos about how to make a good game.I really appreciate you.

  • @LuisGRano
    @LuisGRano 3 роки тому +21

    If your sprite is still showing as a blank square even after following every step, you just need to connect the alpha (A(1)), from the Sample Texture 2D of the MainTex(T2), to the alpha(1) from the Fragment section (below Base Color(3)). Seems like in lastest versions of Unity they changed the Sprite Unlit Master, so there are some differences.

    • @Tiollo88
      @Tiollo88 3 роки тому

      Thanks for sharing, I was having this exact problem with Unity 2020.2 :)

    • @dandragomir6413
      @dandragomir6413 3 роки тому

      tyyyyyyy

    • @nanref8326
      @nanref8326 3 роки тому

      You are a hero

    • @N1ghtR1der666
      @N1ghtR1der666 3 роки тому +2

      I already tried this but all I get is a white square the size of the sprite, none of the actual image is there, even thought the preview looks fine

    • @dead_____line3401
      @dead_____line3401 Рік тому

      did you solve the problem with the white square? @@N1ghtR1der666

  • @zuckerschnute13
    @zuckerschnute13 5 місяців тому +1

    I am new into Shader Graph and you Video helped me so much! Really thank you for this! This is amazing :D!

  • @aymericplanet4329
    @aymericplanet4329 5 років тому +2

    I feel like a whole series of videos about shading would be just amazing ! vidéos about coding shaders would be very nice too ! Anyway thanks for your insane job, you rock.

  • @mambo19911
    @mambo19911 4 роки тому

    Rly good tutorial i saw many like this but you are 1st guy who explain why you use it and why this is important. Good job :)

  • @siddharthtrivedi3322
    @siddharthtrivedi3322 5 років тому

    This is the first tutorial that can explain to me about the shader graph - because Brackeys tried to explain the concept at the lowest possible level so new persons to shader graph can grab the concept easily

  • @strangeanimations2518
    @strangeanimations2518 5 років тому +1

    I subscribed last Friday and followed your how to make a game playlist and loved it’s, now I’m trying to learn c# as a whole :D
    Already love your channel, keep it up!

  • @twelveminusone
    @twelveminusone 4 роки тому

    I've been afraid to jump into shader graphs but this video makes it so easy! Thank you!

  • @Oxmond
    @Oxmond 4 роки тому +1

    1 million subscribers!!! Congrats Brackeys! 👏❤️🤓

  • @edwardraymondhe4445
    @edwardraymondhe4445 5 років тому

    Omg, this is totally something I would not look into for the past few days, but this is really awesome, I would really love to know how these works!

  • @moahammad1mohammad
    @moahammad1mohammad 4 роки тому

    Finally, and with this, I am done with the Unity Beginners playlist, and I'm now ready to use Unity like a pro!

  • @yorttroy
    @yorttroy 2 роки тому

    I miss you so much bro :( these tutorials got me through university.

  • @treblaalbert4391
    @treblaalbert4391 4 роки тому

    Welcome to brackeyssssss! Love you man. Nice tut. bap bap bap birupidap

  • @DoubleM55
    @DoubleM55 4 роки тому +1

    I've recently started playing with shaders, and they are like *magic* :)

  • @NStripleseven
    @NStripleseven 4 роки тому

    I really like the idea of having shaders be visual rather than having to script them, it makes it much easier for me, a newbie to any kind of shaders.

  • @zugolf4980
    @zugolf4980 5 років тому

    YES!!!! SHADERGRAPH!!!! I love you, Brackeys.

  • @freakymundo
    @freakymundo 5 років тому

    Awesome! Getting confy with shader graph is one of the keys to great visuals =)

  • @LurkerRIP970
    @LurkerRIP970 5 років тому

    Thanks for another great Tutorial Brackeys!! Keep the awesome content coming!!

  • @LuanaSantos-rl4sb
    @LuanaSantos-rl4sb 3 роки тому

    this channel is a saint.

  • @Radixos
    @Radixos 5 років тому

    Definitely show us more about this package! Effects are great and very useful!

  • @johanolofsson6103
    @johanolofsson6103 4 роки тому +2

    Great stuff! Since this is pixel art, I would love to see this effect being applied to the discrete pixels of the actual sprites instead of the render target pixels. A part from that, amazing!

  • @AshesOfEther
    @AshesOfEther 5 років тому +110

    "Our player disappears. Yay!"

    • @UnluckyIAM
      @UnluckyIAM 4 роки тому +1

      @Javi In souls games you are not just a player...you are a slave!

    • @rebelheart4456
      @rebelheart4456 3 роки тому +1

      One of the worst things a newbie game dev could hear

  • @gamingbud926
    @gamingbud926 4 роки тому

    YES. You have given me great power. Muahahaha!
    I was having trouble even figuring out how to get the shader graph in my project. Leave it to Brackeys to guide me there :3

  • @sanchuan1979
    @sanchuan1979 5 років тому

    Love your Tutorials. You make them really easy to understand and the results are awesome

  • @SidMakesGames
    @SidMakesGames 5 років тому

    So great to see finally something on 2D Shader Graph.
    2D Shader Graph = more power to 2D Games 😁💪

  • @LewisT0th
    @LewisT0th 5 років тому

    That joke literally killed me. Someone resusciate me please. xD
    Awesome video as always, very easy to grasp the concept of each tutorial you make. I still would like to see a atutorial made by you on creating a 2D character controller to hook-up with playermovement, I watched other videos and all of them are so different.

  • @aaronthiel2240
    @aaronthiel2240 3 роки тому

    Great Tutorials Brackeys! Thanks for your hard work!

  • @IsaacAsante17
    @IsaacAsante17 5 років тому

    Unity is a must-have, must-learn.

  • @bogdan1115
    @bogdan1115 5 років тому

    Jesus, Brackeys you are a true genius! I love you. :)

  • @haitaowu6702
    @haitaowu6702 4 роки тому

    Cool effect, easy to understand, nice tutorial!

  • @sorrefly
    @sorrefly 4 роки тому +5

    Keep in mind that most people have never used shaders before so I think you’re going a little too fast. Anyway thanks again for this amazing tutorial, as always 😉 been following you for a while now

    • @ElboxD
      @ElboxD 2 роки тому

      It certainly is too fast for a complete beginner. I've first watched these videos before watching this one:
      First watch: ua-cam.com/video/nDsTBk6eano/v-deo.html
      Then: ua-cam.com/video/0Qz1FwyveUo/v-deo.html
      Finally: This video
      After that, I practiced what this video showed in a new project.
      Maybe this could help someone out.

  • @BulletProof_Viking
    @BulletProof_Viking Рік тому +1

    14:54. You must have something else set somewhere that isn't in the video. When I use the shader I created from the shader graph, it replaces whatever the texture/image/sprite is with the _maintex texture, so what you're showing here doesn't work. The chicken would take the _maintex texture which is the other sprite???

  • @rezaanataj6978
    @rezaanataj6978 5 років тому

    Coding a shader is really difficult but the way you are using it is very easy
    There is lots of things can be done with shaders
    Please don't give up making videoes about it

  • @susi2622
    @susi2622 4 роки тому

    This is very useful and inspiring video that makes me attempt this method on my first project. awesome!

  • @PhantomC027
    @PhantomC027 4 роки тому

    The power of ads brought Brackeys back from his own snap, the ads are... Inevitable.

    • @PhantomC027
      @PhantomC027 4 роки тому

      Also thanks for this tutorial! It helped me with my 2D URP skills and fixed a shader compiling issue I was having. Thanks a bunch! :)

  • @Jojolinul
    @Jojolinul 5 років тому

    Brackeys back at it again with the graphys

  • @rushabhgohel5182
    @rushabhgohel5182 2 роки тому

    i liked how he said "really simple stuff." at last

  • @yacinekahlerras1973
    @yacinekahlerras1973 3 роки тому

    thank u so much man that was a really cool effect

  • @TheHunterzProject
    @TheHunterzProject 5 років тому

    Absolutely more shader tutorials !!

  • @potato8814
    @potato8814 5 років тому +1

    LET’S GOOOO

  • @joejoestar3519
    @joejoestar3519 5 років тому

    Thanks Brackeys. More 2D Shadergraph videos pleaaaaase

  • @mike73miller
    @mike73miller 4 роки тому

    my game has a flying saucer that beams up your creatures and takes them to other planets. I will give you a shout out in the credits for sure. I have been going through and doing all of your shader graph tutorials to try and get a better grasp on it. I feel like I need to master it.

    • @mike73miller
      @mike73miller 4 роки тому

      I uploaded a video of it: ua-cam.com/video/MaFkRci1GxY/v-deo.html

  • @Kuibyyy
    @Kuibyyy Рік тому +6

    Does this only apply on this version of Unity ? I'm on 3.15f1 version and I can't find the "Pipeline Asset (forward renderer)"

  • @Warwicky07
    @Warwicky07 5 років тому

    Great tutorial! 2d shader series would be great.

  • @joemomma4826
    @joemomma4826 5 років тому +5

    I don't know how to get ideas to Game Jam so I'm telling you: "Seeing is believing"

  • @hellobeauworld
    @hellobeauworld 3 роки тому

    Absolutely fanstastic

  • @mondobe
    @mondobe 5 років тому +34

    “I better work on my Brackeys game jam game”
    “Oh wait, Brackeys just posted? Never mind!”
    You have become the very thing you swore to destroy.

  • @StefanLopuszanski
    @StefanLopuszanski 5 років тому +10

    14:53 : THE WORLD BECOMES HELL! Oh, wait everything is fine.

  • @zlebadev3940
    @zlebadev3940 3 роки тому

    Thank you so much for this tutorial! It helped me a lot! 😊

  • @simonhagfalk
    @simonhagfalk 5 років тому

    Great work! I feel like outlines is incredible useful, something like that would be very helpful! :)

  • @ekzac
    @ekzac 5 років тому

    It's that way we find the edges!!! :-o . Of course it works, because the noise is smooth, not step, then we place one over another and get the edges... Genial! ^^

  • @Tombombdash
    @Tombombdash 5 років тому +1

    Brackeys you are awesome!

  • @redtshirtgaming4418
    @redtshirtgaming4418 5 років тому +1

    Hi! I love your videos! keep up the good work! :)

  • @RoboClonk
    @RoboClonk 5 років тому

    Great and easy to follow tutorial, thanks! :)

  • @sanovictus
    @sanovictus 5 років тому +79

    Cool shader! I'm curious though, how would you set up the dissolve to be pixelated? Right now the dissolve is smooth, which contrasts with the art style

    • @N4m43
      @N4m43 5 років тому +19

      I don't know much about shaders, but you can probably adjust the scale of the noise so it has the same pixel size as your sprite.
      This way you can't have several noise tiles per pixels.

    • @bevdev5365
      @bevdev5365 5 років тому +10

      You could either make a camera shader that pixelates the final image or I **think** pixel perfect camera will set the entire image to a more pixel art style

    • @wokarol
      @wokarol 5 років тому

      I would start with calculating grid id using floor() and I would use that for noise. Now you just need to match pixel size with sprite's one

    • @TheAmbientWarrior
      @TheAmbientWarrior 5 років тому +10

      I'm no shader expert, but wouldn't it be easiest to use a pixelated noise pattern instead of that more splotchy one? Seems like you'd have your effect right there. Though I don't know how that would effect the offset for the outline effect.

    • @bevdev5365
      @bevdev5365 5 років тому +4

      @@TheAmbientWarrior This solution would work however outlines wouldn't be rendered correctly. Pixel perfect camera would take the high res effect and scale it down to a defined pixel per unit value, however with this solution, it may end up making the outline look choppy

  • @bagboybrown
    @bagboybrown 4 роки тому

    Great videos, my dude.

  • @homoneanderthalensis_
    @homoneanderthalensis_ 4 роки тому

    i was waiting for "skip ad" button to pop up till i realize its the actual video

  • @luisjs
    @luisjs 5 років тому

    Outline when an object is occluded would be a nice one

  • @mr-john-smith
    @mr-john-smith 5 років тому

    This is super cool! :)

  • @GreavesEc
    @GreavesEc 5 років тому

    Great video as always! Thanks!
    Would be cool to see an outline shader or a sparkle effect that shows up around objects you can interact with when you press a button.

  • @mohammednihad6755
    @mohammednihad6755 5 років тому +1

    More shader graph tutorials for 2D please :)

  • @lesliejohnrichardson
    @lesliejohnrichardson 3 роки тому

    This helped so much, thank you :D

  • @there-are-four-lights
    @there-are-four-lights 5 років тому

    Fantastic video, thank you very much for sharing your knowledge :)

  • @svetlinsvilenov8739
    @svetlinsvilenov8739 5 років тому

    Very much a yes for an outline effect. Would be cool if it could be blurred, e.g. fading out the further it gets from the object :)

  • @laurentcharles7179
    @laurentcharles7179 Рік тому

    I love all your videos and you! 😘

  • @jumpkut
    @jumpkut 4 роки тому +1

    Amazing tutorial! Gonna miss ya!

  • @prizzio
    @prizzio 4 роки тому

    Thank you so much for this master class

  • @Taiyri
    @Taiyri 5 років тому

    Yes please for the outline using shader graph. That'd be awesome!

  • @Hotbotch
    @Hotbotch 4 роки тому

    He's about at 1 mil!!!
    Like 1 thousand more!

  • @cyberfightertheultimatecyb9969
    @cyberfightertheultimatecyb9969 4 роки тому

    Great work!

  • @darknatan
    @darknatan 5 років тому

    Please, do more shader graph videos. this one was sick!

  • @jacobttipper
    @jacobttipper 5 років тому +1

    Awesome and useful, I always enjoy learning from your videos! Could you do an inventory system tutorial?

  • @nishantsur9361
    @nishantsur9361 5 років тому

    Hey brakeys you are wearing Noa's design shirt....
    Cool.....😀😀

  • @kvizyx636
    @kvizyx636 2 роки тому

    Its Awesome! Thank you very much!

  • @ImInfenix
    @ImInfenix 5 років тому

    Yay more shader graph please

  • @oldshamen
    @oldshamen 5 років тому

    A tutorial on creating a pixel-perfect outline on 2D sprites would be really really cool :D

  • @vietdungdev
    @vietdungdev 4 роки тому

    Very Nice ! Thanks !

  • @freedomring3022
    @freedomring3022 4 роки тому

    I can't change the color that you talked about around the 13:00 mark. I added the color node and when I click the black box nothing happens. The work around was after it was converted to a property I was able to change the color in the inspector.

  • @legathus
    @legathus 5 років тому

    Great video. More like this, please.

  • @shombith.-1469
    @shombith.-1469 3 роки тому

    Brackeys teaching me better than my professors

  • @Ouro17
    @Ouro17 5 років тому

    Amazing tutorial! Please do more tutorials about shaders! For example with particle systems. Thank you!