Create a Shiny UI element with Unity's Canvas Shader Graph

UI elements and buttons are essential to any video game and creating appealing and attractive UI elements that makes your game juicy is very pleasant to have them in your video game in this video I'll show you how to create this shiny button Shader graph that can be applied to any UI element in your video game canvas Shader graph is a new feature in unity 2023 so make sure that you have that version before we start so let's get started [Music] let's start by creating new Unity Tod urp project this UI Chader graph only will work on Unity 2023 so make sure that you are using that version at least let's add background using the canvas right click canvas image double click on the background game object to center it in the scene view next next on this Center rec transform hold shift and ALT then click on the bottom right icon to extend the image to fill the whole screen then you can use any image to use it as a background for your UI in this video I use this simple UI and buttons uh asset it's totally free on Unity asset store I'll provide the link to download that down in the description let's now add a new button with text mesh Pro then from the button Source image you can select any of the buttons provided by this free asset I'll set it set at as native size to increase the size of the button and also I will increase the text size if you can see those buttons yet make sure that you select the texture or the Sprite make sure that texture type has been set to Sprite 2D and UI and make sure that the Sprite mode has been set to single let's increase the font size and change the color to white also change text to click to start now we can start creating the Shader graph by right click on the project then create Shader graph urp and you will find the new canvas Shader graph let's name it shiny button Shader to create this shiny effect we need a gradient from transparent to Y to transparent to represent a shiny line on the button or any element of the UI so we can start by the UV node and to create this gradient we need to determine on which axis this gradient will be created so we will use a split node to gain access to the x axis to create a horizontal gradient as you can see here in the preview we have horizontal on the a we have vertical on the Y represented by the G Channel and using the triangle wave node it will automatically create for us this required gradient as a line that start from transparency to full wide then transparent in small portion of the UV we need to control the rotation of this line so we can replace the U UV with the rotate node it's the same as the UV node but with additional access to the rotation of the UV so add the rotate node and then we can add a new parameter it's a float rotation we connected to the rotation on the rotate and now we have full control on the rotation of this line let's select all those nodes and group them as one group and call it rotation now we need to move this line and of course for that we need a Time node so create time node then add it to the rotation group and you'll start seeing the line moving repeatedly in the Triangle wave node but we don't want the line to keep scrolling endlessly without stopping or without any delays and for that we will use a modular node to create a phase for those lines you can say the mod modulo is like a timer inside the timer that can repeat itself over a period of seconds so for example here if we set the x to two it will repeat itself by going from black to white within 2 seconds and that's what we need exactly to create a small pose between the lines on the screen so let's create a new float cycle time to control this uh period so connect it to the time on the module then connect the output to the add node you will see nothing changed yet to control the speed of this uh line we can create a new float wave speed and multiply it with the modulo then link it to the ADD and now we can control the speed on the X you can do it it uh you can use minus values to control the direction of the movement now to the trick that will make the line disappear we will use a saturate node which will clamp the values between 0o and one the modul have a loop between zero and uh two or three so in the first second we will only show the line then the remaining seconds will not show the line because second and third seconds are above one so we will not see the line due to the using of the saturate node that clamps the values between 0 and one so now we can see the line for 1 second and it will disappear for the remaining time of the modulo cycle time let's arrange everything related to the cycle time in one group there is still one thing that the line is showing suddenly in the middle of the triangle wave to solve that we just need to offset the x value by substracting uh one from the x value so as you can see here in the substract the line now starts showing from the right seems we need to increase the value more than one so seems 1.2 is exactly making the line doesn't show in the screen and when the animation starts we can see the line then it goes to the other side and now with this shiny light is ready we simply need to add it to our texture or the Sprite and for that we need to gain access to the main texture so let's create a new property with a type of texture 2D and name it main text exactly main text so it auto detects the Sprite on our game object then we will use sample texture 2D to sample the main texture and we simply use an ad node to add the light effect to it then we link the results to the base color on the fragment and to give the transparency of the Sprite we connect the alpha channel from sample texture 2D to the alpha on the fragment let's save and check what we got till now of course to be able to use the Shader we need to create the material to hold that Shader so we can right click on the Shader graph then create material let's name it shiny button material then simply click on the button and you will find in the field of uh the material it's empty so we place it there but something wrong is happening here we not getting the color of the button and we showing weird results so there is something we need to fix let's go back to Shader graph to check what's happening yes the reason is that the triangle waves gives values below and above one to clamp the values between 0 and one we need again a saturate node to make sure that we only get values between zero and one to V to avoid getting such uh undesirable results as you can see now after we added the saturate node then we add add that to the sample texture today now we getting the correct shiny Button as we wanted we can push this step further and enhance it by if you want to add a flashlight after the line passes the whole button which give more artistic view as you can see now we can control everything from the uh inspector by controlling the properties that we created we can control the rotation of this uh shiny light also we can control the cycle time how many seconds we need till the light passes again and also of course you can control the wave speed or the light speed to simulate the light flash we need a sample gradient to simulate that by creating a gradient that goes suddenly from from Black to White then we go gradually from white to black like what I'm doing now exactly the stbl gradient allows you to go through all the colors through time so we connect the time cycle to the time on the sub gradient we started to see the flash light happening but it's happening at exactly at the same time when the shiny line come across the button we don't want that we want the flashlight to happen after the uh shiny line finishes moving across the button to do so we will add additional second by sub subtracting uh the time cycle by one second since one is not enough we need to increase it to two so now we can see the shiny line move across the button then we have flash move across the button have flash exactly as we want we can group those two nodes into a flash group then we can add the flash to the shiny light before adding it to our Sprite and that's it we have now this amazing artistic button that's calling and attracting the player to click on it this Shader of course is applicable to any UI element you can apply it to any image in the UI or even buttons uh anything you want anything that have actually a Sprite or image component in it so for example if the UI have this coin Sprite simply you can add the material we created the shiny button material to any UI element and it will start shining as the button and that's it for today's video If you enjoyed this tutorial and learn something from watching this don't forget to hit like subscribe and the notification Bell to keep notified about the new tutorials and experiments of course we are deeply thankful to our supporters on patreon who keep encouraging us to create such tutorials and of course if you become a patreon you can download all the projects that we have published on this channel till next video see you soon [Music]

Channel: Binary Lunar

Views: 4,099

Keywords: Canvas Shader Graph, Binary Lunar, UI shader, Shiny button, Shiny UI, UI specular light, 2d shader graph tutorial, Unity 2023 Canvas Shader Graph Tutorial, animating UI VFX

Id: aP1M0ZSUDYo

Length: 12min 52sec (772 seconds)

Published: Thu Apr 11 2024