Making a simple security camera with Unreal Engine
22 May 2019
Security cameras have been used in video games for a very long time. One of the earliest uses of security cam/CCTV was in the 1987 release Metal Gear. As game engines and graphics became more powerful, security cams that transmit live (or recorded) footage became more and more prevalent. Some games have even used surveillance as a game mechanic.
In this article, I'll show and explain the steps required to build a simple security camera in Unreal Engine 4 (4.22.1 at the time of writing) that captures live picture with an in-game camera, and transmits the same in real time to a monitor. A quick note before I begin - for the purpose of this article, I'll assume that you know how to place objects and create a scene layout, and that you're aware with the basics of blueprints and the material editor. If you think it'd help you to learn a little more in that regard, please refer to the Unreal docs, which have some fantastic tutorials for beginners starting from scratch (I'm planning on posting some beginner tutorials myself at some point, but my schedule's crazy, don't wait for me). So now that we've got that out of the way, let's get the environment set up. We'll create a new blueprint project with the Third Person template, so it looks somewhat like the following:
(I deleted the text and the documentation actors because I find them distracting, but no harm in keeping them if you want, of course)
Let's make some quick adjustments to the scene to make it more suitable for us. In one corner, create a roof/ceiling and a wall, so we have ourselves a nice little security room. Here's where we'll place our security monitor.
Now we want our security camera to be capturing something, like a part of the scene. However, our scene isn't super-interesting yet - other than the player character, there aren't any moving objects. To fix that, we'll create a simple moving actor with a blueprint. First, create a new blueprint (in the folder of your choice, I'll just use the "Content" folder for now) of the type
Actor, and launch the blueprint editor. Once inside, click on "Add Component", and add some kind of static mesh component to give it a visual rendition (I'll use a cylinder). Next, click "Add Component" again and add a
RotatingMovement component. You can play around with the rotation rate in the details panel, but the default should be fine for now. Note that I changed the rotation and scale of the cylinder a little, to make the movement appear more prominent. I also made a new material at this point and applied it to the cylinder, but that's up to you.
Once you're done with the above steps, you should have a blueprint that looks fairly similar to this -
With me so far? Fantastic! Go ahead and place the blueprint anywhere on the level (I recommend the bumped walkway, as I think it would be easily visible to our security camera from there).
We're almost done setting up, with just two more things remaining - an object representing the camera, and another one representing the monitor screen. In an actual game, of course, you would do these with proper static meshes, but for now we'll just keep it simple and use primitives - a cylinder for the camera, and a plane for the monitor. Add a cylinder to the scene, facing our rotating object, and add a plane that goes flush against the wall in our dark security room. Keep the aspect ratio of the plane 4:3. This is not strictly required, of course, but that's the aspect ratio of most old TVs, so it kinda adds a little more realism. Regardless of the aspect ratio, TV sets are almost always rectangular, so it wouldn't hurt to make ours the same.
(Don't worry about the jagged edges of the shadows - those can be fixed by picking appropriate light map resolutions for the static meshes involved. While that is outside the scope of this current tutorial, a quick googling should give you more information on that)
Now that we have completed the layout, we can finally start focusing on the good parts - making it all work together. The basic principle is simple - we'll place a special type of camera object in the scene where we have our CCTV actor set up, and have it capture the scene it sees in front of it. Unreal has an actor specifically tailored for this job - it's called a
Scene Capture 2D actor. Once we have that in place, we need to redirect its "feed" to a special kind of texture, called
TextureRenderTarget2D (or simply a "Render Target"). Finally, we'll create a material out of that texture, and apply it to the plane that we're using as our TV screen. Sounds simple yet magical? That's because it is. Let's see it in action!
First, we'll add a Scene Capture 2D actor to our scene, and align it more or less with our "camera". Note that even though it's an actor on its own,
SceneCapture2D is also available as a component, so you can add it to your blueprints if you want to extend this functionality to multiple objects.
The next step is to create a new Render Target asset. You can find it under "Materials and Textures".
Name it "CameraCapture".
Now, go back to the World Outliner, select the Scene Capture 2D actor you just added, and go down to the "Scene Capture" section of the details panel. You'll see a property called "Texture Target". This is the target texture where the capture from this camera will be rendered. If you click on the dropdown box, you should be able to see "CameraCapture" come up in the list. Select that option.
Once you pick the texture target, you should see a preview already come up in the thumbnail for the Texture Target.
Now, as a final step, right-click on "CameraCapture" and choose "Create Material" from the list. Leave the material name as suggested by default (for the sake of simplicity). Then go to the plane we added inside the security room, and select its material as "CameraCapture_Mat". That should do it! Now the plane in front of you will display whatever the Scene Capture actor is seeing in front of it, and you have a very basic security camera system set up for your game.
(If you can't see anything on the plane or it appears partly hidden, it is very likely that the plane's oriented incorrectly. Play around with rotation until you get the view you're satisfied with.
While we certainly have a working result, it doesn't quite give us the feel of looking at a security camera because of multiple issues. First, the room is too dark (to be honest you'd have been able to see nothing in the video above if auto-exposure wasn't enabled), making it hard for us to see what's going on on the screen. We could solve it by adding some lights, but then again, why do we need lights? You can watch TV in the dark just fine, right? That's because television and computer monitors are sources of light themselves, and that means we have to look into the emissive properties of the material. Also, if you'll look closely you'll realize that the picture on the monitor is a little stretched out. This is because the camera is capturing a square image and we're displaying it on a rectangular screen. It's also fairly low-res (which I admit somewhat resembles real-world CCTV resolution, but we'll try to improve upon that anyway). Lastly, It'd be cool if we could add some visual effects to the material, to make it look more like real CCTV footage. So let's get started on fixing these.
First, we'll modify the material by adding a Multiply node to the initial Texture Sample, and plugging that new value into both base color and emissive color. You can play around with the scalar multiplier, but I found that a value of 4 gave satisfactory results.
Much better, right?
To fix problems with aspect ratio and resolution, double-click and open the CameraCapture Render Target in its own texture editor. Change Size X and Size Y to 1024 and 768 respectively, so it's both a little higher resolution, and also matches the aspect ratio of the display screen.
Finally, let's add some effects. We'll make the image black-and-white (by desaturating it), and add a tone to make it look blue-greenish. We'll also make the surface a little shinier, to give the impression of a glassy TV screen which both emits and reflects light.
Let me explain what's going on in the material expressions above. First, I added a Desaturation node, and fed it a parameter of 1 to desaturate it fully (positive values will desaturate, and negative values will increase saturation, so this can be a handy node in either case). After that, I added it to a color (
#082717) in the form of a 3-vector to give it a greenish tinge. You could use multiply here instead of add for a different effect; I chose add because I liked the result more. Then I added this texture I found on DeviantArt in the form of a Texture Sample node, to simulate scan lines of old TV sets. To add vertical movement, I'm feeding it custom texture coordinates which incorporate the use of the Time function (play around with the texture coordinate values until you get a result you're happy with). Note that at this point, I realized I could remove the earlier multiplication node (that was added solely for the purpose of raising the brightness), as that effect will have been achieved by earlier calculations anyway. Lastly, I assigned some values for the surface smoothness and such, to make it appear shinier, like the glass on a TV would be.
There's just one thing left to add for it to look even more realistic - we'll incorporate a rectangular light into our scene to simulate the light being emitted from the monitor (this is the most common use of rect lights, in fact). Add a Rect Light to the scene, and position it so that it roughly covers the monitor screen. Also, make sure the direction of light is opposite to the wall it's on, otherwise you won't get any light at all. The greenish hue we used earlier in the material would possibly be too dark for the light color, so play around until you're happy with the way it looks. I decided on the color
#23AF66 for the light, but pick what you feel works best.
For the final test, I launched three instances of the game at once, had two of my players run up to the walkway, and sent the remaining player to the security room.
Pretty neat for a one-hour job, right?
This was a super-quick and rudimentary example of a security camera. There's definitely room for a lot of improvement. But, that's all for now. I hope to come up with more Unreal features and write more on implementing various common game mechanics with Unreal. If you liked this post (or even if you didn't), please leave a comment below. And hit subscribe so you can be notified when I post a new article!
(Cover image from Overwatch)