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 Tutorial: Create Circular Ring Material without Textures

Hi, welcome back for another tutorial. It's been quite a while since I put up a tutorial as I've been busy working on toolkits for the Marketplace. One of my earlier tutorials [link: Unit Selection Decals for RTS Games] had focused on how to create ring materials using textures, as well as using them to display unit selection decals for RTS games. However, a drawback associated with using textures was that it prevented the user from changing the inner & outer radius of the ring. And during prototyping stages of a product, it's far better to implement structures that can be changed easily from within the engine so that you don't have to create a new asset from an external package every time you need to test out a new idea. I've found this approach quite useful while working on my own products. Hence, this tutorial focuses on creating a ring material that can be adjusted both from within the material editor as well as dynamically at runtime.

Alright before we get …

Unreal Engine Diaries #11: Nav Mesh Configuration

[This episode of Unreal Engine Diaries focuses primarily on nav mesh configuration, nav areas & configuration of agent types.

Source: Unreal Engine 4 AI Support Twitch Broadcast with Mieszko: https://www.youtube.com/watch?v=7LaazCv4rB0]

1. The Recast NavMesh has a couple of attributes named 'CellSize' & 'CellHeight' under the 'Generation' section in it's details panel. Together they determine the resolution of the nav mesh & lowering these values can create more precise nav meshes. It could be especially useful when there are lot of holes in the nav mesh due to the surface properties of the terrain. However, lowering them also makes the nav mesh calculations more expensive.

2. If runtime nav mesh generation is enabled, it would be best to set the 'Tile Size' attribute of Recast NavMesh to the minimum viable amount.
3. The 'Min Region Area' parameter which can also be found under 'Generation' section of Recast NavMesh can be i…