In this post I will be extending my inventory design that I created in these posts:
The goal will be to replace the mannequin from the character sheet with the actual character representation. You can find the demo of this character integration in this video.
Specifically, we will be looking at how to create the animated character icon in the inventory widget.
3D Mesh Capture Blueprints
This will be a 3 step process to create this widget. You will need
- Character Capture Blueprint
- Render Target
- Material
Character Capture BP
This is a blueprint which extends your character / skeletal mesh that you want to appear in your inventory.
So when you’re creating your blueprint, make that character the parent class:
In my case, I already prepared a ‘PlayerProxy’ blueprint, which perhaps you may want to do – it’s a blueprint which extends my character blueprint and disables its input and some other things, but mainly keeping the appearance logic in tact.
To prepare, let’s create the Render Target blueprint too:
Next, let’s look into the Character Capture BP
Ok so first thing is make sure we have the correct class as parent (top right).
By making the correct parent we will need to make much fewer changes (if any) to get the character appearance into this blueprint.
Now you need to add yourself a ‘SceneCaptureComponent2D‘ by clicking the Add button around top right of the screen.
Ideally you should have it nested inside a Spring Arm component – but this is optional.
Once you added this component, position it as you like and in the Details find the Scene Capture: Texture Target.
You will want to set the texture target to the Render Target you created a few steps ago.
You can keep the other settings here as default but we will modify some of the settings inside the Render Target blueprint.
Now in the Construction script of you Character capture blueprint you will want to add the following:
In my class I also set some other variables (isProxy), this is just to highlight you can do other things here too, and you may want to call the parent construction script, in my case it configures the appearance meshes.
Bonus
I also added the following:
Your function will very likely look different but you may want to add something similar;
Essentially you will potentially want a function which will dynamically change the character appearance.
In my case I extend my character blueprint, which implies I have access to its appearance struct as well as the function to resolve all appearance.
This means whenever I want, I can tell this function to update its appearance, which will be reflected in the inventory widget essentially.
2D Render target
Ok so we already created this blueprint and now we’ve also set it as a target for the SceneCaptureComponent from Character capture bp.
When you open this blueprint up, you should find that it is populated with a drawing – this should happen automatically whenever you compile you character capture blueprint.
Most of the settings can stay default but I would suggest keeping the texture dimensions minimal (can be even 16×16 if making very small images) as having high value here will consume a lot of resources.
That’s all we need from the render target
Material
First, you will want to create a new material, by right clicking and selecting material.
Next, inside this new material you will want to change the default material domain from surface -> user interface.
After doing so, the options will change to the following:
Now you will want to add in your texture sample, by right clicking and searching ‘Texture sample’.
Do a 1 – out of A to get the 1-x function and connect it to opactity.
And that’s it for the material!
Using this in a widget
We can now use this as a 2D image in our widgets.
Create yourself a simple widget to begin with which perhaps will only have the image.
As you can see it’s simply a image component with the Brush -> Image sourced from the Material you have created earlier.
Now you can use this widget directly in your other widgets.
For instance, inside your inventory component or elsewhere.
Here it is used part of my inventory component:
Finally, you will also want to create an instance of the Character Capture BP.
I did this part of character blueprint (alternatively you can manually add it to the world, but I wanted it automated)
You will want to make sure to set the transform somewhere outside the world.
This is because the player themselves will be able to see it if it comes into their view.
I added it to Character blueprint because I will also update it whenever my characters appearance is updated (optional). I will do it like this:
Credit
The work done in this post was mainly a derivation of existing work in YouTube, check it out below.
