9. How to easily connect UE to MMO server with Java – P2

This is PART 2, if you haven’t checked, the previous chapter, we explored creating the C++ classes which will be used to integrate to our web server.

In this post, we will look to use those C++ classes in our Blueprints.

Let’s first quickly discuss what we’ll do to make sure you’re aligned and its what you need.

Here’s a video overlooking the architecture of what we’ve built in part 1 and part 2.

In this post we will use all generic components, so no assets from the store. This means that the result will perhaps look less than desirable. This is actually what I want as this way the user will have full flexibility to change over to another UI style and simply c+p / inherit all the code that’s implemented. Furthermore this code should ideally be very transferrable. i.e. I’ve tested in UE4.26 and UE5.0 and all the steps were the same – this is the advantage with using lower coding languages / platforms, particularly with having our communication code sit with C++.

OK, this post involved quite a few steps so let’s dive straight in.

Creating new level

First of all, lets create a new level which we will use for our login and character selection.

Simply create a new level and select default.

We’re not going to use anything in particular from level design, we will focus entirely on using widgets for this section. But we can keep level design separate, you may tailor it to your character selection screens and do really cool stuff like from this video tutorial – this looks pretty cool and I will look to implement something perhaps similar, or leverage some assets from the marketplace.

Create a folder structure like so:

1. Content
   1. Level
      1. Save your new level here
   2. Blueprints
      1. Widgets

We will be creating a few files now so pay attention! 😀

Creating your first blueprint classes

First of all, create a LoginHud and place it into your Blueprints folder.

In this HUD (Heads Up Display) class, we will start displaying your login widget. So let’s now create this widget.

Go to your Widgets folder, right click and create new widget class like so:

Call this class LoginWidget. Save and compile.

Reference login widget to HUD

Your HUD class is used to display the widgets so let’s make it do so.

Double click your HUD class and go to Event graph

What you want to do is basically once the HUD loads, you create the login widget and add it to the viewport.

We will make the Login widget control the flow from there on, like opening the next widgets etc.

Create player controller

You might think, what player, we don’t have a player?

Exactly, we need to disable all motions – try press play, you will find that mouse is disabled and you can ‘float’ around. We need to remove these inputs, we do it with the player controller.

In your Blueprints folder, create a new blueprint class and search for playercontroller.

Call this class LoginPlayerController.

Double click this controller, disable the movement inputs and enable the mouse interface

There was also another checkbox you need to select – Block input

With that you can move onto the next steps.

Create Game Mode to reference others

Create a new Game mode and we will place it inside the Blueprints folder – call it LoginGameMode

Why do we need it?

• Define a new HUD (heads up display) class – used to display our widgets.
• Define character controller – used to disable movement and enable mouse input

We created our HUD class and Player Controller, but we need to link it to the game mode.

Once created, double click. The main two things you need to do here are:

Simply set the Player controller and HUD classes to the newly created classes.

Create Game Instance class

While we’re here and creating base stuff, let’s create a Game Instance blueprint. We will use it to shuffle around some ‘global’ variables, mainly just the access token for now.

So in your Content folder – create new blueprint, search for GameInstance

I called it GameInstanceSettings as I will only use it to store some settings for now.

Double click this class, on the left panel where you see variables create a access_token String variable. Make sure its toggled to public as its in private by default.

Create the rest of widgets

Ok we’ve got all base classes created, let’s just create the rest of the widgets such that we can reference them as we go along, without interruptions.

Navigate to Content/Login/Blueprints/Widgets

Create the following widgets:

• CharacterComponentWidget
• CharacterSelectionWidget
• CreateCharacterWidget
• LoginWidget (already created)
• RegisterWidget

And reminder, you can do that by right clicking -> user interface -> widget blueprint

Login Widget implementation

First thing – click file and reparent blueprint.

Then search for our C++ implementation, MyUserAccountWidget

We need to do this for all our widgets that will be using any of the API calls that live in that c++ class.

Ok this is what we’re looking to create:

The components that were used to draw this are:

• Text (labels)
• Textbox (user input)
• Text -> wrapped in Button (buttons for login & register)

The interesting one was the Text wrapped in Button – using just button will not give you option to write text.

This is how you get it:

Then simply drag the components as you like, to positions you see fit.

The background here is see-through – so you will be able to customize things 100%.

Give good names to your components, e.g. btn_login and btn_register – obvious what they are right?

Implement events

For first step, let’s reference the textbox inputs to a String variable. This is not essential, but it can be neater.

