Main Menu Implementation in Unreal 4
Since I started learning Unreal, I wanted to practice my UE4 UMG skills. I decided to implement a Main Menu in the similar sci-fi vein of my Sci-Fi UI but with a little twist.
I started by finding inspiration in the vast corners of the internet. Since the game is sci-fi themed, I wanted to find a sci-fi game to model it after. I took inspiration from Endless Space, Titanfall, and Halo. I also referenced games such as The Legend of Zelda: Breath of the Wild and Destiny for inspiration for content.
Low Fidelity Wireframes
I took my inspiration and went to my sketch book. I sketched out a couple different ideas I had for layouts and navigation techniques. Some layouts that I tried include:
When I finished sketching out some of the wireframes, I couldn't really decide on a version that I liked. So I went into Adobe XD and did a medium fidelity wireframe of a couple different sketches/layouts.
The Void Logo
High Fidelity Wireframes
Then took my final logo and my greybox wireframes and made a high fidelity wireframe for the Main Menu. Here's what I came up with. Some things to note:
- The planet down at the bottom would be placeholder. From this image you get a clear picture and color scheme but an artist would probably want to make a pass on it just to make it look nicer.
- The font choice here is Proxima Nova. I like the crisp lines and sharp corners to give it a very futuristic look.
- The highlighted selection would turn white and all others are grey
- The blue bar would move with the highlighted selection
I then took to Unreal Engine 4 to implement the Main Menu. It took me about a day to implement and I only did the start menu screen but here's what I came up with.
Other High Fidelity Wireframes
While creating a high-fidelity mock-up of the Main Menu. I also made some of the other screens you would see when playing the main menu. I might return to this project and implement them at some point. But for now, here are the images.