Unreal MMO Development with Yaz

24. How to create custom character creation screen with Unreal Engine part 5

This post is part 5 of mmo character creation series.

In the last post we’ve looked at creating characters via API.

Call to create character endpoint with postman

In this chapter we want to start getting the account characters populated for the user.

Getting account characters

Therefore, in this post, we want to be embedding this API call into our UE project and parsing the details to render our characters.

It’s important that the payload is matched between create character and select character screen. i.e., we’re going to be reusing a lot of blueprints which are evaluating the actors meshes/materials. It will be clearer when we start the implementation.

Make the character selection screen first

If you’re following from previous chapters, you may want the character selection screen to be the first one you see when you open the game now.

This is quite trivial to do, open up your HUD (Heads up display) blueprint, mine is called CharacterCreateHUD and simply change the widget that’s first displayed from character creation to select character widget.

Change from create character to select character widget

Select character widget blueprints

The majority of work in this post will be for the Select character widget. In the previous post we’ve just created a skeleton widget for it. I will cover those steps again as they’re small.

First, create a widget called Select Character Widget, of User Widget class.

Create Select Character Widget

You can do this by right click -> user interface -> widget blueprint.

Creating widget blueprint

Design it as you like, this is my design:

Design for select character widget

For reference, I used these assets by HONETi – 2D Assets for the designs.

I also covered blueprints for the Create character button.

Create character button blueprints

This simply opens up the widget for create character, and closes this one off.

Ok now we’ve caught up – let’s look at the new additions.

Spawning actor to represent your character

Very similar to create character screen, we want to spawn the actor to represent our selected character.

Therefore, we may as well copy that function over to this blueprint! It was called Spawn male character in the create character widget. Here’s what we’re creating anyway, its fairly small:

Spawn actor for character selection

I added the Enable Input and Set Actor as Hidden in game too.

Ok let’s look at the constructor and destructor now for this widget.

Constructor/Destructor for select character widget

Ok so on the constructor we want to spawn the character mesh actor that will represent our character then we want to fetch characters. If we have no characters to display, no problem because we can keep the actor hidden.

On the destructor, simply destroy the actor.

Getting characters from server

For fetching the characters, I created new graph, ApiComms graph. Here I added a new custom event to FetchCharacters.

Fetch Character with API

This is using VaRest to GET account characters from the server, here’s the Postman request example.

Get My Characters Postman example

We can see the request is fairly simple, making sure we set the request as GET request, content type does not matter as we’re not setting a body for the request. Then we populate the header with the account name, which at the moment is static.

After we apply the URL, we want to be collecting the data to be ready for processing.

Collect the data into array of account characters struct

Ok so from above blueprint, we need to understand the following:

Account characters struct

This struct should reflect whatever output is from the server, that you care about.

i.e. example of my response from server is:

{
    "accountCharacters": [
        {
            "name": "someTest1",
            "accountName": "testAcc1",
            "appearanceInfo": {
                "hairStyle": "h_m_style_1",
                "race": "human",
                "gender": "m",
                "skinColor": "h_m_style_1",
                "facialFeature": "feature_1",
                "hairColor": "color1"
            },
            "updatedAt": "2022-10-03T15:33:00.214Z",
            "isOnline": false
        }
    ]
}

Ok so from the above, I want to capture all the details under accountCharacters.

