How to Make a Security Camera and CRT Monitor in UE4 - Blueprint and Materials Tutorial

hello and welcome to another Unreal Engine 4 tutorial in this video we're going to be creating a security camera system that is going to be able to sweep back and forth over a predetermined path and then it will be able to catch a target that enters its line-of-sight and follow that target after that we are going to use render targets to capture what that camera sees and then display it onto a monitor in the game world we're then going to create a material that uses a bunch of different material effects to make that monitor look like a classic CRT monitor so without further ado let's jump in here and get started so as you can see I've already started off with the third person blueprint just because that'll be easy to demonstrate the camera functions such as following targets also I have imported my meshes already so have a security camera I also have a secure security monitor and one thing to note about this which will be important for later use is that we have UV specifically for the screen I also have you v's for the rest of the monitor but we're not really going to use those we're just gonna mask using vert colors to tell it what colors to give to the rest of the the monitor however we will be using specifically this channel of Ubese so that the render target that we're capturing of the cameras perspective will be displayed without a ton of distortion on to this monitor so it will distort a little bit because the aspect ratios aren't perfect but it won't be noticeable that is probably the biggest thing here that you want to make sure that you have right is that you have properly setup UV s for this kind of effect we're not going to go too much into the camera itself because really that's just an asset that's there to make the effect a little bit more believable you don't really need it you could have the camera in a different room than the monitor and you may never see it so it's not necessary for the effect it's just there to give us something that makes us a little bit more tangible for the tutorial I've also already made materials so this is for the camera I'm just I'm just doing some vertex color masking for colors I'm doing the same thing in the monitor although the monitor effect will get a lot more robust by the end of this tutorial so there will be a lot more in this one and we're gonna be expanding upon this material over the course of the tutorial but for now these are just masking with the same vertex colors that I showed you a second ago so if I turn off these UV as you can see we're essentially just masking you know the different parts of the screen to tell the material where to display certain things so if I drag this monitor in here is huge comically large um which is better for being able to see the effect that we're gonna have later but you can see that we've just masked off certain things for different colors and different properties like roughness and metallic so that is basically what we have to start off with but now we're gonna get into actually creating the blueprint for the security camera and how that's gonna work so the first thing we need to do here is to create a blueprint class we're gonna go actor and we're gonna name this VP security camera and we're gonna open it and we're going to add a static mesh component to it which will be the camera itself and we'll change that static mass static mesh to camera cam security cam that's what I named it so you can see that's it's pretty big also we're gonna do some scaling and also just positioning of it so that it looks a little bit better so we're gonna move it down a little bit on the C by 12 we're gonna rotate it down on the Y by negative 20 so it's kind of got that position of like a security camera on the ceiling that's just kind of looking down and then we're gonna scale this by 0.5 hoxsey's and of course you know that's gonna depend entirely on what you've done with your model but I made my model very large and it's still gonna be kind of a large camera but this is much more realistic so then what we need to do is we need to add a scene component and this is just sort of a temporary thing that I'm gonna do really this is not necessary for the final effect but I'm just I'm just using this because I don't want to add the scene capture just yet but we're gonna add a scene capture later that could also be used to fill what this scene components doing essentially what the scene components doing is it's marking a location in the actor that I can then pull off of for various things like like line tracing so we're going to place the scene component as a child of the camera so that it follows the camera around when the camera moves and then we're going to put it at 232 and negative 40 ish actually maybe a little bit lower than that you basically just want it you want it to be sort of in the center ish and it doesn't have to be perfect but in the center ish of the lens and then once we have that we're gonna add one more thing and we just want this to be parented to the root but we're gonna add a cylinder and this is purely just for aesthetics but this will be scaled a little bit well this will be scaled a little bit point five point 0.15 0.15 and 0.5 and so essentially you can see what that's doing is we're just we're just giving a post for the camera to hang off of so that when it rotates around it doesn't look like it's just floating it looks like it's attached to something so we've got these three components now so that's all good to go so now we can start to set up our sweeping motion where the camera is sweeping back and forth over an area just surveying a room essentially so the first thing we're going to do go into the event graph and add a timeline so we'll name this timelines camera sweep and then we will open it we'll make it six seconds long and it will loop and we're gonna add a float track to it and then we're gonna start adding some keys here and so essentially we want to have something that loops smoothly and starts off without pointing to one side or the other just point starts off in the center and then sweeps to both sides so we want to start off at a time before zero so that we can get it at zero or when we want it to be and also make it look perfect so it's it's gonna be sort of sinusoidal and behavior but sort of sinusoidal but it'll be offset so what we're doing is we're going to go negative one point five and negative one for the value and then we're gonna put another time I know the point at one point five and one auto-saving on me one point five one and then we're gonna have a little bit of a break in here so about three seconds and we're gonna get a four point five seconds and we're going to go back to negative one and then we're gonna go to seven point five seconds so again past the limits of our time line what our time line is reading and go to a value of one and then we're gonna go select them all right click and go to auto interpolation so that it's a nice smooth curve and so essentially you can see what it's doing is it's starting off at zero it's ending at zero it sweeps left and then right so that's perfect that's exactly what we want we want to plug event begin play into play from start and then we want to get the camera and we want to set relative rotation and plug that an update and then we want to right click on the input of rotation and split destruct and then we're going to make the Y negative 20 X is going to be zero and then we are going to loop we're gonna lurk DZ because we want it to be rotating only on the Z essentially it's just we want will say from oh actually it did alert rotator whoops so we want to go on alert float I don't know why I clicked rotator just a little brain fart there okay so we want to go from zero to the and we want to plug that into the Z so essentially if this is working correctly which I think it should be if we drag a camera out in the world here you'll be able to see that it's just sweeping back and forth like so and there's a little bit of a little bit of downtime until in the sweep which is perfect so we have some very basic behavior there the next thing that we're going to want to do is give it the ability to see targets - essentially like if something breaks its line of sight then it should be able to lock onto that thing and follow that thing so the first thing that we're gonna do is we're gonna set a timer by event if you're unfamiliar with this node it's essentially a node that can delay and loop and then every time it reaches the end of that time it fires off to to an event so I can say which I will do here 0.1 so every 0.1 seconds if I have this checked as looping it's gonna fire off to call an event which we're gonna create here add custom event and we're gonna call this look for target so now every 0.1 seconds we're going to start calling this event and this event is going to be a line trace essentially so we're gonna line trace and we're gonna line trace by channel obviously this is not going to be perfect for a camera because the camera has a pretty wide field view whereas a line is gonna be dead down the center where the camera is looking so it's not gonna be 100% if you wanted to you could do a sphere trace or like a overlap trigger trace some things like that however I'm just gonna do this line trace because it's very simple and I'm more focused on the material side of the effects and all that so if you if you really want this camera to be great or perfect you can just you can do a different kind of trace it'll be a little bit more complex but it's the same general idea was what we're doing here so we've got our line trace we want this to draw debug so we can see what it's seeing and then we are going to tell it where to trace so the reason why we have the scene component in here is specifically for this we're gonna drag the scene component out here and get the world location so that is going to be where we want the trace to start and then we're gonna go back to the scene component and get the forward vector and essentially what this is gonna do is get a vector that is pointing in the scene components X positive direction and since this is gonna move with the camera it's always going to be the X positive direction of where the camera is looking so we've got that now and what we want to do is we want to multiply this by a large number so essentially we're saying we have a direction and we want to go pretty far in that direction I'm gonna give it 5,000 to start with I think that'll be good for for what we're doing here it's really gonna depend on the size of environments that your cameras are gonna be in but this should be a good starting point and then what we're gonna do is we're gonna affect your Plus vector so add these two together so you're taking this direction you're giving it a distance to go and you're adding that back to the location to say start from the camera or go out in this direction for this far and that will be the end point so now we have that we're gonna just take a look and see what it's doing so you can see it's drawing lines from the lens out a distance that we set and then it should be catching me but it's not and there's a reason for this that is a little strange but if you go another third-person blueprint third person character blueprint you open that and if you look at the capsule component and you look at the collision presets it's not triggering a visibility trace response and the same for the mesh so if I can find so you can see here it's not triggering a visibility trace response which is why the camera is not seeing it right now because we're tracing on visibility I am going to use the capsule opponent I'll show you really quick why I'm doing that so if I go here and change the character mesh to custom collision presets the custom and then change the visibility to block then you will see an issue really quick where I think that's actually there it is so you can see it's catching at some points if I can just get my cursor back real quick so you can see it's catching at some points but then it's able to shoot like through his arms you don't really want that because that wouldn't make sense for a camera the camera is gonna see them regardless of its looking straight at their arms or not so we're gonna go back and we're gonna change that back to what it was and we're gonna do the capsule component instead so go pawn to custom collision preset and change the trace response to block and then we go back and look once again and you'll be able to see that it just some of these are drawing for a little bit too long but you'll be able to see that it just hits them no matter if it goes there's arms or not which is perfect that's what we want so we have a response here that's great we're we're getting somewhere with this but it's not quite what we need so you can see that like if I if I look at this again it's also just hitting the ground and it's not making any distinction between what it's hitting it's just it's hitting a thing and that's saying I hit a thing so we actually need it to be able to make a distinction between whether or not it's hitting the ground or a character or something like that so what we're gonna do is we're gonna create what's called an interface so go right click blueprints blueprint interface and we're gonna call this blueprint interface cam target and what an interface is is essentially a class that actors can inherit from or an actor that actors can inherit from and not necessarily have that as their parent so you could have for instance a child of this blueprint that still inherits from this and so it can inherit from these two different things which is really useful because you could have say for instance character pawns and then items and you want them both to be interacted with by certain things but you don't want them to have the same root parent so then you can use this interface as a way to give functionality to both of them without having them both be parented to the same thing so if we open this up you can see you can add functions and those functions can then be overridden in anything that implements this interface so if we compile this and save it we can go in and go to the third person go to class settings up here I get third person character blueprint and go to class settings up here and then go to interfaces on the right and add and we're gonna go to kam target and that will be what we're adding is the interface here I guess you could probably add multiple interfaces so there's a lot you could do with this we're just gonna have the one so if we go to the security-camera and we get this out hit result break that and then we get the actor and we say does implement interface and then look for the kam target then we can get a branch here and if it does implement the kam target then we're gonna just print hello and that'll that'll show us how this is working so so now you can see it's hitting the ground it's not doing anything it's not not saying anything now whoever it hits the player for the pond that's implementing the interface it says hello so this is a really great way to be able to interface from different blueprints without them having to know what the other blueprint is so you can do functionality that otherwise you would have to get a reference to the pond and then you have to cast to the specific type of pond as opposed to just being like this is an actor does this actor have this interface so that's super useful for for things like if you had like an item system in a game you had a bunch of different type of items that some of them were potions and some of them were weapons but you wanted them all to different parentage --is but then you want it to be able to reference them all in a certain system like I can pick them up but they don't do the same thing and I don't have to know what they are what I'm trying to pick them up this is perfect for that and then also we're going to extend this a little bit such that we have a function that we are referencing in here but we're not going to do that just yet we're gonna we're gonna start off with this very simple interface here so we're gonna delete this because we don't need it to say hello every time and we'll probably get rid of the the debug trace on the line trace because we don't need to see that now I might actually drag this down a little bit more to so it'll be easier to to break its line of sight in the future so we're going to do here is now that we have a hit response and it's only it's able to differentiate the player from the ground what we're going to do is we're going to have it follow the player when it's them so once player breaks the line side of the camera the camera will stop sweeping and it will follow the player so the way that we are going to do this is we're gonna create another time line and I'm gonna use time lines a lot here I like time lines I find that they're a super easy way to do these things to play and stop things on on cue they can be a little expensive it's not as expensive as doing something on tick but there are you know costs associated with that and you can do things by setting event timers like I also did in this just keep in mind they're a bunch of different ways to do this but I find that timelines are super useful for these kind of things so we're going to call this I guess follow it just screwed up there to save follow target so we're going to call this follow target so when we break the cameras line of sight we're gonna get followed by this we're just gonna loop this indefinitely we don't actually care about the the float value in here we just want this to to constantly tell something an update and then they'll be able to stop it and come back to it later and restart so so we have this setup the other thing we want to do is we want to promote the target to a variable here so we're going to call this what we're gonna call this target and as soon as we hit this we want to set it as the target and then plug that in there so now that we have done that we are going to get the target over here well get the target and we're gonna get outdoor location and then we're going to get the camera all right yet camera yeah get location why is typing and get camera location and then now we want to do something called find look at rotation basically you just input two different locations and it'll find the forward-facing vector from the start location to the end location and the way we're going to use that is we're going to set the world rotation of the camera plug that in on update and then we're gonna set that is the new rotation on the camera so now if we go back you can see that once we break line-of-sight the cameras will follow us so perfect working exactly like we want to now we're gonna go back in here and do a little bit of cleanup because there are a couple things we want to do here so we want to we want to be able to have this thing lose line-of-sight with the player and we also want to make sure that it's not playing the the sweep motion when it's tracking the player and vice versa so first thing we're gonna do here is tell this to stop and then start the follow target whenever it catches the target the second thing we're gonna do is we're going to duplicate this and then when we lose the target we're gonna stop this timeline and we're going to start this timeline so those things should work pretty well in tandem to make sure that we're only doing the one motion that we should be doing so now you can see when it loses track it just snaps back however we're gonna fix that in a minute but yeah you can see it's kind of glitching out right now but we're gonna fix that in a minute the other thing you'll notice is that it's it's kind of looking at the pawns feet so we're gonna need to fix that so we're gonna fix that first and go into the interface and we're going to rename this function to be a good-look target get look target and the first thing you'll notice is that when you go into any of these any blueprint basically you can call you can call any of these interface functions so we can call it a third person character you can just call it here and then you can plug in the target essentially so you could you go into here and you can do the same thing look target two to plug in the target and say we want this specific class to call this interface function however if you go in here to the third person you can also I'm having trouble here look good look target okay so you can also do this class thing which is actually that's not quite working look the target event look target there we go so you can get the event look target and you do it as an event where you override it however we want to do it as a function because we want to be able to return an output so the way to do that is to go into the interface and go to output and click this little plus sign and we're gonna call this look target and then we're going to change this to a vector so now we have that and now you'll notice immediately if you go back here interfaces popped up and we have one function that we can override so we open this up we've got this here what we're going to want to do here is we want to go to the viewport and we're going to add a scene component to our capsule so it'll follow the capsule around and we're just gonna put that right above the head of the pond and then we will call that camera load target and then we're gonna grab that and get the world location and then we're going to return that so now if we go into the security camera instead of getting the actor location we're gonna delete that and we're going to get look target and this is going to call the function and then we're going to return that and plug that into our find lookout rotation so if we go look at it now you can see it's looking at the ponds face and that is where it's gonna keep trying to look every time it acquires the pond so that works and this is super useful because just as with asking if an actor implements an interface class where this doesn't really need to know anything about that actor over other than whether or not it implements the class this also doesn't need to know anything about how this interface function works so it's basically just calling this and if this this target has that interface function then it'll do whatever the interface function is overridden to do in that actor so you can essentially have two different actors that have two different functionalities so we could for instance have a cube that is another look target that we get at the cube moves in front of the in front of the camera and the camera starts looking at we can have it returned just the origin of the cube for instance it doesn't have to have the same kind of setup that the third person blueprint does so that's pretty useful so we have that now so we're looking at that and we can close the third person character and the interface because we're not really gonna change anything else in there we've got all the functionality that we need we're instead gonna focus on fixing up this this camera functionality so that it looks a little bit nicer it's not going to be perfect but it's it's not gonna be as snappy and it's not gonna have that weird little glitch that we were experiencing a minute ago so the first thing that we're gonna want to do here is we're probably gonna want to refine how we're doing the targeting in this are moving from the targeting to the back to the suite motion so the way that we're gonna do that is we are going to add a another timeline in here that is going to lurk between the the location that at last saw the target at to the original location of the or the rotation the original rotation of the camera so we're gonna call this return to sweep and we actually want to only do this once and then reset it whenever the camera finds a target again because otherwise whenever it loses a target it's going to try and do this and this so we're gonna say that when it loses a target instead of going straight up into camera sweep it's going to go here into the do once and then on top of that whenever we get a target we're going to reset this do once so that will work perfectly for our purposes we're gonna open this up and we're not gonna have this looping it's just gonna play once it's gonna have a length of two seconds and we're gonna add in a couple of points in here so we're gonna go zero zero and zero and then at time two it'll be one so essentially over its life from time 0 to time to is going from 0 to 1 so it'll it'll lerp between the two the two rotations that were giving it so if we go back you want to do a couple things here you want to drag off of the finished and tell it to play the camera sweep once it's finished so it's basically just it's just gonna lurk and then it will immediately resume sweeping once it's dumping so the other thing we want to do here after this keep this clean this doing this with multiple timelines can be a little messy so you want to make sure that you're keeping this organized so what we're gonna do first here is we want to get the relative rotation of the camera and we are going to promote that to a variable and we're just gonna call this last scene location because it's the last location that saw our the last rotation yeah we should read it mental rotation the last rotation it saw whatever its target was at so we've got that there and now we want to loop rotator this time actually and we want to plug in the last scene rotation into a and then B is just going to be 0 negative 20 and 0 which is sort of our original rotation there and then we are going to set the relative relative rotation of the camera we're gonna plug that in there or plug this in here okay so that should be good we just want to make sure that we've got everything in here setup well the other thing that we want to do is make sure that if we acquire a target we stop this so even if we're currently lurking between the two rotations wouldn't still stop and acquire a new target and I think that should do it let's give it a shot and see what it does so we immediately acquire the target you can see once we lose the target it lurks back to its original position and starts weeping again so perfect the only the only issue we really have here is that when we acquire the target it kind of pops a little bit because we've set the target above the head of the pawn which is not where the camera was looking initially and I'm not really gonna fix that here it complicates it a little bit but it's definitely easy to do with the same methods that we're doing here so you can you can definitely do that I'm just I'm just not going to do that here I think this is a good enough behavior for us to move forward with so we basically have all of our targeting sorted so the camera is doing what we want it to do now we need to move on to capturing the scene and then displaying that on a monitor so the first step we're going to take in that is we are going to add a scene capture component 2d to the camera and we're gonna call this camera capture and the reason why I was saying you could use this instead of the scene component is because we're gonna put this in almost the exact same spot as a scene component it's really you know it's more useful to use as that because it's also being you know the scene capture so we could just get rid of the scene capture and the the scene empty component and use this scene capture component for the line trace but we're not going to do that that's just if you want to optimize this just ever so slightly you can do that but here we're just gonna we're gonna place it in roughly the same spot and then just use it for its stated purpose which is capturing the scene that it sees so here we go so it's it's roughly in the same spot so now now that we have that we need to do a couple things here so we need to just before this set event timer by function we need to our set timer by event Wow I just garbled that we need to grab the camera capture and then we are going to to set the texture for it so it doesn't start off with a texture assigned to it you need to set a texture to it so that it is able to write to something because otherwise you just have a capture component that's not writing to anything and what we're gonna do is we're gonna create a scene or texture render target and I know I'm having so much trouble create canvas render target 2d so essentially what this is doing is creating a texture via the blueprint and we could just create we could just go into the content browser and go to materials and textures and create a render target or a canvas render target but we just want to do this in the game so that it's creating it when it needs it and it's not taking up like memory when it's not needed so you want to select the class type and that's gonna be canvas render target 2d and then we want to change the size here you can do a lot of different sizes but we're going to do flack tall by 512 that fits our purposes so we we have this now that we have created and then we can just plug this two into the texture target here and essentially when the camera starts to render its gonna render to this target that we've just created which then we can send to something else which will be our monitor so that's the next step that we're gonna do here so we're just gonna compile and save that and we're going to create a new blueprint that is going to be VP underscore monitor and we're gonna open that up or it's gonna open off on a different screen and then we're gonna add a static mesh and we're gonna call that monitor or we're gonna set that to the be the monitor we're gonna compile save so we've got that now we need to set up a little bit of functionality in here so that it's it's ready to receive what we're sending it so we're gonna create a custom event we call this a sign screen texture I'm having trouble typing I can't really see my keyboard so I'm just fumbling blind link all right so we've got this and what we're going to do when this is called is we're going to create material dynamic material instance ulm static mesh we should call this monitor so that it's a little bit clearer so we're creating a dynamic material instance on this mesh and essentially what this is doing is creating an instance of a material which will be our monitor material that we can then change parameters on that will only apply to this specific instance so now we're going to promote this to a variable right click print variable and this will be M ID screen texture I guess or monitor screen will call them on their screen m ID monitor screen material and since dynamic and then we're going to drag off this and do set parameter texture parameter and then we're gonna call this a we're going to fill the screen texture we don't actually have this defined in the material yup we're going to do that in a second and then the other thing we want to do is add an input to this this event and this input is going to be called screen texture just change this here to texture or a render target to target so you want to text your render target to D and then we can plug that in and so essentially whenever somebody calls this event and provides a little texture we're going to create a dynamic material instance that has that as the texture so we're only going to call this once and then it will be updated through the camera so we don't need to keep calling this that's why we're creating the material instance in here because this is only ever gonna happen once unless we want to switch what camera that we're using so we are going to compile that save it and then we're gonna come in here real quick and we're just gonna add a click and hold T and get a texture sample and then we're gonna convert this to a parameter and we're gonna call this I always do that it doesn't like to highlight and it automatically makes a comment there we're gonna call this screen texture which is what we had before and we're gonna plug that into emissive just so that we'll be able to see what we're doing this is gonna throw out an error because it is not it doesn't have a texture assigned to it so it needs a default texture so that if it is not assigned to texture through the parameter it's still able to display something so we're just gonna set that to this little green guy right here save it so now you can see that we have a problem automatically with this material and that is even though you can only see the screen on these UVs because I've dragged the other vertices off of the UVs it's still tiling things so we actually need to mask this off using our vertex colors so what we're gonna do alert oh that was the wrong loop let's just hold Ellen click much easier making this harder on myself we're gonna drag the red Channel in because the red channel is one I had for the screen and essentially we're just going to lurk between zero or and the texture that we're providing and plug that to a missive and so now that we take a look at this as soon as it saves you can see it's only applying the texture there so we've got that working the next thing we're gonna do is go back into the security camera and we need to have a way for the monitor for the camera to be able to communicate with them on there so we're gonna call this a variable coupled monitor and we're gonna make this of type VP monitor and then we're gonna make this instance editable so that then when we drag these things into the world we can actually tell them to communicate with each other by is backwards we can tell them to communicate with each other by that variable so we're going to go to the security camera and then we're gonna go here and click this little water drop or under a couple monitor and we're gonna select that monitor there so now these two monitors are now this camera knows this monitor so it can then talk to this monitor so after we've done all this we are going to grab this get the couple monitor and we are going to call assign screen texture we're going to plug in the texture target from the scene capture into the screen texture and we're gonna compile and cross our fingers and hope this works right yep so there we go so now the camera is capturing scene and feeding that information into this monitor here so you can see it grabs the target and it follows us around and everything's working as it should so that's great that is the very basics of getting this kind of camera system set up now we're going to go into a little bit more detail work to make this screen capture look a little bit more like it belongs on an old CRT and then we'll do a couple other things that are kind of interesting like controlling the framerate and stuff like that but all this is a little bit more detail work so now you have a functioning camera setup that you can use and now we're gonna dive into making it look a little bit cooler so most of this work is going to be done in the monitor material here and the very first thing that we're gonna do is we're gonna add a pixel esque texture to it to make it look like it's a CRT TV so I'm opening up substance designer here to show you what I've done to make a texture that kind of gives off this effect so you can see I made a gradient radial and then I made that a little bit bigger so there's a less black space around it and then I'm tiling that to create some offset here so I'm tiling it four times four lines and they're offset each by about 0.5 so essentially what that's doing is creating a grid that looks a little bit more realistic than just you know a bunch of perfectly lined up grid I've lined up pixels it might not be perfectly accurate but I think it'll work for our purposes one thing you want to make sure is that you have an even number of rows because if you have an odd number of rows and you're repeating the top and the bottom row twice which does not look good it looks really bad so just make sure you don't do that otherwise is a very simple texture and I'm just outputting it as 64 by 64 because it's gonna be displayed super small you know we're not gonna see the fine detail on that so I'm gonna I'm gonna import this now I'll just drag and drop it so you can see it's not taking up a lot of space it doesn't look super great but it doesn't need to because we're not gonna see it that close up it's gonna be a bunch of these so now to make our to make our pixelation filter for this monitor we're gonna drag this onto the monitor material we're gonna get a texture coordinate and we're gonna set that to be 100 by 100 and we could just plug this straight in however we can make this a little bit more extendable by giving this a scaler that we can then change in a material instance which is useful for just sort of figuring out how things look in the actual game so we're gonna give this scalar parameter here and we're gonna convert that to a parameter and we're gonna call that pixel size scale and we're gonna plug that in we're just gonna give that a default value of 1.5 so now you can't really see it here yet because we're not doing anything with it but we've got a very small grid of pixels and then we are going to multiply I just hit him and click I should use these shortcuts a little bit more often and we're just gonna pull off of the red Channel we don't need all the different channels because it is a grayscale texture so it's all basically the same so we're gonna multiply and apply that and then we'll take a look at it and you'll already be able to see in here the grid of pixels but we're gonna look at it in the editor so you can see a grid of pixels in here automatically there's an issue with it and that is that it is much darker because we've just added a bunch of black to the image so what we want to do is after we multiply the pixels we want to multiply it again and we're gonna get another scalar plug that in and convert that to a parameter and we're gonna call that screen brightness and we're gonna give that a value of 4 so now once this compiles you'll be able to see it's much brighter and we have our pixels so that's looking good and we can just real quick create a material instance of this and drag this out over here onto this this monitor and then we can open that and we can play with values in real times so you can see that you can you can tinker with that a lot more you can scale the pixel up if you want a really pixelated look you can scale them way down if you don't want to see it that much you can tinker with a brightness so that gives us a little bit of control and it's pretty nice the reason why I'm I created the instance and then dragged it on here was because if you if you use a material instance and then you create a dynamic material instance in a blueprint it seems at least in my experience that unreal then refers all of the parameter values back to their initial values within the parent material so you can't really mix and match the two of those but you could for instance just create the dynamic material and since in the blueprint and then change the pixel size and the brightness through that so just a thing to note there it it's a little gotcha that you can run into but now you can see we've got that pixel filter that is now overlaid over our image of what the camera seeing and you can see it actually provides a neat little like movement ghosting effect when you get really close to the monitor so that's actually kind of a neat unintended side effect of using these pixels so now we have that we're gonna rope that off and call that pixelation and we're going to move that out of the way cuz we're gonna be doing a lot of stuff here the next thing we want to do is chromatic aberration and if you're unfamiliar with chromatic aberration essentially what that is is the different color aspects of a picture are offset so for instance the red and the green and the blue aren't perfectly aligned so you get a little bit of a color ghosting effect and it's super simple to make this work so what we're gonna do here is really that texture coordinate we're going to leave that one one by one but what we're gonna do is we're going to add to that and we're gonna add a scaler to that and this will be a parameter as well and we'll just call this chromatic aberration intensity and then we're gonna make this a super small value because you don't want to offset it by a huge amount or will not look good maybe you do want offset it by a huge amount but for the for the CRT effect that we're going for it's not gonna look super great so we're gonna plug that into the UVs here and then we're gonna copy this make a duplicate of it by clicking on it and controlled up you clicking and then we're gonna plug that straight into the UV so one of these is gonna be offset and one of these is not going to be offset and then we are going to not add we are going to append end vector I'm going to duplicate that so what we want to do here is we want to plug in the different components of this to the append to reconstruct it after we're offsetting it so we're gonna offset just the green and then we're going to plug our D and B back in to be appended back into a single vector and you'll notice that I'm doing it in a very specific order I'm doing it and our then G then B to make sure that it's accepting the color information back in the order that I want it because otherwise you may get some issues where you've appended the wrong value back to the wrong color Channel and so you'll have a different color color channel offset so then we're going to take this append plug it back into the lerp and apply that now if we go back and it compiles you can see that there is a little bit of color ghosting on the image as it moves and then we can just go look over to see it a little bit better where it's just you know not moving so you can actually see what's happening you can see that on the right side here we have a little bit of red showing off and on the left side here we have a little bit of green showing off whereas this should be white because this is I it shouldn't have that color ghosting on it so if we if we turn this on in the the instance we can then change this you can see a little bit better how that's working is we're we're able to offset this pretty greatly so you probably don't want to do it too much because then you get effects like that you could probably stop this from tiling but even so like the more you offset it the crazier the image gets so we don't quite want it to be intense but you can you can crank it up a little bit if you want it to be a little bit a little bit more obvious than what it is I think the subtle effect here is gonna work the best for us though so then we're gonna rope this off and we're gonna call this screen texture yeah our scene texture yes seeing texture and chromatic aberration and so now we have that effect we've got a couple more effects we want to make here of those the next one we're gonna make is sort of a noise if you've ever watched things on a CRT over like broadcast television or from a VHS you'll notice this noise that people refer to as snow which is just a sort of background noise that just seems to affect the entire image kind of gives a grainy physicality and it'll it'll really make this look a little bit more like a crappy old CRT monitor with a crappy old security camera feeding into it so the first thing we want to do here is get oh that's not what we want to do we want to we want to get a texture sample if I can make it give me a texture sample and we want to get a texture that is already in the engine so this is going to be noise high frequency so good 64 by 64 tiling noise high frequency I'm gonna take a look at what that looks like it's just a very very grainy just growl noise kind of texture and what we're gonna do is we're gonna get the texture to the coordinates again and we're gonna tile this 4x4 and we are going to pan this so that there's movement to it so it's not just a static background texture so we're gonna hold down the P click to get a pan er and we're gonna plug the the coordinate into that and then we're going to get a time node and we're gonna plug that into time and then we're going to get two different notes you're going to get a cosine and a sine we're gonna add these two together I'm gonna plug it into the speed so basically our our speed of panning on the x and y are gonna be controlled by sine and cosine just to give it a little bit of variability and interestingness so then we're gonna plug the panner into the texture sample and you'll be able to see it working in just a second so you can see now it's just this really like really good motion of background noise so it's not super static looking and it does repeat a little bit here but once you have that as the background to an image that'll be a lot less obvious also the other thing we're gonna do is it's got a lot of contrast and it will be super obvious with that contrast so what we want to do is we want to add 0.5 to that which will bring up all the colors a little bit or bring up all the values so that there aren't so many dark values which would be super obvious so you can see they're bright now it's it's a little bit too bright though because that's gonna make our image very bright so we're gonna clamp that so now you can see we have less contrast in there but we still have that that noise going on and now what we're going to do is multiply this to the texture that we're getting from the camera but we want to do this after the chromatic aberration but before the pixels and the reason why that is is because the pixels are not going to be affected by this noise as noise as an image quality thing it's not changing where the pixels are right so we're just gonna plug that so the lerp is going to go into this multiply and then this multiply is gonna go into this other multiply and then now you can't really see it super well in here but if we go look at it in the editor we can actually we should be able to see that so you can see there's there's just kind of a soft noise going on the background that gives it this grainy kind of lo-fi effect and then if we look you can see it on the image itself being captured here so you know it's maybe a little intense but I like it it's got that really low fire effect and I appreciate the way that looks but you can definitely you could for instance go into here and parameterize what you're adding to it to remove some of that contrast so you get less those darker areas if that's what you want so that's just something that you can do to customize that effect a little bit to your liking we're gonna comment this and call this snow noise and then we've got two more effects we're gonna add here so the next effect if you've ever seen a CRT monitor or television with a specific refresh rate being recorded by a camera that has a different refresh rate than you will have seen it in this effect essentially what's happening is since they're not synced up you can actually see the line go through the screen as it refreshes so you get the scan line as it refreshes where these pixels are lighting up and then it kind of fades off a little bit as the scan line moves down so we're gonna do this all procedurally here with no textures we're gonna get a text cure coordinate and then we are going to break that out into its two components and then we are going to add to the G component which is essentially the Y the up-down we're gonna add one to that and then we're gonna pin these back together and the reason why we're doing this is because we if if we just left this without adding one to it and then started trying to pan this image down we would just be starting at the bottom of the image do the way the UVs are set up and then panning down so out of view what we want to do is start at the top of the image and then pan down across it so this is adding one to do that and then we are going to get a pan er and we are going to plug in into the coordinates of what we just did here and then we're going to leave it zero on the ax but have a pan at negative one so basically it's just panning down now then we need to get a another time node and we're going to multiply this by by a number and we can actually I haven't done this but we could actually just parameterize this and just call this scanline speed and we'll give that point 0.25 plug that in and so essentially what this is doing is its slowing down the time value that we're getting and then we're going to take this and get a frack what this node does is essentially it's only counting the decimal places so as we count on word and time we'll get up to you know values equal to whatever however long you've been playing however this is only going to output the the fraction the fractional component of that I guess I should say which is just going to be the decimal between 0 and 1 it will just keep counting up from 0 to 1 every time it takes over to the next integer so that will be perfect for us as we just wanted to start at the top of screen and pan down to the bottom of the screen which will be a value of 1 and then restart at the top of the screen once it hits the bottom of the screen so if we if we plug this into something that we can get a look at we can see we can see what that's doing so we're gonna get a linear gradient and then we're gonna we're just gonna get the the V portion of that and we're gonna plug this into a power node but before we actually change the exponent on this we're just gonna look at what it's doing so you can see it's starting at the top is panning down and then it's resetting at the top but what we want to do here is we want to set this exponent to 50 so we get rid of a lot of that contrast and we just have a semi sharp line with a little bit of fall-off in the gradient and then we're going to duplicate this and we're gonna plug this in again and we're gonna put this at 100 so that we get an almost entirely sharp interface there and now what we're gonna do is we're gonna get a 1 minus node which is going to basically flip this so we take a look at that you can see that's upside down now and then we're going to multiply these two so once we multiply these two together the blacks are gonna the black areas of this are gonna knock out the white areas of this and vice versa right so now look at it you can see that we only have a line where we had that gradient which is exactly what we want and now that we have that we're gonna multiply this again because it's gonna be a little bit bright the way it currently is a point zero one actually let's let's parameterize that as well plug that in one zero one convert this to a parameter and I call this scan aligned brightness so now we can change that in in a instance of this material so you can see it's a little bit darker now which is great because we want this to be fairly subtle we don't want it to to be crazy obvious and we're just gonna clamp this just in case it the values are probably between zero and one but it's always a decent idea to to clamp these things just in case you don't you don't wind up getting a value out of these things that you don't want if we got like a negative value and started multiplying things by a negative value we might have some issues with weird effects happening there so now we want this effect to come in but we want this to happen after all of the image effects but before the pixels because we're refreshing the pixels themselves so they're not the pixels aren't moving but we're brightening the pixels up so we're just gonna multiply that and I actually I should just move all this stuff back so that we have a little bit more space and this is not as much of a nightmare all right perfect so now you can see we have this line that is moving down the image which is exactly what we want we're gonna apply that and take a look at it in the editor so you can see you can see how it looks what I have done something terribly wrong what am i doing oh I think I didn't want I did not want to multiply that I want to add it you you don't want to multiply it because if we multiply it you're knocking out all of the color values where you don't have that that white so we actually want to plug that in there and we'll get rid of this yeah so you you just want to add to the values to make them brighter you do not want to multiply because then you'll make a lot of things darker oh did I messed I'd mess it up holy guacamole Batman what am i doing [Applause] okay so I made a little bit of a mistake here you want this lerp to be the last thing before the screen brightness multiplier otherwise you are going to be adding a bunch of things after you you mask out the screen so now I have this all set up I think this should be right so if we go take a look at it come on okay there you go so now mask incorrectly and we've got the scanline add it in here and everything's happening in the proper order so just make sure you have everything in the proper order here because the order matters quite a bit and once you get a bunch of things plugged in here it can be a little bit confusing to make sure you have everything plugged in correctly but this is this is the way it should be done and just make sure when you're adding a bunch of effects and like this as well to to kind of consider what the effects are doing and which ones you go first so like I've been hammering home this entire time you know things like the pixels will be the last thing because that's you know that's the fundamental makeup of the image whereas image quality things are gonna happen further up the pipeline so just keep all that in mind and make sure that you're organizing these things well now we're gonna do the last effect that we're gonna add to this we're gonna add some distortion and if you've ever seen once again something broadcast over over-the-air and radio signals or if you've seen a VHS tape or something like that you'll notice that there's often distortion effects that happen where the the image just goes nuts it just gets all messed up and it does not look very good so we're gonna add something like that that happens occasionally not all the time so first we're gonna get a time note and we are going to get a sign off of that time note so then we're going to put that into a pan earth and the pan er is just going to use the stock texture coordinates we're not gonna change anything about the texture coordinates and we're gonna pan a hundred on the act so this is gonna pan very fast and then we're gonna need a texture for this so the other texture that I had in my my substance designer project here is this anisotropic noise and this thing works perfectly for what we want right out of the box the only thing I've changed here is the Y amount to give it a lot more noise and then I'm exporting that again as a 64 by 64 grayscale image and then we are going to import that into our project here we're going to save it you can see it's grayscale perfect go back to this we're actually gonna drag it in because that's easier so we drag it on we got our texture sample and we're gonna plug this into the UVs and immediately you're gonna do this is just going really crazy really fast which is exactly what we want however this is gonna be a little intense to start off with we'll drag off one of the components here we'll multiply by 0.5 and actually once again this is a something that we can parameterize super easy we're gonna call that distortion intensity we're gonna give that 0.5 as a starting value and so you'll see this this makes it a little less intense the movement will still be intense but it won't be as contrast II which is it's kind of what we want and then we're going to just give this a shot and see what it looks like so you kind of get an idea of what we're doing here even though this is not ideal because we don't have it all set up just perfectly yet but we're gonna add this to our textures our texture coordinate so you can see then it starts distorting where each bit of the texture is being displayed if we apply that and take a look you can see it does a pretty good job of getting that crazy you know the entire image is being distorted effect where you can't really see what's going on but you can kinda still see the image under there you'll also notice that it it offsets the image a little bit if you don't want that you can after you add this distortion to the textures at extra coordinate you can then add to distort it or to move it back without distorting it just add a scaler to the whole thing and you can do that in such a way where you scale the scaler that you're adding back by the amount of distortion intensity such that if we go over here let's see grab that I open this again I did what are you talking about okay so you could do that in such a way where as you'll notice as you do this it moves more and more so you scale it by how much you're distorting it by we're not gonna do that here because I'm not gonna distort it a crazy amount I'm just gonna do like a head point five and you can you can almost not even tell that it's like once you get up to 0.5 you can't really even tell what it was where it was supposed to be or anything like that but you can if you wanted to make this distortion a little less intense and that actually looks pretty cool because you you can still see what the image is but you're distorting it but we're gonna we're gonna stick with us so now now that we have this one thing you'll notice is that it is constantly distorting and we do not want to do that we only want to distort at certain times so you could do this via a parameter value through blueprint and you could set it up such that it goes off with the noise and all that kind of stuff but we're not gonna get that intense in here we're just going to do this a simple way to the blueprint so there's a material graph so that it only does it for a specific amount of time and then it goes back to normal and then it does it for a specific amount of time again so the way that we're going to accomplish this is by taking the time and taking a sign of the time and if we want to see what that would do we can just take that right now and well actually just should have done this a long time ago make this so we can see the monitor on here so you can see with the sign what it's doing is it's it's not distorting at zero and then once it gets to one or negative one it's distorting it more and more so we don't want to a have it doing it this quickly so first thing we're gonna do is divide the time by ten so that it's going much slower and we'll see how that pans out in just a second so you can see it's you can much easier see what's going on here it distorts a whole bunch and then when it gets close to the center it's not distorting that much and then once it gets the other side is distorting a whole bunch again so we've got that now what we want to do though is we don't want it to go into negatives first of all because you don't really want to plug negative values and to alert so we're gonna do what's called constant bias scale plug that in if you're unfamiliar with this node what it does is it add something it adds a value to another value and then it scales that value so what we're doing here is we're adding one to sign which means that instead of going negative one to one it goes zero to two and then we're multiplying it by 0.5 so then it goes zero to one so you can now see that it just kind of it goes to the center and then it goes to one so we've got that now but we don't want it to just kind of gradually distort over time we want it to be not distorted and then suddenly distort and then be not distorted again so the way we're gonna accomplish that is a floor and what floor does is it rounds to the rounds down to the nearest integer so what we're doing right now just plugging a sign in here it's never getting to one it's going all the way up to almost one and then it's rounding it all the way back down to zero so what we want to do is we want to bias this a little bit more so it gets just over one so we're going to do one point one and so for a very small portion of its life it is going to be over one it's going to distort and then it'll go back to being normal so you can see that happening but I should not have moved that so you can see that happening here it distorts and then snaps back and it's fine and then it's fine for a long time because we set it up that way and then it's gonna distort again there you go so that's perfect that's exactly what we wanted we're gonna call this distortion we're gonna save that we're gonna also save and close this and now we'll take a look at this with the texture from the camera so you can see now we've got a security camera that is feeding image into this monitor and it's got a bunch of neat little effects that make it look a lot more like a CRT monitor and a bad closed-circuit camera so now we pretty much got everything we want there's only one more thing I want to do here and this will be super quick if we go back into the security camera we can we can set a frame rate such that this is not updating constantly because if you look if you look it's just updating essentially it's drawing us every frame and we don't necessarily want to do that a for performance reasons and B for aesthetic reasons you might not want to do that so first thing we have to do here is we're going to add has limited framerate bool that's going to start off as no but we're gonna make that instance editable so that it can be changed for each camera and then we're gonna make a frame rate float and we're also going to make that instance editable so it can be changed for each camera and then I think after all this but before it starts targeting what we're gonna do is we're gonna add a call to a move you should make the function first custom event we're gonna call the set set frame rate and we're gonna call so frame rate want to plug this in here so essentially what this is going to do this is gonna branch and if this has a limited framerate it is going to set timer by event and we're gonna call this custom camera update I guess work fine so this is going to then drag off of hours that the camera capture and we're going to capture scene so essentially what this is doing is when this fires it's gonna say to the camera take a picture so we need to give that a time so what we're going to do is get our frame rate and we're gonna make sure this is looping and we are going to divide not divide divide and you want actually want to divide one by the frame rate so if it's 60 frames per second that's gonna refresh 60 times a second and then that's gonna call that so you would think this would work right off the bat but it does not because there are a couple things we need to change in the camera capture so we're gonna set these we're gonna set capture every frame and we want to set that to no so essentially what this setting is is it's it's telling the the scene target or the the scene capture to capture every time a frame is rendered we don't want to do that that's a little expensive we don't need to do that I mean it's not super expensive but it gets more expensive the more complex your scene as and then the other thing we want to do here is capture movement so get cap no set capturing movement sorry set capture movement so essentially what this does we don't check that I want to check that so essentially what this does is every time the scene capture component moves it captures the scene and we don't want that to do that because our camera is constantly moving the entire time and so we don't want that to happen we just want it to update when we tell it to update so you want to set both of these things to false and now if all is well we should be able to click on this and go over and set has a limited framerate and we'll just do something that's very obvious like 10 10 frames per second so now you can see that as the camera moves it is very jerky because it is only updating 10 times per second and you can set what is appropriate for your game you know probably for this kind of thing 30 frames per second it would be good if you want something that looks kind of fluid but it is not like taking up too much performance if you're if you're going for this closed-circuit TV kind of looked that the super low framerate can actually be helpful because if you've ever seen like footage of somebody like robbing a convenience store or something it usually looks like this because they're they're constantly recording film over the course of you know days so they need to they need to keep all that on hand so they're recording a low frame rate so if you if you wanted this to look like it was a thing that had been recorded in the past this is the perfect kind of effect for that however if you want it to be a live kind of feed then probably something like 30 would work just fine or you go a 60 if you really don't care about the performance that much but you see with 30 it actually looks pretty good and something between 30 and 60 is it's pretty reasonable for a monitor you know most CRTs probably had a refresh rate of 60 Hertz so you wouldn't want something around 60 or less you wouldn't want it to be super high because that just doesn't make sense so that is it we have a very neat looking material effect here on a camera that works that traces the the player and then loses the player we could add more different things for it to track if we wanted to but we've got this and it makes sense we've got everything working as it should and so that's basically all we wanted to do here whoa that's cool but that's that's basically all we wanted to do here so we've got our camera working we've got our material and now you can make a security camera for your game that looks super cool I hope you found this useful if you have any questions about it just put them down in the comments otherwise enjoy it and I hope you have a great day you

Channel: Split Hare Games

Views: 6,352

Keywords: UE4, Unreal Engine 4, indie game development, game development, tutorial, how to make games, VFX, basics, learn, getting started, unreal, engine, epic, effect, how to, material, real, time, 3d, video, game, scene, capture, 2d, render, target, canvas, security, camera, CRT, tv, monitor

Id: Er7ssUc_fSU

Length: 79min 24sec (4764 seconds)

Published: Tue Jan 29 2019