23. How to create custom character creation screen with Unreal Engine part 4

This post is part 4 of mmo character creation series.

• Overview for character creation
• Dealing with complex nested options
• Applying the options to skeletal mesh (using n-hance assets)
• Connect character creation to custom server (this post)
• Populate character selection screen from server

In this post, we’re going to start connecting the Unreal Engine character creation to our custom server. I.e. when I click the button to create a character, we will send a request to the server to create the character and await a response back.

Preparing the request

To get started, we first have to test the endpoint and get familiar with the data structure that we want to send.

In order to create a character, we need the following pieces of information

1. Account name (via header)
2. Character name
3. Class name
4. Base appearance information

All information is trivial except for the base appearance information. We created a structure in unreal to hold this information, its called CharacterAppearance – here it is:

Note that you can have it equal whatever you need.

The server implementation for character appearance is:

@JsonProperty("appearanceInfo")
@BsonProperty("appearanceInfo") Map<String, String> appearanceInfo,

Which means at the moment we accept any generic data to be present in there, without additional validation. This allows us to be very flexible at this stage, we can do validation client side (in Unreal Engine).

Ok let’s get this implemented in Postman:

To make this easier to copy and paste, the body of the request is:

{
    "name":"characterName2221",
    "appearanceInfo": {
        "race":"human",
        "gender": "m",
        "hairStyle": "h_m_style_1",
        "hairColor": "color1",
        "skinColor": "h_m_style_1",
        "facialFeature": "feature_1"
    },
    "className": "fighter"
}

I’ve also added some validation to the request, such that if you try create the character twice, you will get error message for a response, which we will provide back to the user.

Ok if your basic request is working, we can proceed to making the UI implementation with Unreal Engine.

Unreal Engine implementation

Here the work will split into few small parts:

1. Create basic character selection screen/widget to toggle back to
2. Create a widget to give user any error messages
3. Prepare the HTTP request in UE blueprints
4. Link the HTTP request with the create button

Create basic character selection widget

I will keep this bare bones for now as will fill it with content a bit later.

The widget will appear very similar to that of Create character widget

Notably, you will have an option to Create character and Login. There is no option to close this menu.

The only blueprint this widget has is to navigate to create character blueprint:

This simply creates the create character widget and adds it to viewport. It also removes self from parent (viewport).

I also made threeminor adjustments to the Create character widget. First, I added a destructor to remove the character skeletal mesh from viewport when the widget is removed. Furthermore, I added functionality on the close button click. Finally, I also added a call to populate appearance struct on constructor, incase user wished to create default character.

The destructor is very simple:

And the close functionality is specifically to this button:

Click on Clicked event for the button to add in the following:

The reason why its refactored as we’ll also reuse this functionality when we create a character – we will navigate back to character selection screen.

Finally, just add a call to Update character appearance struct at the end of the constructor, such that the structure is always ready and populated.

This is sufficient for now – we’re able to toggle between character selection and character creation widget.

Error message widget

This widget will just be a simple pop up message when there’s a error from the API.

The main thing to include here is the ErrorContent textbox which should be ticked as a variable.

Next, we want to add two variables, one for the error message as a string and another the parent component which will spawn this error message.

The parent component will be passed so that we can disable/enable the parent widget while the error message is displayed.

The error message variable is used to populate the message content.

This is now ready for us to use in our screens when we receive an error.

Prepare the HTTP request in UE blueprints

I started writing the API request inside the create character widget. To keep the content separated, I created a new graph for this work.

Here are the blueprints, key note is that you need VaRest (free plugin) to be installed to use this:

Its split into 6 key pieces.

1. Set header, this is quite key and contains the account name that the character will belong to. For now, it’s set statically as we don’t have ‘login’ page.
2. Getting the selected class from the options, as its not part of character appearance struct
3. Getting the selected character name, directly from the Textbox input
4. Create character request to JSON – will go over this in more detail below. This is preparing the ‘body’ for the http request.
5. Apply URL essentially sends the API call to the server. Make sure the URL is set correctly here.
6. Validate response – I will create a basic validation for the response, if an error was present I will make error box popup, otherwise will navigate to select character screen.

From above, steps 4 and 6 are not trivial so will explain them in more detail.

Create character request to JSON

At the very start of the post, I shared a screenshot of the Character appearance struct that we used for testing with Postman. This will be one of the key requirements for character creation call.

If you haven’t already got one, create a blueprint class to store some REST helpers

My helper is called StructToVaRest. Inside this blueprint, create a new function Create Character Request To Json. It will do as it says, take in some parameters and generate the JSON object which VaRest can work with.

To confirm, the json that we’re trying to achieve is in the following format:

{
    "name":"characterName",
    "appearanceInfo": {
        "race":"human",
        "gender": "m",
        "hairStyle": "h_m_style_1",
        "hairColor": "color1",
        "skinColor": "h_m_style_1",
        "facialFeature": "feature_1"
    },
    "className": "fighter"
}

Ok so first thing is the function fingerprint:

We’re taking in:

• character appearance
• character name
• character class

And we’re responding with VaRestJson.

Next, for each parameter that you have in character appearance, you want to set that as a string object in json:

This means that for each, race, gender, hair style, color, facial feature you want to set those up in json.

Then you want to create another JSON object – because the appearance info is nested – and set the appearance info as the nested object.

What does this mean? From the postman request we can see appearanceInfo has data in the curly brackets {}.

Anything in curly brackets is effectively nested data. Otherwise it should just be plain string/number fields. And the above method is how we can create and configure those nested objects.

Next, just populate the name and class string fields and the json is ready.

Validate response

This is validating the server response. I.e. was the character creation event successful? There can be validation errors for whatever reason, e.g. name is already taken. When this occurs, we want to display this error message.

The validation will be based on configuration of your server, so I am only applying very light validation. i.e. on a succesful response, I respond with created character object. When it fails, the response will contain message with reason why.

So, this means I can naively check if I have a message object and if so, assume there’s an error (you can also check if status code >201 to make it more robust).

The blueprints to achieve this is as follows:

Note here that when an error is detected (message field is present) I also create a error message widget and disable the current widget. Remember that I enable the parent widget when I close the error message. This is also why ‘self’ is passed to ‘parent’ field of the error widget.

If it was successful, we simply ‘handle close’. Remember that this will take us to the character selection screen. In near future I will make a constructor there to fetch all account characters, which can be called to refresh the character list.

That’s it!

Seeing it in practice

I will emulate a fake new account by adding new account name to header value in character create call:

Make sure the server is started, and verify there are no characters on the account.

Now let’s open up our character creation screen in the game.

Let’s hit create, it should take us back to character selection screen – this is good, it means it was successful.

It’s empty because we haven’t put any code to collect the characters from server yet – maybe one for next post!

Let’s go back and try creating character with same name.

We can see it disables the widget behind and gives us an error message that we have to press OK to proceed.

This is exactly what we need for this first iteration.

Finally, let’s just verify with postman that we have this character created in our server:

That’s it! That’s what we will use to link up our character selection screen.

As usual best of luck with your projects!

In next post I will likely look to finish integration for character selection screen.