Aaron ButlerCreative Design
Product · UX DesignInsomniac Games

Ratchet & Clank — Camera Tutorial

A UX case study deconstructing the camera design from Ratchet & Clank — created as a presentation example shortly after pivoting from game design to Product/UX.

RoleUX Case Study
Year2014
Skills
UI/UX
01
Overview

The first minutes of Ratchet & Clank (PS4)

A look at how I designed the camera tutorial for the Ratchet & Clank PS4 remake: making players aware of the camera controls and letting them invert before the adventure starts, woven into the opening so it never reads as a forced tutorial.
02
Challenge

Teaching the camera without breaking the story

The camera tutorial ensures the player is 1) made aware of the camera controls and 2) allowed to change them (invert, etc) if they wish before they start their adventure. If you've ever played with controls that felt backwards, you know how frustrating that is, and how much a camera tutorial matters.
If a game has a strong narrative, like Ratchet & Clank (R&C), then one should try to weave the camera tutorial into a part of the narrative to make it feel less forced, which ultimately provides for a better player experience. In the case of R&C there was a feature length movie coming out around the same time as the game. The game and the movie share narrative elements, and it's important that players who watch the movie and play the game experience this connection. If someone only plays the game it still works, they just won't get the extra elements.
I knew the player would start the game in the garage, and after watching some early cuts of the movie I knew Ratchet would wreck Mr. Micron's ship at the movie's start. Using Mr. Micron's ship for the camera tutorial therefore felt appropriate as a narrative tie-in.
In general, the problem with camera tutorials, and tutorials in general, is that players simply don't like to be interrupted and told what to do. The camera is an integral part of Ratchet & Clank though, so a tutorial needs to be introduced at the start in the least annoying way possible.

Gamer personas

The player base for Ratchet & Clank is diverse in age, gaming experience, and gender. A tutorial that works for one of these players has to work for all of them.
A sample of the Ratchet & Clank player base. Avatar art by Skydesign / Freepik.
A sample of the Ratchet & Clank player base. Avatar art by Skydesign / Freepik.
03
Process

Designing the tutorial

While brainstorming different ideas for the camera tutorial it became clear we would need a bolt crank to freeze the player in place so they could focus on the tutorial. I did something similar in Ratchet & Clank: Into The Nexus, where the gravity turns off and the player floats upward, unable to move, which keeps their attention on the tutorial.

Bolt crank setup

In the R&C scenario the player gets control of their character after a cutscene in which Grim, the mechanic, tells them to get on a bolt crank. This task serves a couple of purposes. It introduces the player to the move controls, and to the camera controls too if they happen to reach for the right thumbstick.
Since the bolt crank is placed in front of the player they simply need to run over and activate it. The player is also taught that the bolt crank is an important mechanic that makes important things happen. In this case it lowers the ship's wing into place for the camera tutorial. It also let me freeze the player in place, which isn't ideal but necessary here, to keep them focused on the camera tutorial since players have a tendency to wander off.
When the player lowers the ship into place, the camera tutorial begins.
The bolt crank lowers the ship's wing into place and freezes the player, setting up the camera tutorial.

Research

We were happy with the camera tutorial in Ratchet & Clank: Into the Nexus, so I used it as a base for the remake, which took care of the setup. While watching early releases of the motion picture I was inspired by the start of the movie, where Ratchet wrecks a customer's ship, and decided to incorporate that into the game as a narrative element for players who watch the movie and play the game.

Camera tutorial design

I did a quick initial sketch to get a sense of where the lights would be placed on the ship, and the order in which the player would look at them.
Initial sketch: light placement on the ship and the order the player looks at them.
Initial sketch: light placement on the ship and the order the player looks at them.

Motion study

Next I took my sketch into Photoshop and did a quick motion study to test the timing of the blinking and the switching of the lights.
Motion study testing the blink timing and the light-switching order.

Playtests

During the prototyping phase I ran playtests with team members and stakeholders (Leads, Creative Directors, and so on) to get valuable feedback and make adjustments to light placement, light and audio timing, and more.
04
Outcome

What shipped, and one change

The final version behaves much like the sketch, with one change that came out of testing: the lights turn off once they turn green. That takes them out of the player's attention so there's only ever one thing to look at next.
The footage is from a Let's Play by Blitzkriegsler, showing a player going through the camera training.
The shipped camera tutorial during a player's playthrough.