31. How to integrate Unreal Engine 5 with OWS – Login/Register example

This post is about integrating with OWS project. It assumes you already configured the OWS starter project that can be found here:

https://www.openworldserver.com/getting-started/ue5.html

Furthermore, you can find extension to this, implementing character creation screen with OWS in this post.

I made a installation video for it here:

We will be now starting to utilize some of its functionality, let’s get started at the start. Register and Login.

First, you will want to find the widget content, because we will be basing our content off what already exists. No need to re-invent the wheel.

If you don’t see this folder, you may need to enable its visibility, by clicking the settings cog and ticking the Show Plugin Content.

Ok with that ready, we will go ahead and start preparing new content for login/register screen.

I will in-fact import existing map for character creation, but will create brand new widgets for login and register.

Creating widgets

So let’s get started by creating a login widget.

To create a widget, right click in content browser -> User Interface -> Widget Blueprint.

Create widgets for, and name them

• LoginWidget
• RegisterWidget
• SelectCharacterWidget

After you do so, let’s get started with LoginWidget first.

I will create the widgets with help of this asset pack. This is not a paid sponsorship or anything, the asset is nice, but feel free to use whatever you like as it only alters design, not functionality.

For the login screen, I will put it like this:

This will essentially support input for username and password with buttons for:

• login
• register
• exit

Let’s now open the OWS login widget

We’ll navigate to the graph view and we’ll extract the contents out of there into our new widget.

The exit button is most trivial so let’s do that.

Back in your widget, click on the button and locate the ‘OnClicked’ event which we’ll create.

After copying the Quit game function to exit button, let’s do the Register button.

We will not implement the register button in same way. We can create a function in the widget called ‘GoToRegister’ with the following blueprints.

This assumes you created an empty widget called ‘RegisterWidget’.

Simply call this function when you press the Register button.

Your blueprints should now contain:

Let’s now look into Login functionality, it has the following:

I know its a little busy in the image, I will break it down shortly – but basically we don’t need all of it;

First, you will want to reparent your widget class, you can do it by clicking File -> Reparent Blueprint.

This is because the OWS Widget has parent of OWSLogin Widget

So select that as the parent for your widget too.

Now let’s create a function for navigating to the Character Selection screen/widget.

This is very similar to ‘Go To Register’ function, but different widget (in fact it could be easily refactored, feel free to give that a go! where you can pass in the widget class)

Bonus Error Message Widget

For a bonus, we can create a error message widget, but you can Print String instead if you like for now.

I created a simple widget which contains a Error Content text box, which is a variable.

The graph code will be as follows:

Basically when this widget is created, we get reference to parent widget which we will disable when this pops up.

We put the message content on display and when user presses ok, we enable parent again and remove this widget from view.

Preparing Game Mode for Login

Before you will be able to execute your login correctly, you will need to prepare the game mode, player controller and things like that for it.

So let’s look into those quickly.

Create yourself a GameMode, HUD, Player Controller blueprints.

In the Game Mode, reference the HUD and Player Controller like this:

Then, inside your map, reference the GameMode override to make sure you’re using it.

HUD Blueprints

HUD stands for Heads up Display. It’s quite simple and just refers to what widgets should be shown.

At the start, we just need the login widget to be displayed. Remember this HUD is referenced in Character Creation Game Mode – so it will only be shown there.

Player Controller Blueprints

We don’t need to add any blueprints per se, but we do need to update class defaults.

You will want to enable the mouse cursor (disabled by default) and you may want to block input (to prevent camera from moving).

Furthermore, you will need to Reparent your class to OWSLogin Player Controller – click File -> Reparent Blueprint.

Complete Login flow

Ok now we have all the pre-requisites for handling Login!

Let’s see what’s happening.

We click the Login button, which takes the two inputs, username and PW and calls Login and Create Session.

This is an async function, and it will produce either success (Event Notify Login and Create Session) or error (Event Error Login and Create Session).

On Error flow, we create our error widget and add it to viewport. If you want, just print string it to screen.

On Success flow, we take our Player controller (which is now a child of OWSLoginPlayerController) and set its User Session GUID parameter. This will be required for character select/create screens.

Then we execute our Go To Character Select function, which we’ve implemented earlier.

That’s it for login!

Register widget

Ok so part of Login, we had a button for Register. So let’s look at its implementation.

This is the design I’ve put together for register. Let’s now look into the blueprints.

We’ll begin with the Back button and the close (cross on top right) buttons.

Go Back To Login is a function with following blueprints

Simply create the login widget, add it to viewport and remove this one.

For the next part, we will also need to make sure to reparent the register widget to OWSLoginWidget

As we will be using some of their functionality.

Ok so when we click register, we just call the Register function, available when the parent is OWSLoginWidget.

If its successful – we simply go back to login – you may want to add some extra message like “Welcome <Username>!” or something.

If its unsuccessful, we create the error message widget, displaying the error.

And that’s it for this post!

We now have a Login and Register widget/screens working!

In the next post we’ll look into character creation/selection.