Unreal Engine City Building Game - Mouse Cursor, Click Object In-World and Highlight Material - EP 3

hello and welcome to another episode of this unreal tutorial series where i'm making a city building game uh today's episode is gonna be all about adding some mouse control to our game so right now we have camera movement and we can pan around the world and stuff but we can't actually click on anything um you can see that when i press play my mouse disappears so i need to fix that because once we start adding objects into the game we are actually going to want to be able to click on things um so the first thing i'm going to do quickly is actually just enable the mouse uh input so what i'm going to do is i'm going to come to my player controller uh i'm going to scroll down in the details to the mouse interface and we want to we want to show the mouse cursor so we can actually see what we're clicking on we want to enable the click events and we want to enable mouse over events um compile and save that uh and then if we go and we press play now i'm in the game and i can't do anything with my mouse yet but you can see that my mouse is actually present um so what i'm going to do is i'm going to make a uh start with a new folder um i'm just going to call this game objects for now and then in this folder i'm going to have a secondary folder which is going to be components and i'm going to create a new com actor component so actor component here and that's going to be city builder clickable component and the idea behind this is anything i attach this component to will become uh selectable um so i can just get rid of these for now in fact i'll keep the event begin play compile and save that and what i'm gonna do is on the event begin play i'm gonna get out our parent i'll get owner sorry um and what i'm gonna do is i'm gonna bind an event um to this component from our actor so i'm gonna the event is called on mouse uh is it on mask uh the event is just called on clicked so bind event to on clicked bring that up drag the event gameplay into that and all i'm going to do is have a custom event and we're going to call this on mouse clicked just capitalize the c like so and now whatever we attach this to um anytime we click on it in world uh this function will be called um so for now what i'm actually gonna do is i'm just gonna get out i'm gonna just check if our actor has a static mesh component and so if we look for static mesh component like so and if this comes back as valid oh actually you can just you can do it that way or you could just call the actual function on it rather than the utility so if i connect that up what i'm going to want to do is i'm just going to add in a variable that is going to be the static mesh ref and that is going to be a static mesh component object reference like so compile save that and so if this is a valid component then we are going to set the static mesh and so that i'll save that and then what we can do here is again we could just do another is valid and because you know we might accidentally attach this component to the objects that aren't valid or we might want to add in like skeletal mesh stuff that we'd have to tweak some behavior for in the future but for now this is fine um and what i'm going to do is i'm going to add another variable which is going to be is clicked and this is basically going to just store whether the component is currently clicked or not so by default it is not true that is fine and then when every time the on mouse click is called we're gonna get the not of the current is clicked variable and then we're gonna we're gonna set it to um the opposite of what it currently is assuming that the static mesh is valid in fact we'll do that the other way around just because we always want to change the variable even if the static mesh is not there so just do that pull that in like this so and then if the static mesh is valid um what i've just got what i've actually done is i've just created two materials two test materials one is green one is red and i'm gonna call i'm just gonna do a branch on that is clicked like so move those a bit so as long as that's valid if we have just changed to being clicked then we're going to change the green material but if if we've just changed being unclicked then we'll set that to the red material compile and save that what's that complaining about i didn't plug in the static mesh reference compile save that okay um so we've created that quick component um let's actually make a uh objects folder in i thought no that's silly uh this one can we're just gonna do it here um what i'm gonna do is i'm gonna place a cube actor into the world like so scale them up all that stuff go to his details and then i'm going to add in the new clickable component like that um so to start with let's just set this material to green uh i'll fight to begin with they actually want it to be red because it won't be clicked if i press play now now i come in here i'm hovering over if i click on it it turns green if i click on it again turns back to red and it's honestly so i'm clicking here now nothing's happening clicking here and i'm flicking between the two so it's actually really easy to do this in unreal it has a lot of really nice functions already set up for you the one thing that i want that is a bit more complicated that is going to be beneficial for my eventual game is when i am so when i'm playing and i hover my mouse over here i want the object i am hovering over to highlight so this is going to take a bit of work um i'm not going to pretend that i completely understand the rendering side of this i fold a really good tutorial that i will link below if you want this in a bit more detail um but there is a there is a material you can make that does a really nice highlight effect for you and that's what i'm gonna do here so we're gonna call the city builder highlight material i'm gonna go through this quite slowly because it is very complicated i have um a secondary uh i have a secondary asset that i've already made that i'm copying from just because there's so much to do and but what you first want to do when you create your new highlight material is you want to change the material down name a domain to post process like so and then what else you want to do is you want to scroll down here you want to go down to the post process material and you want to change the blendable location to before translucency like so right now we're going to start all the way over here and the first thing we're going to add is we're going to add a view size like so and then dragging this off we're going to add in a seal again i'm not great at rendering so i can't really explain what all this is but i just followed this from the tutorial that i've seen in multiple locations so i'm just sticking to that at this seal we're then going to clamp between values of one and two like so hopefully that's simple enough to follow along from and then using this we're going to drag off and we're going to do a multiply it's a simple multiply um in fact we'll drag that into the b and then from we're going to create a new scalar parameter so these are the parameters that we can actually adjust so this parameter is going to be our line render width and what you can do with materials is you can have a base material like this and from this i can create um multiple materials based off this one and then i just change the singular parameters and that adjusts the new material in line with it so the scale and the vector parameters are really useful for that we're going to give this a default value of five so if it comes down to the bottom left and only change the default value to five that's fine um and then that's the first sec first little bit done uh for the second part we're going to look for a scene texel size so scene texel size there we're going to drag this up into another multiply and just for neatness that we're going to plug that one into the a and then this into the b like so and then we add in a another scalar parameter um you can just call this param 0 and that's going to stay at zero we're going to add in a mask here um it's not a it's not a bit masculine after it is a component mask component mask there we go um we're gonna need two of these uh what we're doing here is we're splitting up the red and the green value so if you click on the top the one at the top just untick the green like so and then the one at the bottom untick the red like that and we're going to drag this multiply into both of these and then we're going to do and what's called an append um based oh we'll do that and drag that out from the master so we get the right one i think it's a pen vector like that and then pram zero just goes there and copy and paste that into there um and we're gonna do the same like that so that's the next section done again move that out of the way because there's still a fair bit to do and we're gonna have another parameter at the bottom that we'll quickly add another scale up around that is going to be around -1 and for this one the default value needs to be -1 so make sure you do that that's quite important um we're gonna do come back to the top and we're gonna get a screen position uh you'll see that there's two nodes that come off there we're gonna use the view the viewport uv and we're going to pull that off and we're going to get another component mask and for this one we're going to keep both the red and the green ticked so that's kind of already set up for us so using this mask and this append we're then going to do an add between the two so we will add the red green and then we will the append will go into the b like that we're going to need another ad so what you can do is if you highlight the ad and you press ctrl w another ad will appear for you and we're gonna actually need four additions here so if you just keep pressing until you've got the right amount and the things that you need to hook up is you want to put this mask for the red and green into every single a node coming down like so and for this one we're gonna do it from this append and then for the bottom two what we actually need to do is we need to add in a multiply so so each of these two appends that we've already got so i'm just gonna do a multi multiply for the first one so we will drag this append into the a and the negative one into the b and then that goes into our b node for there this is all gonna all the wires are gonna start crossing and it's gonna start looking very messy so i'm trying to take this quite slowly and hopefully not confuse you too much and then we're gonna do another multiply which is gonna take the second append and again the negative one parameter in like that and then that is gonna go into our bottom one like so so hopefully that's not too complicated so you have you got four you've got four ads um you add the append to the mask and the top two and then you add the append multiplied by the negative one to the bottom two and hopefully that makes some sort of sense uh it doesn't necessarily make sense to me again not graphics guy but it works that's all i know and that's all i care about so what we're going to do here now is we're going to add in a scene texture and the important thing to change here is this scene texture id in the bottom left that needs to be changed to a custom depth which is just above the list of post process inputs so if you set that to there and you're actually going to need five of these so again if you've got it selected press ctrl w do that so we have five of these um and then what we can do with all the ads just link that one to one so if i move them all just a little bit up so that'll plug straight into there that plugs straight to there straight into there and straight into there and then the top one we leave blank but all the rests are plugged in easy enough and then what we're going to do is we're going to do subtracts now um so we're going to pull this color out and we're going to subtract the color of each one and so again just ctrl w all of these and it's always going to be the top one is going to subtract the uh the one next to it so we can just plug that into all the a values and then just bring these across to go into the b values okay and then we're nailing at the end now i know it's complicated in a long process um we need to get a full a full add for all of these four so if we just drag this off and do an add and then that goes into the b like so and then do another addition for the bottom two and then do a final addition for the two editions you've just done and that basically makes all these have make sure all of these have been added together um right now we get to add in another scalar parameter now um so scalar parameter and this is going to be our edge angle um so this is one that we will actually want to adjust during the game um as a decent default for this is just minus 100 um so i would just say it's that for a default and then what you want to do is you want to divide the sum of your additions so pull that off and hit divide hit divide plug that into the b value and then we need need to subtract one from this number so if you just do a subtract by default it's already taking one away so you're fine to just leave it like that um but what we do want to make sure is that this value gets clamped between zero and one so do a clamp um again the defaults already said it between zero and one so you're fine there and then the last little thing we need to do before we plug in the invasive color is we need to set our highlight color so if we do a vector parameter i'm going to call this highlight color and i'm going to have mine to be a nice blue color um i think that's what city's skyline uses so i quite like to use that as a good base for what mine's going to look like so the highlight color is like that and we need to make a float fall from this so to make float 4 and then just drag the red into the x the green to the y the blue to the z and the alpha into the alpha um another scalar parameter now scalar parameter and this one is going to be our outline glow intensity so how much it actually goes by um and then by default i'm just going to set that to be [Music] one uh do another multiply between these two colors so we know how brightly this will shine like so um and then the last last little step just one more another scene texture we want here um but this time instead of setting the id to be a custom depth we're going to set it to post process input 0 like so um we're gonna drag this color down and we're gonna look for a lerp a linear interpolate under the math section like that the multiplication is going to be the b value for this and then all our complicated um stuff that we've done over here the result of that from this clamp is going to be the alpha value we're going to bring that down and we can finally just plug this into our emissive color so once you've done that hit apply hopefully there'll be no compiler errors um if there is just go back through slowly and make sure you've done everything uh it's a long process but it's worth it at the end we're going to go back to our main game and this won't work out the bat what we need to do is we need to add a post process volume into the world now if you're not too aware of how these things work and basically it will add post-processing to everything within this cube but you don't have to make it a massive cube to encompass your entire level it does actually have an option on it to if you just scroll down here uh in the post process of volume settings there is an infinite extent unbound so if you tick that it applies to the entire level and you don't have to change the scale of this box if you were working on something a bit more intensive you'd maybe want to have these small boxes around the world so that the post-processing was only done in certain locations but for us set it to infinite and that's fine and then one thing you also need to do is in the rendering features under post process materials there's an array you need to add an element to it it needs to be an asset reference and then you can select your new highlight material save that and when i press play nothing should have changed nothing will change that is absolutely fine because this will only apply to objects that are set to have their um render depth uh their custom random depth enabled so what we need to do is we need to go back to our clickable component um so the component we made that says that i can make something clickable and there are two more events that i'm going to bind to the first one is going to be the um let me just get the parent i'm just gonna bind event uh on begin cursor over that's the event that i want to bind to and again i'm only going to do this if the static mesh is ref um is a valid static mesh and so i'm going to connect that in and then another one that we want to sorry just bring that down for a bit of neatness um we're gonna bind event um the opposite so on end cursor over so do that and then once again we're just gonna make two custom events from this um so i'm just trying to organize this neatly i'll just drag it down here for now and then i'll cl i'll tidy up my blueprints later so just add a custom event which is on mouse hover and then we're going to have another one which is on the mouse oh sorry if type let's make a custom event that's going to be on mouse hover end like so do that uh compile save it um our static mesh reference get that out and again we know it's valid because it's already come through so we don't need to do a validity check um but what you want to do is call set render custom depth link that up copy paste that attach it to the right target link it up uh file save and when the mouse hovers over it we want to set this to true and when it stops hovering on it we want to set it to false compile save that and now hopefully if i've done everything correctly i can go to my main game i can hit play and when i hover over this box you'll see it's got a nice outline and i've put i made the i made the outline really thick um on purpose just so it's super visible but you get this really nice uh hover effect i can still click on it to turn it green um and yeah it gets a really nice effect i'll show you what happens if i put multiple of these so if i just go to my world outline and if i just copy this um cube so there are two of them you'll see when one cubing is in front of the other unreal nose and it will only highlight the one in front because it's using basically ray tracing um so yeah we've got some really nice little effects and you know we'll go through and add some actual logic to this in the future so i hope that was a worthwhile video and i hope it was easy to follow i know the material stuff might have been a bit in-depth but uh it did get a little complicated um but sometimes things do i'll drop a link to the video that i learned how to do that from because that's a really useful video and i want to give the creator of that some credit um but yeah if you have any comments or any questions just drop a little thing in the doobly-doo uh i hope you enjoyed the video and hope you enjoyed the series and i shall see you in the next video goodbye for now

Channel: The Game Dev Channel

Views: 14,538

Keywords: unreal engine click on object, unreal engine show mouse, unreal engine mouse hover, unreal engine highlight object, unreal engine highlight material, Unreal Engine City Building Game, Unreal Engine City Building, Unreal Engine City Building Tutorial, City Builder Games 2021, Make a City Building Game, how to make a city building game, How to make a city building game in unreal engine, Game Development, the game dev channel, Unreal engine, Unreal engine 4, How to make a game

Id: KakLXqpwnjo

Length: 25min 41sec (1541 seconds)

Published: Mon Jan 18 2021