Get started with John Lemon’s Haunted Jaunt

Write a script for character movement

The Environment

The Camera

Ending the Game

Enemies, Part 1: Static Observers

Enemies, Part 2: Dynamic Observers

Audio

Build, Run, Distribute 

3D Beginner: Tutorial Resources

This is a beginner-level project for students who have no or limited experience with Unity or computer programming. Students begin with programming simple scripts with C# coding language. 

Create with Code, for computer programming and Unity development experience

Playground for Educators, to learn Unity interface in an easy-to-manage project

3D Beginner Complete Project

Welcome to the John Lemon’s Haunted Jaunt: 3D Beginner Project! In this project, you won’t just discover how to create a stealth game — each of the 10 tutorials also explains the principles behind every step. No previous experience is needed, which makes John Lemon’s Haunted Jaunt the perfect start to your journey with Unity.

John Lemon's Haunted Jaunt: 3D Beginner

6256c5af-25d4-5e6f-b36f-78be7700e388:zx7pohSEomVRos4yXEnFif

Explore the Camera Component

How does Cinemachine work?

Set up a Virtual Camera using Cinemachine

Change the Cinemachine Virtual Camera Component Settings

Add Post-Processing Effects

Create a Post-Processing Layer

Improve Image Quality with Anti-aliasing

Create a Post-Processing Volume

Add the Color Grading Effect

Add the Bloom Effect

Add the Ambient Occlusion Effect

Add the Vignette Effect

Add the Lens Distortion Effect

Summary

Now that you’ve created a player character and environment, it’s time to think about the camera for your game.


Set up a virtual camera using Cinemachine

Add a range of different post-processing effects

Once you’ve completed this tutorial, your camera will be set up to make the game as visually interesting for players as possible.


In the previous tutorial, you created a level for your game. The character can now walk around the Scene, but this means that he sometimes wanders away from the camera. In this tutorial, you’ll adjust the camera settings to make sure this doesn’t happen. 

Scenes in Unity are made up of GameObjects which in turn have a collection of components attached to them. The way that the Scene is viewed by players is constructed in the same way.

To view the Scene, a GameObject in the Scene must have a Camera component.  When a new Scene is created, a GameObject is added called Main Camera which has a Camera component.

The camera points down the GameObject’s z-axis and behaves exactly like all other GameObjects. In the Scene view, you can see a gizmo representing the camera’s frustum. The frustrum is a solid shape that looks like a pyramid with the top cut off parallel to the base. This is the shape of the region that can be seen and rendered by a perspective camera.

When you make a game, you have a few options to make sure that the camera followers the player character. One solution would be to write a script for this. However, Unity has a built-in solution to the problem: Cinemachine. 


Cinemachine is Unity’s answer to all things relating to cameras in games. A basic summary of this system is as follows:

One or more ‘virtual’ cameras are created in a Scene.

These virtual cameras are managed by a component called the Cinemachine Brain.

The Cinemachine Brain is attached to the same GameObject as a Camera component — by default this will be the Main Camera GameObject.

The Cinemachine Brain manages all of the virtual cameras and decides which virtual camera (or combination of virtual cameras) the actual camera should follow.

In your game, the camera will only ever be following JohnLemon, so you’ll only need one virtual camera. You’ll make sure that this virtual camera follows JohnLemon, and then the Main Camera GameObject will stick to that.

To set up a virtual camera using Cinemachine:

In the Project window, go to Assets > Scenes and double click MainScene.


1.  In the Hierarchy, select the JohnLemon GameObject.


2.  Move your cursor over the Scene window and press the F key.


3.  In the top menu, go to Cinemachine > Create Virtual Camera. 


This will create a new GameObject in the scene called CM vcam1:



This will be created at the focus point of the Scene window’s camera, so it should be right on top of JohnLemon.  However, since you now have a virtual camera in the Scene it will have moved the Game window’s view, so you can no longer see JohnLemon in the Game window.


To fix this, you need to make sure the virtual camera is tracking the character by changing the Cinemachine Virtual Camera component settings.  


To set up the virtual camera so it tracks JohnLemon:


