How to Make a Game Like Monument Valley

In this tutorial, you’ll learn how to create a simple click-to-move game like Monument Valley, an exploration game where you navigate a series of seemingly impossible platforms. Like an M.C. Escher-inspired maze, optical illusions form each level. Decipher its physics-defying architecture and create something like it yourself. Level up with the following achievements along the way:

• Penrose Triangle creation in Unity.
• Scene Camera settings to work in an isometric view with Penrose Triangles.
• How to piece together a level architecture using Penrose Triangles and other parts.

By following through this tutorial, you’ll learn how the famous Monument Valley game mechanics and camera views work. On top of that, you will have added a few really cool techniques to your Unity toolbelt :]

Getting Started

Click the Download Materials button at the top or bottom to download the project files. Unzip and open MonumentValleyStart using Unity 2020.1 or later.

The RW folder contains everything you need to get started:

• Animation
• Fonts
• Materials
• Models
• Prefabs
• Scenes
• Scripts
• Settings
• Shaders
• Sprites

There are also additional subfolders for extra project organization, such as for Level and Interface items within Prefabs. Both the Project window and the Hierarchy have a search feature, in case anything’s hard to find.

This project uses the Universal Render Pipeline. In Package Manager, confirm you have the latest Universal RP package installed.

Select Edit ▸ Project Settings ▸ Graphics. Make sure that UniversalRP-HighQuality is the current Pipeline Asset.

Load TutorialLevel from Scenes. This includes a Main Camera, a Backdrop for the environment and several lights. PostProcessing contains a Volume with basic image effects.

As you add objects to the Hierarchy, position them between these spacers to stay organized.

Rather than coding from scratch, you’ll construct your app from prefabs. Experienced users can customize and extend the provided scripts.

Setting up the Game View

In keeping with the original game’s mobile platform origins, you’ll set the Game view’s aspect ratio to 9:16.

To do this, ensure you are in the Game window view. Click the + icon in the Free Aspect drop down. Select Aspect Ratio for the Type and label it HDPortrait. Enter 9 and 16 for the Width and Height. Finally, click OK.

Select your newly-created HDPortrait for the Game view aspect ratio.

Now that you have that out of the way, it’s time to start constructing your impossible platforms.

Discovering Penrose Triangles

The impossible shape that you’ll build for your platform is based on a Penrose Triangle, a triangular object that relies on perspective and can’t exist in real space. You’ll use a similar idea to make a platform that your player will try to navigate — but that won’t be as easy as it seems.

The scene currently shows a simple set of cubes grouped under PenroseTriangle.

The Main Camera has the following Transform values:

• Position: (X:22, Y:24, Z:-18)
• Rotation: (X:35.264, Y:-45, Z:0)

You can adjust the translation as needed, but be sure to use the exact values for the rotations! Monument Valley’s perspective puzzles only work with specific camera angles.

Spin the PenroseTriangle group on the Y-axis. When you reach 0 or 360 degrees, the blocks almost appear to connect with each other in the form of a triangle.

Next, you’re going to enhance the illusion so that the beams form a triangle.

Adjusting Camera and Lighting

An isometric camera makes the illusion look better.

Change the Projection of the Main Camera to Orthographic.

Removing any unnecessary lighting cues improves the illusion. In the Light components of KeyLight and FillLight, set the Shadow Type to No Shadows.

You have one more step to take to complete your optical illusion.

Fixing Seams

The Vertical beam appears to connect with the HorizontalX blocks. However, a small amount of shading near the top reveals an imperfection. You’ll use some helper geometry to correct this.

Drag the LJoint prefab into the Hierarchy. This is simply two polygons representing a “half cube”.

Position the LJoint at (X:8, Y:9, Z:1), next to the vertical blocks. Rotate it to (X:90, Y:-90, Z:0). With this view, you can no longer see the gap, giving you the illusion of a smooth but twisty triangle.

Voila! You’ve created a Penrose triangle, a classic impossible object that forms the basis for Monument Valley’s optical illusions.

Your next goal is to enable movement along these beams so that a character seems to move in an impossible fashion.

Shifting Screen Z

Orthogonal cameras don’t show perspective. Moving any object along the camera’s local Z-axis does not affect the object’s screen space position.

Confirm this for yourself by translating the LJoint to (X:10.5, Y:11.5, Z:-1.5).

Through the Game view, nothing appears to have happened. However, the mesh has clearly shifted positions in the Scene view.

You’ll use this phenomenon to make movement challenging for your player.

Adding Level Geometry

Your goal is to connect smaller platforms to imitate the Penrose triangle effect. Eventually, you’ll guide a character to reach a goal platform at the top.

Now that you’ve seen how the Penrose triangle works, you don’t need your model of it anymore. So select the LJoint and the PenroseTriangle, then right-click and select Delete to remove them from the Hierarchy.

Next, you’ll build a course for your character to follow.

Building Platforms

You’ll start with two more prefabs. Drag the Bridge and SpinnerControl into the Hierarchy. Bridge should have a Position of (X: 6, Y: 7, Z:0) and SpinnerControl should have a position of (X: 7.85, Y: 7, Z:0).

The SpinnerControl contains custom Drag Spinner and Highlighter components.

You want to use the Drag Spinner to change the position of the bridge, so set its Target To Spin to the Bridge.

Next, set the Highlighter’s Mesh Renderers Size property to 1.

Locate the SpinnerMesh under the Bridge. Assign this to the empty field in Element 0.

Finally, you need a few more platforms for the character to move along. So import the HorizontalPlatform, VerticalPlatform and StairsPlatform prefabs. Set their rotations and translations to zero, if necessary.

For your next step, you’ll give the character a way to move toward its goal.