Click on your username textbox, in the details panel, find On Text Changed and click it.

Now created two variables, username and password. For both, username and password textbox inputs, assign to variable like so:

Now click a button, in the details panel scroll to bottom and find events, click On clicked.

The happy path here calls the login endpoint created in c++. When a response is received, Event Notify Login Sucess is called and we set the access token locally and on the game instance settings class that we’ve created earlier. We put in (optional) artificial delay and remove the widgets, then create the CharacterSelectionWidget and add it to viewport.

Let’s now look at the on clicked method for btn_register

This one simply removes all widgets and adds teh register widget to the viewport.

Register widget

Again, first step is to reparent this class to MyUserAccountWidget – see first step of LoginWidget if unsure how.

This is what we’re implementing in the design:

Similar to the login widget, we’re just utilizing the 3 components, text, textbox and text wrapped with button.

Add on text changed functions to all the textboxes with the following:

Create username email and password variables and assign them based on text changed.

Next, let’s add the on clicked event to the btn_register.

Here we call our C++ method for registering, then on event success we print a debug message and navigate to login screen.

The Go To Login function is a new custom function, so you can create it on the left side panel and implement it with the following:

Finally, on the btn_login clicked, we can simply reference this function too.

Character Selection Widget implementation

Again, first thing to do is reparent blueprint to MyUserAccountWidget – see first step of LoginWidget if unsure how.

Here’s the design that we’re going to put together.

We have a few buttons, create new character, delete and login.

We will have delete and login simply disabled for now – we will look to implement them in near future.

The ‘cool’ component here is the uniform grid called ug_character_list – it’s highlighted in the image.

Why is it cool? We will populate it dynamically based on response from our server about our characters.

When you put in the uniform grid, set the is variable and size to content both to true.

Before we continue with blueprint implementation, let’s create the character component widget – this is the component which will go inside the uniform grid. In our case, it will just contain the name. In future it will contain any small info that we need there, like name, level, etc.

Character Component Widget

This widget is a small component which will display a character name in the list. Furthermore, it will be clickable (in future) such that when you select it, your character will pop up and you will be able to login.

In this one, we’re not looking at implementing the full screen view – so let’s set it to custom in our top right view. I set it to 381×84.

Inside the view, I simply have the text component, wrapped in button.

the text component should be set as variable and the text is set to empty.

Go to the event graph, and just make sure the variable is set to public, as you will modify its content outside this class.

Ok you’re ready to reference it back in CharacterSelectionWidget.

Character Selection Widget continued

Ok let’s click on the Event Graph for the character selection widget.

First let’s configure the constructor items.

Here we call in our Game Instance Settings to load the access token, which we set as a local variable.

We call our Get Account Characters from our C++ implementation, which will be linked to a notify event.

We also disable the login and the delete buttons, since we’re not going to implement them, and no character is selected by default.

Ok let’s now get the notify event for the cget character response:

Ok so let’s go through what we have.

• First we get the characters, we promote it to a local variable.
• We then remove all child items from the uniform grid component, referenced as a variable.
• We then add each character to the uniform grid by looping through the character array.

For each character – we create a character component widget and add that as the child. For the time being, we just set the name.

For create character button, we have this:

I also created a custom event, which will call the get account characters – we will use this soon when we create new characters, we will reload by calling the API again.

Create Character Widget implementation

Again, first thing to do is reparent blueprint to MyUserAccountWidget – see first step of LoginWidget if unsure how.

This is what we’re going to design for create character widget:

This has the usual components, with the addition of border component, just to give some background for the items.

Let’s navigate to the Event Graph view and start implementation. First off, the constructor:

When you click back, we simply remopve the widget from parent.

Create new character implementation

Here we call create new character c++ implementation on btn_create clicked.

On success, we remove itself from the parent view, we then load the Character Selection Widget and call the Reload Character custom event we just created. This will load the newly created character.

Results

Start your Java webserver (see this post if not sure what this means).

Start your UE game in Login level.

If you click register, you get taken here:

Now you can login with the user and you will be greeted with the following screen.

If you click create new character:

I will create several characters, let’s see how they populate:

And there we have it, a simple, connected user authentication and character selection screen.

This was long right? I do wish there were simpler ways!

FYI I am not a strong UE developer, I come from the realm of web development, focusing on Java & Ruby on Rails. So if you have some suggestions or better ways, do let me know as I am trying to learn as I populate these posts.