Sprite Dissolve - 2D Shader Graph Tutorial

Let's make an Awesome Sprite Dissolve Effect in Shader Graph!

Check out the entire Shader Graph Tutorials Playlist

If you have any questions post them in the comments and I'll do my best to answer them.

See you next time!

#unitytutorial #unity3d #unity2d

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

Hello and welcome, I am your Code Monkey and here you will learn everything about Game Development in Unity 2D using C#.

I've been developing games for several years with 7 published games on Steam and now I'm sharing my knowledge to help you on your own game development journey.

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

[CodeMonkeyUnity]

Here's a great looking effect with many potential applications! Check out the Shader Graph Playlist for more Effects.
Play 7 Awesome Games (Action, Strategy, Management) and Help Support the Channel!

[chocobo]

some heroes doesn't wear cape. Thanks for the amazing tutorial, my game looks way cooler after applying shader. I see some people asking how to apply the effect separately for different game objects so it won't trigger the shader on every object using it. The solution I came with is putting the DissolveEffect script into a ShaderManager and instantiate it whenever I need to apply the effect with a Dissolve(Object object) method and defining the material with object.GetComponent<Material>(), so it will specifically trigger the material of this single object, even if other objects are using the same shader

[tzuriteshuba]

if your glow hdr effect isn't working, and you're as dumb as me, make sure your HDR color has alpha set to a non zero value. Great tutorial CodeMonkey!

[yuriaugusto]

If someone is having trouble with this tutorial remember you have to first have a post processing with Bloom and HDR(On) in you LRP.

[bagboybrown]

This can still be done in '23, but I'm not sure how to really explain it. It's actually requires less nodes than this, I'll give it a shot:

Sample Texture 2D > Add(A)

Simple Noise > Step(A) & to another Step (A) > Subtract(B) > Multiply(A) > Add(B)

"DissolveAmount" > One Minus > Add(A) > Step (B) > Subtract (A)

"DissolveColor" > Multiply(B)

Change Add(B) to 0.1

Drag Output of Add to Base Color(3)

Drag Output of the second Step node into Alpha(1)

[hamzacavus]

İ watched couple of tutorials for the dissolve effect but this one helped me to understand it. Thanks a ton !

[hamzacavus]

İn the newer version of Unity, the color(4) is no more. İt's now called Base Color(3) and Alpha(1). So feeding in from the Combine nodes RGBA(4) channel just to the Base Color(3) channel doesn't work. You have to do it different than in this tutorial. At the end there is a Add Node that's linked to the Sprite lit Master. Here in between you have to add a Split Node to split the RGB from the A and match the Fragment Node in the newer Unity version. The A(1) from the Split Node you link directly to the A(1) of the Fragment Node. The R(1) G(1) B(1) channel from the Split Node you have to once again combine using a combine Node and then the RGB(3) channel from this combine node you link to the Base Color(3) in the fragment node.

İ know it's much more harder this way but that's the newer version.

[gamepass]

NICE Tutorial! your step by step instructions are really helpful and makes it very easy to understand! KEEP GOING JUST LIKE THAT!

[philippbouillon]

Did anybody else notice the "one pixel" leftover from the outline? If you fully dissolve the sprite, there's a small part of the outline still visible. That's because, when dissolveAmount = 1, the 0.1 of the outline is added to 0 and thus, 0.1 enters the second step node, rendering a couple of pixels. I found one way to fix this, but I'm not sure if it's the best way: Take the "Out"-Connector of the Add-Node, which combines the One Minus and the 0.1 [call this A1] and feed it into a "Comparison" Node. Feed 0.1 into the "B"-Input of the comparison node and set it to "Greater" (i.e. Check if dissolve + 0.1 > 0.1) feed the result into a Branch Node (Predicate) and feed the Output value of A1 into "true" and the value 0 into false. Connect the out with the "In" of the second step and voilà. Problem solved... I wish I could post a picture of that :). Hope you could follow my gibberish and you found it useful... Thanks for the tutorial! Awesome!

[bluext]

Awesome tutorial! Thank you very much for your work!

[liudaxun]

Need some help..with the new ShaderGraph version, i can't seem to get the blue outline of the dissolve. it just doesnt appear. i tried using a split but still dont work.

[khaazz]

im here after watching a youtube ad for this channel 😊 this channel is so underrated.

[mcgeufer]

That's a really nice tutorial that shows nice things in a nice way.

[zachiha]

reminds me of the dissolving tutorial Brackeys did in 2018

[DanielFlanigan]

Thank you! Helped a lot. I added a branch condition for the 'Dissolve Amount' so that the shader fully dissolves the sprite at the maximum step value.

[JoBader]

great video. shows use of simple nodes very well

[jean-michel.houbre]

Great visual effect, I love it. And very good video, which gives a lot of ideas, and the desire to deepen the different nodes.
On the other hand, I could not test the teleporters, I did not find the player.cs script, and the microsecond where I could see it in the video makes me think that it is not just a small script movement.

[IfThenElseMusic]

Please make a video on multiplayer matchmaking with PlayerIO

[diliupg]

I hereby elevate you to the position Code Gorilla. Man! You are damn good! Thanks for the amazing tutorials!

[GamePhysics]

In the current unity (2020), the master node now contains it's own alpha, which is separate from color. So when I connect everything like you do in the video, nothing really happens. Does anyone know how to fix this? (This might seem obvious, but I'm very new to this)