How To Make A Paint System In Unreal Engine ( Render Targets )

hello in this video I'm going to show you how you can paint with render targets inside of Unreal Engine to get started I'm in the first person Unreal Engine project template and the first thing we're going to do is add a paintbrush to the middle of the screen this is where the player is going to be aiming and painting their paintbrush so to get started if you just create a new photo called UI right click and go user interface select a widget blueprint select user widget and just call this the paintbrush underscore widget blueprint then if we double click and open this up we want to go over to the palette and look for canvas panel and just drag this somewhere into the screen then we'll look for an image and again distract this somewhere inside of the screen for the image make sure to Anchor it to the center of the screen then put the position X and position y make it minus five and then for the size X and size y make them 10 and this will make it so this image is directly in the middle of the screen and this is going to be where my player aims their paintbrush we just want to compile and save this then head over to your first person character or your character and go to event beginplay so when we can play we are going to create a widget and that widget is going to be the paintbrush that we just made then we just want to add this to the viewport compile and save this the next thing we're going to do is create the materials that my player is going to be painting with so if we just go over to a folder called materials if you don't have one just create one and then to create all first material we just want to right click the material I just call this canvas so this is going to be the material that so this is going to be the material that the player is going to paint on we just want to double click and head inside here right click and look for constant and just connect this into metallic and specular and then for the base color of this we just want to right click and look for texture sample 2D so this one texture sample parameter 2D and just call this the render Target keep note of whatever you call this and just connect from RGB into base color and go apply so this is yeah like I said there's going to be the background of our canvas we can just close this and we just want to right click go create new material and just call this the brush underscore mat so this is what we're going to be painting our canvas panel with head inside here and we just want to change the blend mode to translucent then we just want to right click and look for texture sample parameter 2D again and we just want to call this the brush texture and we just want to connect from RGB into a massive color and from a into opacity and just go apply and then later we're going to configure this so we can replace this with our own custom brush texture we can close this the next thing we're going to do is create a blueprint and this is going to be the canvas which the player is going to paint on so I'm actually just going to create a new folder and just call this blueprints all right I'll head inside here right click go blueprint class select actor and I'm just going to call this my canvas underscore blueprint head inside here then if you go over to the components Tab and go add and look for a static mesh and just call this the canvas so this mesh is going to be the mesh that we paint upon and if you briefly close on our engine and just go over to settings just make sure to go to show engine content then if we head back to the canvas panel blueprint under static mesh we should be able to look for plane and we just want to look for this plane this isn't um enabled if we don't have the show engine content we won't be able to find it so that's why we did that and we just want to rotate it so it's forwards and then make sure this anchor is um checked and then just scale this up because it's a bit small so I'll make it 2.5 so this is going to be the target which we paint upon we just want to compile this then if we go over to the event graph we're going to make it so it uses the materials that we set up earlier So eventually in play we just want to drag off here and look for sequence and the first thing we're going to do is just drag off here and we'll create render Target 2D so this is what we're going to be painting upon and for the width and height we want this to have a resolution of 10 24. and then we just want to right click and promote this type variable and just call this render Target then we just want to drag off here and look for Clear render Target 2D and then this clay color is going to be the initial starting color of our canvas panel I'm going to make it white but feel free to make it any color so after we do this we're going to tell the game that we want our canvas um model to basically use this material so to do that we can just track up here on the corporate Dynamic material instance so this one and for the parent we're going to be the canvas material that we made earlier we just want to drag off this return value and a full set texture parameter value and put the parameter name we want it to be the same as on this so we call this render Target so make sure it's about the same so I'm just going to type in render Target and then here for the value what we're going to be changing we just want to drag in the render Target variable that we just made get it and then connect this into here then in order to make the canvas use this material we can distract in the canvas panel drag off here and look for set material and connect this into here and then for the material we can just connect from the return value here into here and I'm just going to double click to make this a bit tidier then there's one final step and that is going to be creating the brush material so we just add another pin and just drag off here and look for create Dynamic material instance and for the material it's going to be the brush material and we just want to right click implement this to a variable and just call this the brush material so now that we've set this up we're going to set up a function which will allow our player character to paint with the brush onto the canvas panel so to do that if we just create a new function and just call this the draw brush and this is going to have a couple settings so that we can customize how the brush is so if we just go create a new input and for this first input call it brush texture so this is going to be the material that we're going to be painting with we just want to change this to be a texture to D so this one texture to the object reference then we want to create another material and just call this the brush size so this is going to be the size of our brush and we want this to be a float and then we just want to create another variable and we just want to call this draw location and this is going to be where on our canvas panel that we're going to be painting we just want to change this to be a vector to D so this one okay so now that we set this up when we draw that brush the first thing we're going to do is look for sequence and set our brush material so if we just find our brush material that we created earlier get it drag off here and look for set texture parameter value connect this into here and for the parameter name make sure it's called brush texture or whatever you call it here so Prima team is going to be brush texture and then the value we can just connect from brush texture into here we're going to be able to customize what we put in here then the next thing to do is make it so we can paint on our canvas with our brush so if we just drag in our render Target get it and then we just want to drag off here and look for begin draw canvas to render Target and connect this into here and we do some drugs here and a full draw material and this will allow us to start painting on our canvas panel we want to connect from canvas into Target that's what we're going to be painting upon for the random material we just want to drag in the brush material this is what we're going to be painting onto our canvas and then for the screen position this is going to be where in the world we're going to be painting Upon Our canvas we need to do a bit of calculation to determine this so we just want to drag off size and look for multiply and then we want to drag in the draw location so we can reference variables inside of our functions by just right clicking kind of write it for draw location I can connect this into here and we don't want to drag off here and look for subtract and right click here and go to float so the reason we have to do this little calculation is if I just go to my viewport by default I know engine will start to draw materials using the top left as the origin point so this will lead to the brush action not coming from the center so we need to just kind of do this to fix this and we just want to drag off here and look forward divide and we're going to divide this by two and what we're going to be dividing we just want to right click and look for get brush size and connect this into here and then this to screen position for the screen size we can just right click here and look for split structure pin okay from brush size X and brush is Y into here and then finally we just want to drag off context and look for end draw canvas to render Target and that'll make it so we can start painting with our brush we can compile this and go over to the aircraft so with this we have coded everything the final thing we need to do is make it so the player character can draw onto this so if I just close this and go over to the input folder we want to go over to actions and we're going to create a new input action for painting So if I just right click and go input select input action and I'm just going to call this my edit action underscore paint open this up and for the value type we want this to be an access 1D float and we just want to go over to your input mapping context open this up and you want to add a new mapping and this is going to be for the painting action so I'm just going to look for input action paint and I'm going to make it so the player has to press the left Mouse button in order to paint so here if you just look for left Mouse button and just select or you can assign whatever key you want it to be you can save this close this and then go over to our first person character blueprint then enter on free space we're going to look for the paint input action so a quick note about the paint paper action this will only appear if your character is using the correct input mapping context I'm just using the default first person character so it's using this one but if you're using your own custom input setting then it may be slightly different okay so when the player presses the left Mouse button this action value is going to have a value of one we want to make sure that the player is continuously holding down the left Mouse button in order to paint so if we just drag off this actual value and look for equals whenever the player is holding down the left Mouse button this action value is going to be one so as long as this is equal to one we're gonna have a branch connect from triggered into here then we're going to do a line Trace to see if there's a canvas panel in front of us and if there is then we're going to paint on it so a virtual strike off here I look forward line Trace by Channel where this is going to start we can just right click and look for get player camera manager and just drag off this return value and forget actor location and connect this into the start then if we just drag off the get player camera manager and we're going to look for get actor forward vector so we'll get the four direction of our player character's camera then we just want to multiply this so for the multiply right click on this one and convert it to a float and let's multiply it by 1 500 units then just drag off this gas location enough for ADD and connect this into here so we'll be ending our line Trace 1 500 units in front of the player character and we just want to drag off this R head result this will get the data of whatever we hit we just want to look for break kit result click with error and we're going to check to see if we have the canvas panel blueprint so I'm going to drag off hit actor for cast to Canvas panel BP if we did hit the canvas panel then this node will fire and what we're going to do is draw on our canvas panel so if we just drag off this canvas BP and the four drawer brush so for the texture that we're going to be drawing with our canvas panel I imported this texture of this black Square so I just found this online you can use any texture when you import action to other engine sometimes it looks a bit weird so if you just right click on it and go spray actions and apply paper to detector settings that'll make the image look normal so I'm going to promote this to a variable compile this and then I'm going to select my black texture so you can just be a solid black texture for the brush size this is going to be the size of your brush I'm going to right click prints to available and compile this and make it 50. the biggest is the bigger your brush is going to be prepared for the draw location where this is going to paint on our canvas panel we can just drag off this R hit result and look for find Collision UV and connect this into here and then one final important step make sure that you have Trace complex enabled make sure that this is checked compile and save everything then you just want to go to edit project settings and make sure to look for support so sorry you'll look for support UV from here results make sure that this is enabled so when you enable it it's going to ask you to restart to have this setting enabled just do that I'm just going to restart mine again and save everything okay so that is almost everything if we just go to our blueprints folder drag in the canvas panel and I'm just going to rotate it so it's in front of me when I click play my canvas panel should be white and when I click with my left Mouse button okay so what I'm going to actually do is go back to my first person character and increase the um value here oh sorry I made it 150 I meant to make 1 500. that's why it's so short okay so another good play I have this whiteboard which I can paint with so I just drew a smiley face I can draw anything and this can just be a cool little feature that you can add to your game so with this we've added a simple whiteboard which we can play on that's all for this video If you enjoyed make sure to like And subscribe and I'll see you guys in the next one bye

Channel: Unreal University

Views: 4,881

Keywords: unreal engine, ue5, unreal engine 5 tutorial, render targets, unreal engine render targets, unreal engine whiteboard, unreal engine beginner tutorial, unreal engine paint, paint, paint unreal engine 5, how to make unreal engine, uisco, ue5 tutorial, ue5 whiteboard, ue5 render targets

Id: wIfovfaf01w

Length: 16min 41sec (1001 seconds)

Published: Tue Aug 15 2023