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.
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.
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
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"
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
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
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.