Main Menu

Introduction

The main menu can range from an animated 2D-3D sequence or a simple still image/low animation 2D-3D scene. The main menu is supposed to be easy and bold to navigate and engage the audience into wanting to play the game. It can be accompanied by music, colours, and sound effects. The purpose of the main menu is to give a video game a formal introduction and a sense of beginning, instead of just throwing the player in where they last left off. Some main menus can vary between complex and minimalistic. Here are some examples:

I think this menu is pretty minimalistic but uses a 3D scene as a background. This menu is accompanied by slight animations and music for ambience.

This in-game menu from Red Dead Redemption 2 is pretty simple, the text font suits the style of game and the colour scheme is consistent throughout the game.

Many similarities between main menus are that they provide the key information to adjust your gameplay, they are easy to navigate and suitable for the audience. Some differences can be how busy the menu screen is, which dimension it is put in, and other basic elements such as sound, visuals, colour.

Main Menu in Photoshop

Going to file > new > film video, we can navigate to this menu:

We can use the blue guidelines on the new document to help us with the composition of our main menu and the layout. They look like this:

From here, we can duplicate features from a pre-made main menu image on Photoshop that we downloaded. We downloaded the text and transferred the background image and the main text into a new document. I played about with the positioning of the text, due to its colour being white, it is more effect in a darker background.

There are a lot of settings you can add to text like a drop shadow, the direction of the shadow and I could change the colour too. But using the blue guidelines, I placed it in the top right as I think that looked the best, is also doesn’t cover up the image of the planet and therefore reduces clutter.

A setting called ‘inner shadow’ adds a shadow alongside the inside of the text. I actually like the way this looks as it makes the text appear more blended with the background.

Hotkeys:

Ctrl + ; will active/deactive the guidelines

Ctrl + R will active rulers

As you can see, we have added the text “new game”. Now, using ctrl + G we can create groups (aka subgroups) with text that will act as sub text in the main menu.

Using the pen tool, we can create the image that will appear behind the text when we hover over it. If we click and hold shift with the pen tool, it will allow us to create a straight line. Keep using shift + click to outline the shape we need, referring to the example file. To adjust the points after the shape has been made – use A + Ctrl + click.

After outlining our shape, we can colour fill it with the colour we need.

Using the shape tool, we can add and subtract shapes, this is where we can outline an area that we want to add or remove. Using the brush tool, and holding shift we can add the smaller line detail to this tab in the menu. We can also adjust the opacity of this brush line so it doesn’t stand out as much. It is important to keep the lines as straight as possible.

The new game with/without hover has a colour change – this is to signify that the player is actively hovering over the main menu option. This just helps make the main menu easier to navigate.

I copy and pasted this button shape and dragged them down to make room for the other buttons. I then used the font style we needed to install for this workshop, called Exan, and added the other suitable button varieties.

To draw more attention to the ‘New Game’ option, I enlarged the button and text shape and I lowered the opacity of the other buttons and the other texts.

I played around with the background and scaled the image up a little bit so I could get more focus towards the spaceships and planets.

I added a warm tone gradient to the main game text as I wanted the colour of the planets and the light source to affect it and immerse it more into the environment behind the text.

After adjusting the texts and buttons, I was done:

Next we need to put this into Unreal Engine. To do so, I saved all of my layers as a PNG and quick exported them into a new folder.

I struggled to export my exact buttons from Photoshop as I was having trouble with Microsoft Teams and missed a few steps of the process. However, Gareth has added a button export file into the one drive where we can use his buttons in Unreal. I am going to be using these.

In unreal engine, we create a blank new level and title it as ‘Main Menu’.

Once we double click to open this level, it will be a blank black screen;

Next we need to create a widget blueprint in Unreal Engine, and make sure it is at the correct resolution to the work we did in Photoshop.

Next we have to drag in our image.

We create an anchor point on our layer using the top right drop-down menu, the anchor point is positioned in the centre of the image.

We have imported the buttons and the background image, along side the title into Unreal Engine.

Audio in Unreal

