Creation: Simple Cutscene Control UI Design for Video Games

I’ve mocked up two different versions, one for PC games and the other for Console games. Both will behave a little differently so it’s easy and intuitive to control cutscenes. Basically, each year the Video Game Industry commits an unforgivable sin, it creates games with cutscenes that cannot be skipped / paused / rewound / and fast forwarded. Now I know that most cutscenes today are rendered in real time, so rewinding and fast forwarding might get a little complicated, but there should at least be a replay / pause / skip feature then. Some games have tried to add a cutscene control UI but it’s cumbersome and usually requires you to press a button for the UI to pop up, then press left or right a few times to select the right control (pause, skip, etc) then press a button again to select it. This takes too long. So I designed something that flows better.

PC Version

When a cutscene starts and you want to take control of it, simple move the mouse. As soon as you start moving the mouse the UI appears, and you can select from [replay | rewind | pause | skip]. If you stop moving the mouse, the UI disappears after 1 second. Alternatively if you click anywhere the cutscene pauses automatically and the overlay pops up with [pause] selected. Click on pause again or click anywhere to resume the cutscene and hide the UI. There’s 5 different options I made: solid separators, dotted separators, solid outline, glow outline, no outline. The overlay UI can be slightly transparent or solid black.

Console Version

Because consoles don’t have mice, in order to make controlling intuitive I suggest mapping the buttons to the player controls and shortcuts and showing them underneath the player controls on the overlay UI. The player would press the [start] button on their controller which would automatically pause the cutscene, then they could press [X, Y, A, B] to control the cutscene or press [start] again to resume the video and hide the UI.

There’s also another option. In a previous post I wrote “Redesigning The Way We Teach The Controls To A Player” where I suggested instead of using images of just buttons, developers should show an image of the button’s locations so players can more easily know what to press instead of looking down at their controller and trying to find the right button.

In this case I don’t think it works out very well so we’ll stick to the normal button images. Also, in case you were wondering how fast forwarding and rewinding would work, there would be two ways to get it done. The player can press the corresponding button once to FF and the cutscene would speed up, then player could then press the same button again to make it stop, OR the player could hold down the corresponding button and let go when the cutscene has FF to where they want.

There you have it. An nice elegant solution to something a lot of gamers have been requesting.
* The games used for the screenshots are Mass Effect 2 and Dead Rising 2
* The rounded font and rounded pause/FF/RW buttons I used look friendly and warm. For a serious type game like you should probably use a hard font without rounded edges as well as controller symbols that have sharp edges. It’d have a more profession, slick feel to it.
* pause, rewind, fast forward icons are modified versions of the “Wireframe Mono Icons” from Gentleface.com

http://www.chrisnorstrom.com/2010/11/redesigning-the-way-we-teach-the-controls-to-a-player/

1 Comment

  1. Erikfh says:

    I have been looking for something like this for years!!! Was the tool able to sucessfully pause a Mass Effect 2 cutscene?

Leave a Reply

Your email address will not be published. Required fields are marked *