1.  In the Hierarchy, select CM vcam1.

2.  In the Inspector, find the Cinemachine Virtual Camera component. This component has a lot of settings, but at the moment you just need to focus on three sections: the target references, the body and the aim.


The target references section has two settings: Follow and Look At.  These are optional references to the Transform components of GameObjects.  

If you want your virtual camera to move, then it needs to know how to move. Specifically, it needs a reference to a Transform that it will follow.  Likewise, if you want your virtual camera to rotate then it needs to know what it has to rotate to look at.

The next section two sections are the Body and Aim.  These are settings for how the camera moves and rotates respectively.  You’re going to restrict the movement of the virtual camera, so it has JohnLemon in view all the time but doesn’t actually look at the character.



3.  In the Aim section, change the drop-down menu at the top right from Composer to Do Nothing.

4.  Drag and drop the JohnLemon GameObject from the Hierarchy window onto the Follow property of the Cinemachine Virtual Camera Component. This will change the Follow setting to reference JohnLemon’s Transform. 

5.  In the Body section, change the drop-down at the top right of the section from Transposer to Framing Transposer. Changing the Body to a Framing Transposer will allow you to control the virtual camera’s position by giving it rules about where on screen its Follow target has to be.

To find out more about the different Body setting values, you can check the Cinemachine documentation (in the top menu bar, go to Cinemachine > About).

The Game window should now have several red and blue boxes on it.  These are guides for where on the screen the target can be:

6.  Now let’s set the virtual camera at the correct angle. In the Hierarchy, select the CM vam1 GameObject. On the CM vam1 GameObject’s Transform component, set the Rotation around the x-axis to 45.

Now the virtual camera is tilted down and looking at the character from above.  This is roughly the look you’re looking for. Why did the virtual camera move when you only changed the rotation?  This is the power of Cinemachine!  

You knew that you needed a more top-down angle to our camera, and the virtual camera worked out that if you wanted it to be tilted down, it needed to be higher up in order to have its target on screen.


7.  Most of the default settings of the Framing Transposer are fine for your game.  The only one you need to change is the Camera Distance setting — the character is a little too small on the screen, so you need to move the virtual camera a little bit closer.

Change the Camera Distance setting from 10 to 8.


8.   In the Hierarchy, select CM vcam1 and rename it to VirtualCamera.


9.  Deselect the VirtualCamera GameObject to remove the guidelines from the Game window.


10.  Save the scene by going to File > Save Scene from the top menu, or by pressing Ctrl + S (Windows) or CMD + S (macOS).


11.  Click the Play button in the toolbar and test the game so far.  Click Play again when you’re finished testing.


That’s it — you’ve set up the virtual camera and its movement! Now you can start adding some visual flair to the camera to make the game look even more awesome.


Post-processing involves applying filters and effects to the game image before it’s rendered on screen (similar to filters that can be added to photos). In this section of the tutorial, you’ll explore how post-processing works in Unity and then apply it to your own game.

Generally, post-processing effects are grouped together and used on different areas of the game world. This means that when the camera is in a particular area, its designated set of processes are applied to the image.

Imagine that you are in a dark room and then step through a door outside into bright daylight.  Your eyes will take a while to adjust and everything will  seem much brighter than it usually does when you exit the room. In Unity, this could be simulated by having different groups of post processes applied in the room and outside it. The groups of post processes are Assets called Post-processing Profiles. The areas of the game world which have profiles assigned to them are Components called Post Process Volumes.

Sometimes, different cameras have different post-processes. To link a set of processes to a specific camera, a Post Process Layer component is added to the same GameObject as the Camera component. Layers are a way of organising GameObjects by behaviour.

Find out more about post-processing in Unity

This tutorial includes step-by-step instructions to add specific post-processing effects in Unity Editor. If you’d like to explore these effects in more detail, you can find more information in:


The Unity Manual post-processing overview

The post-processing package documentation

1.  In the Hierarchy, select the Main Camera GameObject.


2.  In the Inspector, find the Layer property below the GameObject’s name.


A GameObject can only belong to one layer. The Main Camera is on the Default Layer. There are several options by default in Unity, but you can also create your own layers in the Tags & Layers Manager.