Next we’re going to be exploring how to use audio in unreal engine. It is important to know what unreal engine supports, such as 16-bit and 24-bit PCM-formatted .wav. In this part of the workshop, we will be using audio files from one drive as our main menu music and the button sound affects.

This level blueprint shows what progress we have done already. It shows the widget we used and who can use it (player). It also shows when the mouse will appear and be hidden etc.

We want unreal to give us a different sound effect for the buttons when hovering and when pressing.

This is where we put our audio files. Each button has an area named ‘Pressed Sound’ and ‘Hovered Sound’. This is where we can put the audio files we have.

To further enhance the main menu, we can adjust the buttons to increase in size, change the font or the margins so the hovered or pressed text stands out more.

This is what the level looks like after the button audio has been added.

To add audio cues, such as the occasional birds tweeting or traffic sounds, we right click on the audio file we need and select ‘create a cue’

Double click the new audio file that is given to us, which will open the blueprint for it. To change the pitch or volume of audio every time the file is played, we have to add a modulator.

This allows us to select a volume range for the modulator to pick from, so when we active the sound it will play a random pitch in the volume range we have set.

The ‘pitch min’ and ‘pitch max’ is the volume range. When set to 0.8 min and 1.2 max, we can play the file and get different outcomes. If the audio is itself is too loud however, you can also change the minimal volume and the maximum volume, to make the audio file more subtle.

To get the buttons to play the audio, select the button and select pressed cue and hover cue on each button.

To add functionality to a button we can select what each button does by navigating to the right side and finding ‘on release’ on our button layers.

This gives us an event when we release the mouse button itself. Changing the pitch of the audio makes the sound effects less irritating and repetitive for the player.

We need to make it so after a button is pressed, it proceeds with a function. Such as ‘open level’ after being pressed.

To give the main menu background music, we add a new audio component to the main menu hud blueprints. Then navigate to where we can place the sound file and add a ‘Play Audio’ branch to the blueprint, hook it up to play in the main menu.

Each button needs to have its own function and navigation. We can do this in the blueprints.

They are all a bit similar, here is a closer view of adding functionality to the quit button when pressed:

A pretty simple example.

Next we need to load another level, or start a new game. This is why we saved a new level for the main menu straight away so we kept all of the default game modes etc.

For this example, we need to change the game mode to the third person game mode on the example map level. We need to make sure to set the default map to start on the menu level, this may also need to be changed in the project settings – found at the top bar – settings > project settings > maps and modes.

To add functionality to the ‘options’ button we are going to start by copying the buttons over and renaming them to different screen resolutions.

So we only want this box to show up when we click ‘options’ and we want it to disappear when we click back to ‘main menu’.

We can change the visibility of the box by editing its behaviour to ‘Self hit test invisible’. Make sure to check the ‘Is Variable’ check box at the top of this same menu.

To make the box invisible when we have no longer selected ‘options’ we have to change its behaviour again – this time to ‘hidden’.

In the options blueprint menu, we have to edit when to set visibility under the different functionalities of the buttons.

Next, we have to do the opposite to the options box and add functionality to the main menu button, which will allow us to go back.

To do this, we need to use the blueprints once again and add a new tab for the main menu once clicked. We can add a ‘set visibility’ tab and duplicate it to decide when to show and hide the options menu.

We have to change the resolution of the screen using a console log command ‘setres 1920×1080’ etc.

Using the button menu that comes with each button, scroll down to the green ‘Onclicked’ button under the ‘events’ tab. Here we can program the resolution to change. Repeat this process for each resolution button.

It should look something like this. ^^^^

Next, we quickly need to change the location of the options menu and sort out the hover colours of the buttons. Simply click and drag the second button box over on top of the previous main menu buttons. It’s important to align them so it doesn’t look noticeably different after you select the ‘options’ button.

When launching the main menu, the active ‘options’ button should look like this. ^^^

conclusion

In summary, we learnt how to take a main menu idea or concept made in Photoshop and transfer it into Unreal Engine giving each button its own limited functionality. I think this workshop was particularly educational for Unreal Engine and the side of it we had not yet learned.