Skip to main content

Unreal Engine DevLog #15: Prototype UMG Menu [Free Source Code]

Hi, welcome back for another update. I've been working on a prototype menu system for my game using Unreal Motion Graphics (UMG). My aim was to create a basic menu interface with the following features:

1) Main Menu
2) Options Menu

3) Video Options Menu
4) Loading Screen
5) Game Screen
6) In-Game Menu

As I said, this is a prototype menu system. My main intention was to get an idea of how to put together a menu system using UMG. And to that end, I found this tutorial series very helpful for understanding UMG and it's features:


Youtube: Horus Heretic's UMG tutorials


Once I had a basic menu system, Zoombapup's Menu Flow tutorials helped a lot in creating a standardized workflow:


Youtube: Zoombapup's Menu Flow Tutorials


So moving on to the updates, I'll briefly explain the main features that I've implemented:


Main Menu




Well the main menu includes the following working functionalities at the moment:


1) New Game Button 

2) An options menu
3) Exit to Desktop button

I'm using the loading screen from Epic's Shooter template as the background.


Options Menu




The options menu has the following functionalities:

1) Video Options Button

2) Back to Main Menu Button

Video Options Menu




The video options allow the player to edit the video settings. At the moment it only supports 4 hard coded 16:9 resolutions, but all the other settings work fine. And then there is a 'Back to Options Menu' button as well.

Loading Screen


The loading screen includes a static progress bar and a throbber.

Game Screen


The game screen is the basic screen that you see when you play the game. Nothing fancy here at the moment, but I intend to move my Command UI from the HUD Blueprint into this widget. 


In-Game Menu




The In-Game menu includes the following working functionalities:

1) Resume Game Button
2) Return to Main Menu Button
3) Exit to Desktop Button

Well that sums up all the features in my menu system. For now I'm going to stick with this. Once I'm almost done with the core gameplay code, I'll get back to working on the menu. Here's a video demonstrating the menu system in it's current form:


With that we come to the end of this update. Feel free to check out my YouTube channel at: https://www.youtube.com/user/Stormrage256/videos

And one last thing. I was planning to release some free example project when the blog crossed the 10000 views mark about a month ago. However I got caught up with work back then. So now that I have a menu interface, I thought I might as well release the source code as part of the celebration. Better late than never. So here it is:

https://github.com/Stormrage256/UMGMenuSystem

Popular posts from this blog

Unreal Engine 4 Tutorial: Smooth Zoom using Mouse Wheel for Top Down Template

Well, I had already written a tutorial for implementing Smooth Zoom functionality for Top Down Template. But it was based on keyboard inputs. Since most Top Down PC games use mouse wheel for zoom, I decided to make a tutorial for the same. The core logic here is the same as the one implemented by Ryan Jon for the custom camera in his RTS Community Project. If anyone's interested, they can get the code for the RTS Community Project here:

UE4 RTS Community Project

Anyways, he has replaced the default camera for the characters with a general camera since that's more ideal for developing an RTS game. Since a basic Top Down game with a single playable character does not need a separate custom camera, I decided to implement the same functionality for the default player camera in UE4's Top Down Template. So let's get down to it.

First of all we need to make a custom curve from the content browser. We will be using this curve to define the smooth camera movement while zooming …

Unreal Engine 4 Tutorial #4: Basic HUD Based Command UI for Top Down Turn Based Games

Hi, welcome back for the next tutorial. And in this tutorial, I'll be explaining how to create a basic Command UI for top down turn based games using HUD blueprints. By the time we reach the end of the tutorial, we'll have a Command UI with movement and fire action commands, and a player character that responds to the commands. Here's a screenshot showing the end product: 


Oh, and this tutorial is gonna be quite big, compared to earlier ones. So I advise everyone to go through the screenshots, before reading through. If it's clear, there's no need to read through the whole thing, partly because I've written this with a beginner audience target in mind. Ofcourse, if you have doubts, I hope they will be clarified in the written description. If not, feel free to ask me in the comments.
So let's get started. Again, I'll be starting with the top down template. First of all, we need to create a new HUD blueprint. If you're a beginner, you can find this by f…

Unreal Engine 4 Tutorial #3: Unit Selection Decals for RTS Games

Hi, welcome back for another UE4 Tutorial. This time, I'll be walking you through how to set up unit selection decals for RTS games. So the decals need to be visible, when a particular unit is selected, and set to hidden as soon as the unit is deselected. For this tutorial, I'm gonna start off from the Unreal Top Down Template.

First of all, I'll be changing the default controls a bit. Instead of using left mouse button to move the units, I'll be using right mouse button for character movement. I already have a decal texture, that I created in GIMP. If you don't have one, you could get my decal texture from the link below:
DropBox: Character Selection Decal Texture
So once you have the texture ready, next step is to set up your decal material. For creating a decal material, we need to set the 'Material Domain' in the details panel to 'Deferred Decal'. I'm also setting the blend mode to 'Emissive' in my case. Then we multiply the texture wit…