How to Make a Game Like Monument Valley

Visualizing the Clicks

Right now, users have no indication of exactly where they’re clicking when they move their character. For your next step, you’ll add visual feedback to highlight the mouse clicks.

Drag the Cursor prefab into the Hierarchy. This is a simple quad mesh with a texture. The Cursor script will automatically rotate the GameObject in 3-D space and aim it at the camera.

The Offset Distance pulls the polygon toward the camera to prevent intersecting the level geometry. The default of 5 units should work.

Select the Player. In the PlayerController, drag the Cursor object into the empty Cursor field.

At runtime, an animated icon appears over your mouse clicks. Cool!

Building Impossible Paths

The “magic” in Monument Valley happens because the character can walk over impossible surfaces. But currently, your player can only move along the nodes of the HorizontalPlatform. Your next step is to build some impossible paths for the character to follow.

Connect the Bridge with the HorizontalPlatform by creating an Edge between Node10 and Node15.

Select Node10. Set the Size of the Edges to 1. Create an Edge with Node15 as the Neighbor. Select isActive.

Now, select Node15, which is already connected to Node16 with an edge. Add an additional Edge to Node10.

Likewise, connect Node21 from the Bridge to Node22 under the StairsPlatform. Repeat the process with Node22.

Make sure to fill out the Neighbor and isActive fields correctly. Otherwise, the Pathfinder will not connect the Nodes.

Enter Play mode to test your handiwork. Use the SpinnerControl to rotate the Bridge to 90 degrees in X.

Click on the Bridge or StairsPlatform and your player will now walk to your selected collider.

Keep the Scene view open as you click in the Game view and see what happens when you walk back and forth across the HorizontalPlatform and Bridge.

Notice how the character appears to transition seamlessly in the Game view. In the Scene view, however, it shoots across the gap from Box10 to Box15.

This is the benefit of using orthogonal cameras. Any movement along the local Z-axis of the camera is invisible in the Game view!

Linking the Bridge Rotation

The Pathfinder currently works regardless of the bridge’s rotation. To make the puzzle a bit trickier, you’ll change this so the player needs to move the spinner to the proper position to cross the bridge.

In Play mode, keep the bridge in its default orientation and click somewhere on the StairsPlatform. The player character “wall walks” and makes its way past the Bridge. Yikes!

You need to be able to disable certain edges under specific conditions. In this case, if the bridge is at the wrong angle, you need to disconnect edges between the platforms. You’ll use another component to do this.

Select the SpinnerControl and add a Linker component. Set the size of the Rotation Links to 2.

In the first element, set the Linked Transform to Bridge and the Active Euler Angle to (X:90, Y:0, Z:0).

Enter Node10 and Node15 for Node A and Node B (or vice versa).

In the second element, use the same values for the Linked Transform and Active Euler Angle. Set Node A and Node B to Node21 and Node22.

Linker does not update automatically, so add a SnapEvent in the DragSpinner by using the + icon.

Fill in the empty field with the SpinnerControl and select Linker ▸ UpdateRotationLinks in the Action drop-down.

In Play mode, select one of those four nodes with the Game and Scene views active. Rotate the SpinnerControl.

The gizmo line switches to its active color when the X rotation is 90 degrees. Likewise, it deactivates when the X rotation is anything else.

Try to cross from the HorizontalPlatform to the Bridge when the links are inactive. The cursor appears, but the player doesn’t move. So you’ve successfully blocked the player from moving across the bridge when it’s in the wrong position.

Adding Node Events

Right now, the SpinnerControl is still active when the player crosses the bridge. That means that if you spin the bridge while the player is walking over it, you get a weird movement like this:

To fix this, you’ll use a node’s GameEvent to set up custom behavior. You want to disable the SpinnerControl when the player reaches Node15 or Node22. This prevents the bridge from rotating while the player is walking across it.

Select Node15. Click the + icon twice in the GameEvent to create two new actions.

Drag the SpinnerControl into the empty field for both actions.

In the first action, select DragSpinner ▸ EnableSpinner. Make sure you’ve unchecked the checkbox for false.

In the second action, select Highlighter ▸ EnableHighlight. Again, be sure you’ve unchecked the checkbox for false.

Repeat these steps for Node21. When the player walks across the bridge, the SpinnerControl will now be inactive, avoiding any weird animation.

But don’t forget, you want to be able to move the bridge again once the character has finished crossing it. So mirror these steps for Node10 and Node22 to re-enable the SpinnerControl once the character has left the bridge. This time, select true for each checkbox.

Now, when the character walks to the bridge, the SpinnerControl disables itself. Walking off the bridge re-enables the Highlighter and Drag Spinner components.

Completing the Game Manager

With the platforms all connected, the player can now walk to the Goal at the top of the stairs. However, you’re not quite done yet. You still need a manager script to check for the win condition. When you add this, you’ll also provide a basic user interface to start and end the level.

Drag the GameManager prefab into the Hierarchy. Nested under the GameManager is a ScreenFader GameObject. This contains a component of the same name that fades in to provide a better starting transition when the game starts.

Update checks each frame if the player has reached the GoalNode. Test this by walking to the top of the StairsPlatform. GameManager invokes Win to end the level.

Use the Restart button to play again.

Hooray! You’ve now created your own Monument Valley-style game.