TRANSITIONS IN VIDEO GAMES

What is a Transition?

A transition is simply anything that takes you from one place to another. No matter what you do, you will have some sort of transition. Whether that's a straight-forward cut, a subtle fade, or a fairy traveling across the screen to distract you long enough so you won't notice the transition. Every menu has a transition whether you like it or not. It's our job as game creators to make that transition work.

What makes a good Transition?

Now, someone might think that a cut from one screen to the next is a bad transition. That person is wrong. There's nothing wrong with a cut or a fade out. As long as it's 'good'. But think about it. What makes a good transition? I would say, a transition is considered 'good' if the player understands where they came from and where they are now.

Why are Transitions Important?

I would say that transitions become more important in the polish phase of UI Design. Unless a piece of UI needs a transition for the player to understand what's going on, it's mainly to give the game that extra bit of shine and polish before it launches.

example 1: Hearthstone

Transition from Play Button to Select a Deck screen

Transition from Shop to Shop Screen to Item Info to Item Purchase

Transition from Quests Button to Quests Screen

Hearthstone is well known for feeling like it's a physical thing inside your computer screen. Blizzard has given talks about the UI of Hearthstone (like the one here from GDC). They really wanted to drive home the "immersive UI" feeling by giving everything in the game weight. The transitions between more frequently used screens are meant to give you that sense of immersion. For instance, when you press the Play button or the Open Packs button the Hearthstone board opens up and you zoom inside to do your thing. It doesn't need to do this, the deck selection screen could've just popped up like the quests screen does but Blizzard wanted the game to feel like your opening up a magical box filled with all sorts of cardboard (and metal and wood and lava and cake) adventures.

I would say that Hearthstone is a good example of good transitions. Things flow in and out of the screen you understand exactly where you are now and where you have been. Having the board open and close also gives a good sense of how back buttons are supposed to work. Sure some of their more recent additions to the game don't have as much motion polish as the more established features (I'm talking about you Modes Button). But despite that, Hearthstone still maintains it's idea of immersive UI with solid and weighty transitions from one screen to the next.

example 2: the legend of Zelda: Ocarina of Time

Transition from Outside to Inside to Shop to Purchase to Info

Transition from World to Inventory to Equipment (0.5x speed)

Image Sources from Nintendo Movie on YouTube. Video link here

Ocarina of Time is a classic in my book and I'll take any opportunity I can to talk about it (or play it!). The folks from Nintendo took a unique spin on the start menu. They decided to really drive home the fact that this is their first 3D Zelda game by putting their menu on the inside of a cube! Cycling through the menus will rotate the cube left and right and exiting is done through the controller buttons instead of a button on the menu. Other transitions, like going from outside to inside is just a simple fade or cut. You can still understand what's going on even though it's not a fancy box opening or screen wipe or anything. I bet you didn't even notice that picking up a item and doing the 'I-got-a-new-item' pose zoomed the camera in smoothly but the moment before opening a chest it cuts to the chest turn around.

I think the most important transition in Ocarina of Time is the transition from World to Inventory. Having that tiny moment where the menu box collapses in and spins a little helps you understand where you are now compared to where you were. If this menu did a quick cut I bet most people who played the game would be super confused the first few times they pressed the button and might not even explore the other sides of the menu cube.

example 3: fable 3

Transition from World to Menu

Transition from Menu to Outfits to Outfit Equip​

Transition from Menu to Map to Map Zoom

Image Sources from Loopy Longplays on YouTube. Video link here

I love the hell out of Fable 3 and the Fable franchise as a whole. However, Fable 3 is often regarded as having one of the worst menus in video games due to the constant loading and travel time between 'submenus'. Doing a simple task like swapping your weapon or checking your gold might take as long as 30 seconds! Although one might call travel time and loading a 'transition', let's take a step back and see how they handle taking you from one place to the next.

A lot of Fable's transitions between screens are a cut-to-black and fade-in. This gives you immediate feedback in input while gently placing you where you are now. This does not accomplish the transition goal of easing the player from where they are to where they are going. A better way to transition them from the world to the menu might be to open a portal and have it wave over top the player or something. Inside the menu there's even a portal that you can use to exit the menu! Why not use something like that to give you an idea that you used that portal to enter the menu too. Opening the map is a simple fade too. Although, they did try a little zoom action when looking closer at a town. This could have been another opportunity to pan the camera over the map and zoom in while it's opening. A transition like this might give the map a chance to load too so you don't have textures popping in like they did in the video above.

Overall, I guess the transitions in Fable 3 really didn't do it any favors in the Menu department. I originally chose to study this game because I thought the transitions weren't that bad and I hoped they would have been the shining jewel in Fable 3's menu system. But after writing about it I think I convinced myself that the transitions could've been better and they're just another reason why people don't like Fable 3's menu.

Closing thoughts

Here are some key take-aways from my quick study on Transitions.

• The goal of a transition is for the player to understand where they are and where they ended up.
• Transitions can be simple cuts or fades as long as it accomplishes the above goal.
• Transitions can help convey a mood or feeling in a game.
• Transitions could also be a way to show off new technology.