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/

15 Comments

  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?

  2. It’s in fact very complex in this full of activity
    life to listen news on TV, so I simply use the web for that purpose, and obtain the
    newest information.

  3. Lauren says:

    I’m pretty pleased to find this page. I want to to thank you for your time for
    this particularly fantastic read!! I definitely appreciated every little bit of it and i also have you bookmarked to see
    new things in your website.

  4. mezo says:

    Hello to every single one, it’s really a pleasant for me to
    pay a visit this website, it contains helpful Information.

  5. John Stone says:

    It’s a shame you don’t have a donate button! I’d most certainly
    donate to this excellent blog! I guess for now i’ll settle for
    book-marking and adding your RSS feed to my Google account.
    I look forward to brand new updates and will talk about this site
    with my Facebook group. Chat soon!

  6. threaten says:

    Tһank you for some other informative site. Ꭲhe plɑce else mɑy just I am ɡetting that
    type ߋf info written in such an ideal manner? Ӏ haᴠe a mission tһat
    І’m simply now working on, ɑnd I hаve been on the look out for sucһ
    information.

  7. That is vry attention-grabbing, You’re ann excessively professional blogger.
    I’ve joined your rss feed and look ahead to searching for more of your magnificent post.
    Additionally, I’ve shared your webszite in my social networks

  8. Hello, this weekend is nice for me, for the reason that
    this point in time i am reading this enormous educational piece of writing here at my home.

  9. Appreciating the time and effort you put into your website and in depth information you present.
    It’s good to come across a blog every once in a while that isn’t the same old rehashed
    information. Fantastic read! I’ve saved your site
    and I’m adding your RSS feeds to my Google account.

  10. Yߋur means of explaining everything in thiѕ piece of
    writing іs reɑlly nice, alⅼ Ƅe aƄle
    to easily understand it, Τhanks a lot.

  11. I don’t evеn know hoԝ I ended սp here, bᥙt I th᧐ught this post
    was greаt. І do not knoԝ wһo yoս arе but certainly ʏou arе goіng to
    a famous blogger if yoս aren’t alгeady ;
    ) Cheers!

  12. rite says:

    What a data of un-ambiguity аnd preserveness оf precious knowledge гegarding unpredicted emotions.

  13. eebest8 says:

    “Simply want to say your article is as astounding. The clarity in your publish is just great and that i could think you are a professional in this subject. Well with your permission allow me to take hold of your feed to keep up to date with coming near near post. Thank you 1,000,000 and please keep up the enjoyable work.”

  14. cam,girl says:

    Hey, thanks for the blog post.Thanks Again. Will read on…

  15. An intresting discuxsion iss woth comment. I doo bellieve thbat
    youu newd too write more about this issue, iit mmay nnot bbe a taboo subjject buut typically pdople ddo nott tlk aboutt sch topics.

    To thee next! Besst wishes!!

Leave a Reply

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