How to Make a Game Like Monument Valley

Learn to create a simple click-to-move game where you navigate a series of seemingly impossible platforms like in Monument Valley. By Wilmer Lin.

4.7 (20) · 2 Reviews

Download materials
Save for later

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.

demo play of a game like Monument Valley

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 :]

Note: This tutorial assumes that you’re already comfortable working with Unity. No additional scripting is required to complete the exercises. However, you’ll gain the most from the demo project if you’re proficient in C#. If you’d like to brush up on your skills, check out our Beginning Programming With C# video course.

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.

Pipeline settings showing the latest version of Universal RP

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.

Hierarchy with spacers indicated by asterisks

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

Note: Several empty spacer GameObjects break up the Hierarchy:

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.

Add screen with HDPortrait as the Label, 9 for the Width and 16 for the Height

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.

Three beams at right angles to each other along the x, y, and z axes, forming the start of a Penrose triangle

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.

Penrose triangle perspective camera

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.

Penrose triangle orthogonal camera

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”.

LJoint prefab view

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.

LJoint fix

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

Penrose triangle complete

Challenge: Who created the Penrose triangle?
[spoiler title=”Solution”]
Swedish artist Oscar Reutersvärd first discovered the Penrose triangle in 1934. Father and son, Lionel and Roger Penrose, later popularized the design.

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).

camera/screen Z-axis

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).

Bridge and Spinner prefabs

The SpinnerControl contains custom Drag Spinner and Highlighter components.

Spinner 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.

Starting platforms and a spinner

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