Overview
I was the Game Director of Legend of the Outlaw Mage, and as Director, I wanted the game to have a strong sense of style. One of the ways the team realized this was through the Main Menu. As the first thing the player sees, we wanted to set the tone with something flashy and cool. I prototyped a Camera UI System specifically for that purpose.
Tech Summary
Genre | Action Role-Playing Game |
Team Size | 19 |
Engine | Unreal Engine 4 |
Platform | PC |
Development Time | 6 Months |
Content
Learning from Persona 5
Persona 5 was a major influence on Outlaw Mage. In particular, we drew inspiration from the UI design.
Persona 5 uses a combination of 2D stills and 3D animations to create a smooth and stylish feel that synchronizes well with the rest of the game.
Achieving the P5 Style in Unreal Engine 4
No one on the team had in-depth experience with UE4 UI. As such, I decided that during the break, I would experiment and prototype the system myself. I first started with dynamic menu transitions. I looked at a few tutorial videos and came across a video called “Unreal Engine – 3D Menu Tutorial”. I followed along and achieved this result:
I was impressed with it, but it was not quite what I was going for, so I made some considerable modifications to arrive at this result:
And this was the result I showed my team to prove to them that we could achieve this effect in Unreal.
Differences from the Tutorial
As mentioned, this code is based off of a tutorial. There are key differences I wanted to point out. The first is that the original system used string IDs to transition from menu to menu. I thought that was too error prone and given that a menu system would be a discrete set, I changed the string IDs to enum IDs.
Certainly, you would have to make a new enum ID for every new menu, but realistically, for a menu system, that number would be manageable. And the main benefit was that the designer only needs to select the relevant ID from a dropdown menu.
The other important piece was that although the transitions are happening in 3D space, all the menus are directly on the viewport and therefore, do not require any collision checking. They’re effectively 2D objects that get hidden during transitions. They get overlayed on top of the camera view as soon as the transition is over. When timed correctly, it creates flashy and dynamic animation effects.
The other piece was just code organization. I wanted to make sure that it was readable, neat, and organized for the rest of the team to use when I handed it off to them. So I did a lot of code cleanup.
How it Works
There are two key pieces to this system:
· BP_MenuNode
· W_MenuBase
The BP_MenuNode is a Blueprint Actor with a camera attached to it. The idea is that whenever a BP_MenuNode transitions to another, it will lerp between the two cameras using a node called: Set View Target with Blend.
This node allows me to blend seamlessly between two camera views. Note how Set View Target with Blend takes a parameter of float Blend Time. This will become important later.
This is a sample of the Event Graph of the BP_MenuNode.
The W_MenuBase is the base widget class for all Unreal UI that are part of the system. It has 3 relevant parts:
· Show
· Hide
· Transition To Linked Menu
Show & Hide are functions that can be overridden by a child class. I can have the child class override both functions and call unique animations to them.
Transition To Linked Menu is an event dispatcher that the BP_MenuNode listens to. Whenever that event is triggered, the BP_MenuNode will begin transitioning to the correct menu based on the ID it is assigned.
The Final Product
The cool part about this system was that it was relatively easy to package and hand off to the programmers to integrate with the main project. So while they modified the code to suit the needs of the game, I could transition over to UI development with the Artists. I coordinated with them to get the correct UI assets and implemented them in the menu with animations. This was the final result in the game:
Comments