Shader Graph and C# Interaction! Set Properties from Scripts! ✔️ 2020.3 | Unity Game Dev Tutorial

hi i'm ned and i make games today i want to make a simple shader graph and demonstrate how to set property values from a c-sharp script it's a relatively simple process but there are a few wrinkles which i aim to straighten out along the way i'll make a simple script which creates randomly colored ripples on a mesh centered on wherever you click before we get to the nitty-gritty i want to thank you all for watching i publish weekly game development tutorials here so please consider subscribing and turning on bell notifications also if you haven't check out my channel's community tab i post tutorial updates and sneak peeks there alright on to the fun part i made this project in unity 2020.2.1 f1 and universal render pipeline 10.2.2 although the principles here should work with any version of the shader graph and even the high definition render pipeline check the video description for any updates if you're using a newer version our goal is to create a material that changes color when clicked we want the color change to propagate like a wave or ripple starting at the position and time that we click a shader graph will handle that effect i will define several properties inside that we can set from an outside c-sharp script this script will listen for mouse clicks and set properties accordingly initiating the wave let's get started by setting up the universal render pipeline by downloading the package creating a settings asset and setting it as the active render pipeline in project settings create a test scene with the object you'd like to hold the material it can be just about anything but for this tutorial make sure it's all one mesh and that the mesh renderer and collider are on the same game object then create a lit shader graph asset open it and inside we want to calculate the ripple boundary first start by taking the distance between a world position node and the ripple center property the boundary should expand as time goes on subtract a start time property from the time node and multiply by a ripple speed property when you multiply time by speed you get distance this is the distance of the expanding wavefront from the center of the ripple so divide the two distances together to get a blending value we want more control over how the wavefront blends with the base color let's use a smooth step node for that it clamps the value inside the edges but returns a smooth curve when the value is between them now create a smoothing property feed that into a 1 minus node and then into the edge 1 field of the smooth step node set edge 2 to 1 and n to the distance quotient finally create a blend node in overwrite mode and feed in the two colors and the blend value and put that into the base color of the master stack here's the magic that enables property edits through c sharp their reference names in each property settings set the reference field to match the property's name it's customary to start a property reference name with an underscore so i'll do that here and with that we're done with the graph so save the asset back in the scene editor create a material for our shader and apply it to the mesh you won't see much yet because it's difficult to sync the start time correctly in the editor let's move on to the script create a c-sharp script and open it inside create a private instance variable to hold the material and in the start method retrieve it from the mesh renderer component in update we'll listen for the player to press down on the left mouse button and then raycast to see where the mouse is in relation to our mesh if you're new to ray casting i'll link a good article about it in the video description regardless write this cast click ray method to calculate the ray and then cast it if it hits a collider connected to this game object we'll call the start ripple method passing the collision position in start ripple we can set the ripple's center position and start time properties by calling set vector and set float on the material the first arguments are the reference names set in the graph and the second arguments are the values that we want the properties to contain the ripple center is the raycast hit point as for the start time we can use time.time it's always in sync with a time node in the shader graph calling it here will set the property to hold the current time alright back in the scene editor add your interactive ripple controller component to the mesh game object make sure it's on the same game object as the mesh renderer and collider then press play and click on the mesh there we go there's a ripple let's make it a little more interesting by changing the ripple color each time we click go back to the script and add a private previous color property in the start method get the current base color from the material to initialize that variable and then set the ripple color to match this makes sure that a ripple doesn't spontaneously display immediately when you start off the game then in start ripple generate a random color for the next ripple set the material's base color to the previous color and the ripple color to this new random color then store the new color in the previous color variable return to the scene editor and press play that's so satisfying to play around with of course if you click too fast the effect ends early but i'll be fixing that as an exercise for you dear viewers i do however have a few more tips to share you may notice that modifying the material in the c-sharp script permanently changes it and these changes even persist between play sessions if you don't want this to happen you have to copy the material and assign it to the renderer at runtime in c-sharp the process looks like this remember to also destroy the duplicate and on destroy method so extra materials don't build up in your game now each time you exit play mode the material will reset correctly not so much of an issue for this script but if you set the material properties very frequently there's a way to optimize the process unity stores shader variables using an integer id and whenever you pass a reference name to setfloat etc it must translate that name to the id we can do that ahead of time using shader.property2id and then store the results in your script create a private structure to hold any needed property ids then add an instance variable of that type in the start method instantiate the storage structure and initialize it by calling property to id for each property now in start and start ripple replace the reference name strings with these cached reference ids and that's it like i said for this project you're unlikely to notice a difference in performance but it's another tool you can use to optimize your game should the need arise and with that i think we're done with this project try to get in the habit of setting reference names in your graph properties then you'll be able to script them right away if you need to and if you ever start writing code shaders you can use the same methods on the material class to set properties for them too it's quite powerful thanks so much for watching if this tutorial wet your appetite and you're interested in more shader magic check out my other videos i have tutorials on toon shaders outlines grass and more and i'd really appreciate it if you could leave a like it lets youtube know to recommend this video and it really helps out the channel if you have any questions or suggestions please don't hesitate to leave a comment i do read them all how do you plan to apply this tutorial to your project is there a topic you'd like to see me make a tutorial about thanks again for watching and make games you

Channel: Ned Makes Games

Views: 25,698

Keywords: gamedev, game development, development, unity, unity3d, madewithunity, programming, game design, csharp, nedmakesgames, nedmakesgames dev log, indiedev, indie game, dev log, shaders, 3d modeling, blender, tutorial, walkthrough, urp, universal render pipeline, shader graph, shader, script, scripting, C# script, material, materials, interaction, script shader, propertytoid, setfloat, setcolor

Id: IfFVjxPOrrY

Length: 8min 41sec (521 seconds)

Published: Wed Jan 20 2021