UI | User Interface

User interface-tutorials for the game engine Unreal Engine 4.

Learn how to create main menus, option menus with the ability to adjust resolution, etc.

umg user interface page thumb


Unreal Engine 4 Tutorial – 3D Widget Web Browser In-game

In this Unreal Engine 4 tutorial we’ll look at how to create a web browser you can use within the game world on a screen. This is done by using the experimental functions web browser and 3d widgets. The PC monitor static mesh I use in the video can be downloaded here

Unreal Engine 4 Tutorial | Simple Score / Point System

In this Unreal Engine 4 tutorial we’ll create a basic score system increasing the Player’s score when shooting appearing targets. The tutorial is a continuation of these two:
1) Use Array to Create a Shooting Range
2) Auto-Spawn Targets with Tags and Timer
You’ll find ’em both in the Level Blueprints section.

UE4 Tutorial | Main Menu + Options to Adjust Resolution

In this tutorial we’ll create a main menu (title menu) with start and quit game, plus an options menu where you can adjust the screen resolution. Sound effects when clicking the buttons and background menu-music will also be added.

The different sections of the tutorial:
1) Introduction + the menu-texture-package: 00:00
2) Setting up the visual part of the menu: 03:20
3) Setting up the Blueprint scripting: 23:03
4) Adding sound effects and background music: 36:00

Click the links to teleport to the texture and sound-package I’m using here.

UE4 Tutorial | Video / Movie as Menu Background

This is a follow-up tutorial of the main menu tutorial above, and we’ll be looking at how to set a video as the background for the menu. Download the movie file I’m using in the tutorial HERE

UE4 Tutorial | Set Scalability in Level Blueprint or Widget Menu

In this Unreal Engine 4 tutorial we’ll look at how to change different scalability settings either in Level Blueprint on “Event Begin Play”, or by using a UMG widget menu with different buttons.
Remember to use Epic’s Scalability Reference page, click HERE

Unreal Engine 4 Tutorial | Easy In-game Pause Menu

In this Unreal Engine 4 tutorial we’ll look at how to create a simple pause menu. The button textures and sound effects used in the tutorial can be downloaded HERE

Unreal Engine 4 Tutorial | Easy Level Completed Screen

In this Unreal Engine 4 tutorial we’ll look at how to create a simple Level Completed-screen with the use of a UMG widget and a Blueprint Class. This will let the Player either replay the current level, or wait until the next level starts. At last, just for fun, we’ll add an animated UMG object that serves as a kind of countdown timer before the next level starts.

The two menu tutorials below are earlier versions, and thus not as “advanced” as the two above. However, they do go about creating the menus in somewhat different ways, which might be of interest to some of you.

Unreal Engine 4 UMG Tutorial – Main Menu with Start / Load Level + Quit Game

Learn how to create a main menu with three buttons: Start Level 1, Load Level 2, and Quit Game. The buttons will change color and make a sound when the mouse pointer hovers over them, and when being clicked. The main menu will also have a game logo / banner on top.

UE4 Tutorial – Disable Player Character and Set Input to UI ONLY

Here I show you how to disable the Player Character while viewing the UI, Main Menu, and then enabling the Player again once the level is loaded.

If you would like to be notified whenever I add new tutorials etc. to the site, then simply sign up for the newsletter:

One Reply to “UI | User Interface”

  1. Thanks for your excellent tutorials! I have met a problem about UI. Could you please help?
    In the level, I use LineTrace to select objects. Because this is a APP to change material of the wall and floor, nearly every mesh in the level can be selected and changed. Then there is a widget with buttons for materials to show up, if any/floor wall is selected.
    My problem is: if the button in this widget is clicked, the wall behind the widget is also selected. And I don’t want to use SetInputModeUIOnly, because I still want to select the wall which is not behind the widget.
    In other words: I want to enable the selection of the wall which is not behind the widget, and disable the selection of the wall which is behind the widget. How can I do that? Is there anyway to let the widget “block” the Line Trace?
    Thank you!

Leave a Reply

Your email address will not be published.


thirteen + 6 =