3.  In the Layer property drop-down, select Add Layer…

4.  In the Tags & Layers Manager there are 32 available Layers in (starting with 0 and ending with 31).  


The first eight Layers are reserved for Unity’s default Layers, but the remaining 24 can be used for whatever you want.  Since you need a Layer for your Post Process Volume, it makes sense to create a Layer for all Post Process Volumes.


5.  Add "PostProcessingVolumes" as User Layer 8.

6.  In the Hierarchy, select the Main Camera GameObject. It will still be on the Default Layer:


This is because although you have created a new layer, you have not reassigned Main Camera to this.

7.  Add a Post Process Layer component to Main Camera.


8.  Change the Layer property from Nothing to PostProcessingVolumes using the drop-down menu.



Before you move on to set up your volume and profile, let’s quickly consider anti-aliasing. 

Aliasing is when the edge of an object looks jagged and the pixel outline can be seen:



Anti-aliasing is a post-processing effect that reduces the prominence of these jagged lines by surrounding them with pixels of intermediate shades of color.  There are several different algorithms for working out which pixels need adjusting and by how much — you’re going to use the simplest and most effective one.


1.  Make sure that the Game view is visible, so you can see the changes you are making in this section of the tutorial.


2.  In the Post Process Layer component, change the Mode property dropdown from No Anti-aliasing to Fast Approximate Anti-aliasing (FXAA).



3.  Enable the Fast Mode checkbox below the dropdown.


JohnLemon already looks a lot better!

Now the Post Process Layer is set up properly, you can move on to creating your volume.

1.  In the Hierarchy window, go to Create > Create Empty.


2.  Name the new GameObject “GlobalPost”.  


3.  In the Inspector, set the Layer to PostProcessingVolumes.


4.  Change the Transform component’s Position property to (0, 0, 0). This GameObject is going to be your global Post Process Volume.  The global volume works as a default profile for the cameras it affects.  Other non-global volumes could then override the effects of this one, but your game will not need any additional volumes.


5.  Add a Post Process Volume Component to GlobalPost.


6.  Enable the Is Global checkbox. 

7.  Click the New button to the far right of the Profile property. This will create a new Post-processing Profile. Its Asset will be saved in a new folder called MainScene_Profiles in Assets > Scenes.

8.  Now that a Profile has been set, you will see more settings available in the Post Process Volume Component. 

The Overrides subsection refers to the different effects that can override how the camera normally renders.  By default a profile has no effects, and so there is nothing in the Overrides subsection.

1.  Click the Add effect… button and select Unity > Color Grading.

Color Grading is a way of changing the brightness, contrast and colors of the rendered view.  You can think of it like applying filters in photo editing software or Instagram. To make your game look spookier, you’re going to adjust the colors and brightness levels of the rendered view.

Note: The settings within this component are shortcuts to the Profile Asset; all changes to the Overrides subsection will change the Profile Asset and will not directly affect the Component. 

2.  Select the arrow next to Color Grading to expand its settings.


3.  First, you need to Tonemap the scene. Tonemapping changes the output of the final rendered frame so that it's much easier to control lights and shadows.

Enable the Mode checkbox in the Tonemapping subsection. Using the drop-down menu, change its property from None to ACES. ACES tonemapping is an industry standard way of applying tonemapping.  It helps create a more film-like look for your projects.


4.  You'll notice that the scene looks really dark now.  This is because the ACES default exposure is zero (for more information, see the documentation).  A good way to fix this is to use the Post-exposure feature.  Post-exposure is a way of adjusting the default exposure.

In the Tone subsection, enable the Post-exposure (EV) checkbox. Set the value to 1 to brighten your scene back up.


5.  You can also make your scene a little spookier by changing some colours. Halfway down the Color Grading section, find the color circles called Trackballs.

6.  Enable the Lift, Gamma and Gain checkboxes beneath each Trackball. 

Lift affects the colours of your shadows, Gain changes the brightest highlights, and Gamma covers everything in the middle (or mid-range) of your image’s color.


7.  Drag the circle in the center of the Trackballs to slightly adjust the color in your Game view. Drag the:


