Creating a Dynamic Parallax Effect for your HUD in Unreal Engine

[Music] hello everyone today I'll show you how to add this UI material that will allow you to make this Parallax effect on your heads-up display as you can see the UI is moving with the delay from the movement of your character this effect originally was done by Uriah he is very helpful he has the Discord Channel I will leave links to his YouTube channel and the Discord channel so you can follow him and stay updated with his developments he's very helpful and answers all the questions that you have okay let's start with the tutorial you can see in this demo file that when I move the camera the UI is following with a delay and it's resting in the center of the screen when you stop moving this is due to this Parallax effect that we are creating now but you can use this method to create any material based effect to your UI you'll see later where you can add any material to add any additional effect to your UI for example in the video you saw prior to this you can see that this pixelated effect on the text and the graphics on the UI it's just additional effect so this method is used for a lot more than this Parallax effect let's continue with the material for this effect I'll briefly show you how it's working and then we will recreate everything first you need to have your heads-up display widget inside you have a canvas panel with a retainer box inside this is the important part in this retainer box you can add an effect material this is what we'll use to drive the Parallax effect and have any additional visual effects added to your UI you can see that this retainer box is bigger than the actual screen which is represented by this canvas panel this is done to allow the movement of your camera inside not to cut out the ends of your screen in the demo you saw that there is a little vignette on the outside if you didn't have this retainer box bigger than the screen when The Parallax effect is applying you will see the end of this black border outside so this is the reason that you have this bigger than the screen and inside you just have the size box and another canvas panel with currently just this border to represent visually the UI otherwise you will build your whole UI inside this canvas here the material we used in the retainer box is what drives The Parallax effect you can see that everything is being driven by this material parameter collection parameters with a little bit of math based on your screen size and some other parameters it's moving the UVS for the rendered image of your UI and everything here the values for the parameters are actually being updated in your character will print it looks a little scary at first but it's actually when you understand what it's doing it's quite Sim it's simple to fall now let's start recreating everything so you can see how it's done and understand how it it's working first I'll start with the creation of the heads-up display UI I'll delete the current files and now you can see that we are starting with just the default first person template now what we'll do is create blueprint Quest you can choose the type this heads-up display cost is fine call it blueprint here's the display and now create the widget that will be our heads-up display and call it a widget here the display inside this widget I'll add for now a canvas panel and a border just to see if it's working inside the heads-up display class go to the event graph and on the begin play event let's create widget choose our widget heads of display class let's add to viewport connect the return widget here to the Target now when you go to your game mode for this example map it's this first person game mode just set your heads up display quest to the blueprint that we created and if you play the game you will now see the UI which is currently just this white box is applied to our screen okay let's actually make our UI here delete this box and now let's add the retainer box it's found in the optimization tab drag it onto your canvas panel and then set the anchors to the full screen all the offsets to -64 in order to have this buffer outside of the screen then put a size box inside and inside the size box put the next canvas panel with a padding of 64. which will now be the size of your screen inside this canvas panel output the border that we have as an example earlier again put all the anchors to the four corners change the offset to 64. here into the appearance change the draw as to the rounded box outline will be vibrant green color with an alpha of 0.5 the width of the burner will be 2. and here the tint will just change the alpha to zero and that way we only have the outline like in the example you saw before is everything we need for the example heads-up display I'll close it hit play and you'll see that we have them heads-up display in our screen now only we need to change the material in order to have the movement and we'll start with the material parameter collection create material parameter collection call it MPC rawax and inside you will need only one vector parameter to be called Parallax offset and the default value will be zero for everything this all we need into our material parameter collection okay let's create our actual material to drive The Parallax effect right click materials and then material call it m underscore Parallax and inside this material change the material type to user interface and change the blend mode to Alpha composite use the opacity value now create texture sample parameter 2D and call it slate UI we'll use this parameter to represent our UI on the screen connect the core to the final core and the alpha to the opacity value now click save and let's go back to our heads-up display to set up this material to be used and then I'll show you how it works let's go back to the heads-up display widget click on the retainer box in the effects panel here choose M underscore parallax and into the texture parameter put the same name that you called your texture parameter into the material slate UI click save and then if we hit play you can see that we have no change but if we go to our material let's create a texture coordinate then multiply that by two and connect it to the UV click save and now you can see that our UI is Multiplied two times in the X and the y-axis this was just an example we don't want to do that let's use an add note is another example hold 2 and click here for creating a two Vector connect it and put the values 0.5 and 0.5 this will move our original heads-up display 0.5 so 50 to the left and 50 percent to the top it is currently repeating itself over and over so let's choose here the texture parameter value and the sample Source let's change that to Shared clump click save and now you can see that we are no longer repeating our UI we are just currently moving it 50 to the left and 50 percent to the top if I put 0 0 it will go back to the middle the important thing here is to remember that whatever values you add to the texture coordinate they're moving the heads-up display the first value from left to right and the second value from bottom to top and the values are going from 0 to 1. if you go over one you're going to be outside of the screen so we don't want to have any values above one okay let's delete this example values and let's create our actual values here drag in the material parameter collection that we made earlier change the parameter name here to The Parallax offset this our only value break the vector will only use the first two components currently for the X and the Y value so break out fault two components this will use the R and G this is our the first two values from our material parameter collection vector we'll use the screen resolution function in order to Drive our movement of our UI based on the size of the screen so break the same Vector the visible resolution Vector the same way that we did for our parameter collection will have the same two values for our parameters and for the screen resolution parameters and this screen resolution is returning very high values for example for forward HD screen this will be 1900s bye 1000 roughly so we need to multiply these values by a very small number in order to get our values between 0 and 1 that we need for this coordinate movement here that I demonstrated earlier so let's create two parameters just hold the one key and click somewhere to create just a value and convert it to a parameter we'll call that parallax offset [Music] degrees to screen X let's hold one click here convert to parameter and have the same parameter with why this for our x coordinate and this for our y-coordinate and we need to multiply these values by the X and Y coordinates returned for our resolution so have it like this and put the default values for X and Y as a very small number because we need to convert the huge number for our resolution into some very small number to fit our values between 0 and 1 here so a good value here will be 0.5 zeros then one for the x coordinate and for the y coordinate we also need to flip the direction so we put the minus in front and then five zeros and three because we roughly have uh three times small resolution by the Y side by the vertical side that's why we have a bigger number here then multiply the resulting values by the coordinates for x and y in our parameter collection first one is for the X and the second one it's for the Y then append these two values append vector and add them here to our texture coordinates this is basically the same setup as I showed you with the two Vector before that I manually put the numbers but now our numbers are based on the resolution and also the parameters into our collection so let's save this and if we open our collection and we change these parameter values let's put for example 5 here you can see that it is moving our UI let's put 10 100 500 500 is too much but you can see that the values for the r and the g are moving our UI up and down and left and right let's head back the default values to zero this was just an example how it's going to work to move our UI set them to zero click save and now that we know our material is working we are done with everything for the material set up here and we'll continue with our actual player blueprint based on our movement of the camera to set up this material parameter collection values to drive The Parallax effect for our camera let's continue with that go to our character blueprint open the event graph and we need to set up our process into the event tick this will update every frame of the position of our UI Parallax offset we'll need couple variables to start here let's go to the variables panel click on the plus sign and start creating our variables we'll start with the yo right it will be our type fault then pitch rate it will again be a fourth type let's have a min max your rate and mean Max pitch great let's set this variables compile and Save in order to be able to set up the default values your rate and Pitch rate will have default value of 0 and min max your rate will have default value of 5 and Minimax pitch rate will have the value of 5 as well compile and save we'll also need one variable for our camera rotator and it will be our type rotator and let's start our setup drag the first person camera into the event graph and get World rotation from our camera rotation will break the Rotator and use the pitch and your values to set up our pitch and yo rates let's start with the pitch rate we'll subtract from the camera pitch rate our camera current camera Rotator pitch rate so control drag our camera Rotator then split the PIN and subtract our pitch value from the page value of the camera then we'll add our current pitch rate Ctrl drag the pitch rate variable here and add it to the result of this calculation then the result will clamp the forward value between the values for our min max pitch rate so Ctrl drag our min max pitch right here set this value for the max so as you remember our value here is 5 and for the minimum we'll use the -5 multiply by -1 and we'll get minus 5 for the minimum 5 for the maximum and this will be the value that we need to set as our pitch rate so how to drag our pitch right here and set it to this value we'll need to do the same for our yo value let's do it down here subtract our camera yo our camera Rotator your value let's move this down and now at our current your rate to the result and then Quant the value with the minimum and maximum your rate we'll use this for the maximum and multiply by -1 for the minimum in order to have the value between minus five and five and we'll set this value to the your rate then we'll set our camera rotator to this world rotator okay now we have our values set up now we need to interpolate between the current value and the desired value for the position of the Parallax offset we'll set these values into two variables as well so create new variable call it pitch parallax offset Adobe of type fort and one additional that will be yo parallax offset and let's set them now what we'll do for our Parallax offset values is take the current pitch Parallax offset then we'll interpolate so start typing interpolate and choose this interpolate function we'll interpolate our current Parallax offset to the desired pitch rate that we calculated here and for the Delta time we will get get World Delta seconds function and the interpolation speed will set to 5 for now you can use a variable but just to be more readable now let's have it like this so this will be our pitch Parallax offset will have the same our yellow Parallax offset but we'll have the current yo value and the desert your value plugged in here the Delta time will again be the world Delta seconds and the interpolate speed will be again 5. we use those values to set up in our [Music] set Vector parameter value in our material parameter collection parallax parameter name will be Parallax offset let's split this pin and connect these values the your value will be the first one and the pitch value will be the second one compile and Save and if we go back to our viewport and hit play you'll see now that we have a parallax effect on our screen when I move down my heads up display moves to the top of the screen and I when I move left and right it moves to the end of the screen horizontally now the only difference from our example before is that it doesn't center after we stop the movement so we need to do that after we set the parameters here so after we set the movement of the of the UI with this Vector parameter we'll interpolate back our pitch rate entirely all right to zero we use the same interpolation here we'll use the current pitch rate will interpolate it to zero we'll use the same Delta seconds here and the same interpolation speed 5. for the pitch and the EUR rate get the current your rate here Target gain will be zero and the Delta time will be the world Delta seconds compile and Save and now if I go back and hit play you'll see that I have The Parallax effect and if I stop moving the UI is going back to the center of the screen this exactly as our example before if you want to modify the values you can have a bigger minimum and maximum for example I can have 10. for the yo and the pitch right here if I compile and Save 5 you'll see that I have much bigger movement for my Parallax effect let's set them back to five and if I want to have faster speed you need to change this interpolation speed let's make a variable for this in order to have it changed and just on one place so promote this to a variable it will be interpolation speed variable and let's connect it to all four interpolation functions compile and saved and for the default of the value let's change now 100 for example and if we can go and hit play you'll see that is very very fast it doesn't look really good so stick to the smaller values if I put one compile and Save it will be slower it doesn't really have the time to go to the maximum and the minimum now the value of 5 seems fine it depends on your preferences but I think that this is a good value and this everything you need to recreate this Parallax effect as I said you can have additional effects like this pixelation effect like the curved display that he has here you can see that the UI is curved based on the position on the screen you can add any additional effects to your material and they will apply from your retainer box material effect your viewports heads up display and that's everything for this example please if you have any questions let me know you can subscribe for the channel you can like this video If you like this tutorial and if you have ideas for new tutorials please let me know in the comments and I'll be sure to try to make the next one sooner thank you for watching and again please like And subscribe it will help a lot and see you in the next video [Music]

Channel: DK 3D

Views: 5,479

Keywords:

Id: M53cJUtNZH0

Length: 29min 14sec (1754 seconds)

Published: Thu Jan 19 2023