I can see [ which means it will be array, so I know I will have an array of Account characters struct.

Inside the array is an object containing:

I don’t care about updatedAt or isOnline at this stage, so will ignore them.

name and accountName are pure strings.

appearanceInfo has the same structure as AppearanceInfo struct that we used before (in create character request) so we don’t need to create that now. Here it is for reference.

Character Appearance struct

Ok so now we know all the pieces that want to go inside the new structure, so let’s make it:

Account Character struct

With this struct, we can now capture all the details from our API and have them in an easy to use form.

Convert to account character response

Now that the structure is ready, we want to be taking the JSON from our API call and converting it to the array of account characters.

To help with this I created a new blueprint for holiding function libraries:

Create helper method, mine called VaRestToStruct

We will be creating 2 functions here.

  1. JSON to character appearance struct
  2. JSON to account characters

Name them as you like, my first one is: ConvertToCharacterAppearance:

Convert to character appearance blueprint

The function call is relatively simple.

Have a look at the input/output for the function; input is Va Rest Json Object and output is Character Appearance.

So, you can simply create a Character Appearance struct and start populating all the fields which are taken from JSON. All of them are string fields, so for each one you can do Get String Field and just specify the name of the field. You can cross reference the names from the Postman response and/or documentation.

Next, we look at ConvertToAccountCharacterResponse function:

Convert to account character response blueprint

As described above, there’s 3 fields we care about:

name and accountName are simple string fields, so we can fetch them using Get String Field call.

For appearanceInfo, this is a nested object, so we Get Object Field with this name and use the ConvertToAccountCharacterResponse function to get this struct. We create the AccountCharacter struct using all this data and return.

Re-draw selected options – Toggle Character widget

Ok now we have all the data we need to start populating the select character screen – we have an array of Account Character structs, which contain the name of the characters and the appearance information.

We will use this to draw buttons to choose the character and render the actor on the screen.

Before we go into the specific blueprints of this, let’s introduce the widget which will show the character name and allow you to click it in order to change selected character.

Create a new User Widget – mine called Toggle Character

It’s a fairly simple widget, containing just the character name at this stage.

Widget to list characters available

Just make sure the text block is set to Is Variable, which will allow us to set string dynamically.

For the blueprints you will want to do the following:

Toggle Character blueprints

For the event dispatcher, you will want to edit the Inputs and add the Account Character as input here.

Add Account Character for input of dispatcher.

This means that when the dispatcher is called, it will provide the selected account character along with the event, which is very useful.

Re-draw selected options – Blueprints

Ok so now we created a widget for Toggle Character. This widget is used to display the buttons for each of the character that’s present.

Let’s create a variable to hold all these button widgets:

Array of ToggleCharacter widgets

And this is the implementation:

ReDrawSelectOptions blueprints

Ok when we call to re-draw the select options, we will first clear the widget list, if it’s not empty for whatever reason.

This is not fully necessary as we plan to destroy this entire widget when we toggle between create/select character. But its good practice, because you may choose to hide widgets instead of destroying and anything that can be repopulated should be cleaned.

Ok now that you cleaned the toggle widgets array, we want to iterate over the Account Characters array obtained from the API and create the Toggle Character Widget for each of the present account characters struct. We add a little padding to it dynamically here, but may not be necessary depending on your design.

The Toggle Charactewr Widget takes in the Account Character struct which is how it knows what name to render on the screen.

We add the widget to the Scroll Box component in the Select Character Widget using Add Child method.

For each of the added Select Character Widget components – which is effectively a button to select your character, we want to bind the Event to Character Selected.

This event returns the Account character struct, which is great. We can now create a local variable for Selected Character and once set, we can create a custom event to Render Selected Character.

Note that at the end of ReDrawSelectOptions (on Completed call of the For Each Loop function) we also Render First Character. This is just to display the first character in the list, when available.

The blueprints for that are:

Render First / Selected Character

Ok so what do we have:

In this re-rendering, we’re reusing 100% of the logic created part of create character logic, which was covered in chapter 22 – apply options to mesh – if you don’t have this logic implemented, do check that post about how its achieved.

The results

Ok so let’s make a ‘new account’ by modifying the header values in the API calls.

New account with no characters

Now we can go to ‘Create character’ and create new character

Let’s create testCharacter1 character.

creating new character

We’ll get taken back to character selection screen with this character now available.

Character selection screen with 1 character

Let’s create a new character, testCharacter2.

Second character now appearing in character selection screen

Ok great, we’re now basically ready to start implementing the button for Login and getting the player into the game!

There are obviously additional validations that are missing that you may want to include, for example – what’s the character limit? What about character name, are numerical characters allowed?

Exit mobile version