Megaman X - The main menu

04-07-2021 11:51


What we want to achieve

We want to have a simple screen that will be our main menu. Arrow keys will be used to select the option and enter to select it. Right now we just want something that works quickly to be able to prototype our game fast.

Let's get started

If you did not download the early access version of Unreal Engine 5 yet, you can do it easily trough the epic games launcher.

We will be using 5.0.0_EA but most of the code will work for UE4 as well

Clicking the yellow "launch" button will start the Unreal Engine launcher. This can take a while if it is your first start,.
You can create a new blank project, we will start from scratch.

Creating an empty blueprint project

The first time you launch a project, you will get plugins notifications but you can safely ignore them. It only activates the Megascan Bridge plugin (but we won't be using it for this project).

You should see the default editor view with the default 3d empty level(which we won't use). It's time to create and save a level.

Quick Basics

If you are not a beginner, you can skip this section and just create a new level.

BP : short for blueprint, the scripting language of Unreal. We will use BP as a way to code our game.
Ctrl + Space : the shortcut you will need to open the Content Browser where every file in our game lives.
Levels : Levels are a special class that holds all the data, you can travel from one level to the other using BP.
Classes : Everything in Unreal is a class, from the levels to simple light sources. There are premade classes for almost everything you need.

Open the Content Browser and create a new Level. I'll name it "MainMenu" and save it in the content folder.

New levels contain nothing, so don't worry if you see an empty black screen in your previews

The User Interface

Because the original sprites were meant to run on a 256x224 resolution, I will have to set a custom DPI scaling to tell Unreal how to scale the UI for any screen.

open the project settings

the values are 224:1 and 768:3

Select points and enter values to modify the curve

If you want something rendered on the screen as an UI, the class you need will be a Widget Blueprint.

Creating a widget blueprint - MainMenuWidget

File - MainMenuWidget

the background is a simple black square. I use an image block that I will change to black and size to fit the whole screen.

File - MainMenuWidget -> add an image block named "Background"

File - MainMenuWidget - Background -> change color

File - MainMenuWidget - Background -> change anchor

File - MainMenuWidget - Background -> set offsets to 0

MainMenuWidget -> Create an image block named "Logo"

File - MainMenuWidget - Logo -> set the image source and position

File - MainMenuWidget -> add a vertical box named "Menu"

File - MainMenuWidget - Menu-> set anchor and position

File - MainMenuWidget - Menu -> add 3 images for the menu options

File - MainMenuWidget -> add an image named "Megamanx_Idle"

Adding the UI to the screen

Right now the widget preview is looking decent, but it's only a preview. I will add the widget inside the Level Blueprint.

Level - MainMenu -> Open the level blueprint

Level Blueprint - MainMenu -> add the MainMenuWidget to screen

Now if i click the play button, I should see my widget displayed in-game

Keyboard inputs

There is no mouse inputs in MegamanX, so i want to be able to do everything by keyboard. I need 2 keys for now:

- Escape: pressing it just quits the game
- Enter: pressing it selects the "Game Start" option and loads the first level

Go to the project settings to configure user inputs:

Project Settings - Input -> add 2 actions mappings and link them to the Esc and Enter keys

Level Blueprint -> add the newly created events

Level Blueprint -> Escape_Key Event (release) -> add the "Quit Game" node

Level Blueprint -> Enter_Key Event (release) -> open the level named "Level_Intro"

Content Browser -> create a new empty level named "Level_Intro"

A quick test to check that the Esc key quits the game and Enter key loads the new empty level

What's next?

The menu is missing a few animations, but right now it is a good enough starting point for a prototype and we will be moving on to the next chapter. I will be coming back to this section later to polish it a little.

link Arrow keys selection
coming soon
link Text changes color when selected
coming soon
link Megaman shoots when selecting
coming soon

Come talk to us on Discord.

Ask questions, request new tutorials or just say hi.

Unreal Master on discord

Want to learn UE5?

Become a member of our community!

Join Us