Lift and Gamma Trackballs slightly toward the blue

Gain Trackball slightly toward the yellow

This will add depth to the shadows and warmth to the lighting.

8.  Collapse the Color Grading effect.


Your lights are much more effective, but they don't look quite like real lights yet. Add the Bloom effect to give them a nice glow:

1.  Click the Add effect… button and select Unity > Bloom.  Expand the Bloom effect section.

2.  Select the All shortcut just below the section title — this will enable all the settings for Bloom. Currently nothing is actually glowing, as the Intensity isn't high enough.

3.  Set the Intensity property to 2.5, to create a nice bright glow on the lights.

4.  You might see some other brighter objects that you feel could also look nice with a little glow. You can add them to the Bloom effect using the Threshold property.  Lowering this value adds less bright pixels to the effect.

Set the Threshold to 0.75 to add more glow to the scene.


The lights now feel bright, but it’s important to maintain the spooky atmosphere for this haunted house. A good way of darkening some of those corners and cracks is to use the Ambient Occlusion effect. Ambient Occlusion mimics the real-life effect of light not reaching tighter corners by darkening those areas.

To add this effect:


1.  Click the Add effect… button and select Unity > Ambient Occlusion.  Expand the Ambient Occlusion effect section.

2.  Click the Ambient Occlusion’s All shortcut to activate all the features that you need.


3.  Like Bloom, you will need to set the Intensity before we can see it work. Set the Intensity property to 0.5, and you'll create a nice spooky shadow in the corners of the rooms.


4.  You can spread this effect even further across the room by using the Thickness Modifier. Set the Thickness Modifier property to 3.5.

Now you should be able to see a big shadowy effect spreading behind some of the other props in the scene.


5.  Collapse the Ambient Occlusion effect. 

Several effects simulate how a real camera would view the scene.  The last few effects will change how such a camera’s lens would work. First, you’ll add the Vignette effect to darken the edges of the camera lens itself. This helps to focus in on the player and makes the game feel more claustrophobic.

To add this effect:

1.  Click the Add effect… button and select Unity > Vignette.  Expand the Vignette effect section.

2.  Click the Vignette’s All shortcut to activate all the features that you need.

3.  Like Bloom and Ambient Occlusion, the Vignette effect needs an Intensity.  This will determine how far across the screen the effect spreads. Set the Intensity property to 0.5.

4.  You can make feel even more claustrophobic and spooky by increasing the Smoothing.  The Smoothness property determines the distance over which the effect fades towards the centre of the screen. Set the Smoothness property to 0.3.

The final effect you need to add is Lens Distortion. This warps the final rendered frame and will help to make it feel like you're watching the game through a spy camera.

To add this effect:

1.  Click the Add effect… button and select Unity > Lens Distortion.  Expand the Lens Distortion effect section.


2.  Click the Lens Distortion’s All shortcut to activate all the features that you need.


3.  As with the other effects, Intensity controls the strength of the effect.  Have a go sliding the Intensity back and forth to get an idea of the effect. Then set the Intensity property to 35.


4.  When you use this effect, it can sometimes create visual glitches at the edges of the screen where the image has been warped. To fix this, you can simply zoom into the rendered frame a little to remove the glitches from view.

Set the Scale property to 1.1 to fix this.

In this tutorial, you dealt with a lot of the visuals for your game — not only how the camera moves but also changing the visuals so that your game looks really professional. Look at the visual difference it has made:

In the next tutorial, you’ll explore your game’s UI (user interface) and create an ending for the game.

The Camera

1. Explore the Camera Component

2. How does Cinemachine work?

3. Set up a Virtual Camera using Cinemachine

4. Change the Cinemachine Virtual Camera Component Settings

5. Add Post-Processing Effects

6. Create a Post-Processing Layer

7. Improve Image Quality with Anti-aliasing

8. Create a Post-Processing Volume

9. Add the Color Grading Effect

10. Add the Bloom Effect

11. Add the Ambient Occlusion Effect

12. Add the Vignette Effect

13. Add the Lens Distortion Effect

14. Summary

Complete this tutorial