Tutorial
Heading
Jan 4, 2024

How to add a VRM avatar into Roblox for NPCs

We are going to walk through all the steps necessary to create NPC avatars in Roblox starting with a VRM of the character we desire

Premise

In this document, we have compiled a comprehensive guide to explain how to import a VRM Avatar into Roblox that we can use as an NPC for our world design.

Do keep in mind these method is NOT compatible with layered clothing.

Mission

With this documentation we are going to walk through all the steps necessary to create NPC avatars in Roblox starting with a VRM of the character we desire. Unfortunately, this method does not make the NPC compatible with layered clothing, but it is a fast and efficient way to implement simple avatars into your Roblox games.

Resources

  • Blender
  • Maya
  • Roblox Studio

Step 1: transforming VRM into FBX

The very first thing we need to do with our avatar VRM is to tranform it into an .fbx file. To achieve this, we will have to bring our .vrm into Blender.

Before exporting into .fbx, we will have to merge the vertices to avoid future issues when moving.

Exporting Our VRM into FBX in Blender

Once we have transformed our .vrm into a .fbx we can start with the process of making our character into Roblox.

Step 2: taking it to Roblox

We will need to have both a Roblox account and Roblox Studio installed to crate our own avatars. Alongside the base studio, we will need to install a plugging called RigEdit Lite, which will allow us to create a new rig from the VRM into Roblox.

"Import 3D" button

To begin, we will have to import our fbx into Roblox Studio. The “Import 3D” feature will allow us to import the rigged FBX we just transformed our VRM into.

Imported avatar size

You will need to resize your avatar to fit the appropriate size for Roblox. For this, we recommending importing a default Roblox character into the studio to ensure you can match its size.

To import a Roblox default character, go to the “Avatar Tab” > “Rig Builder” and select “My avatar or Block Avatar”.

You will also need to correct its position to 0,0,0 so it is centered.

Avatar resized to the apropiate size

Step 3: adapting our avatar

How to add a block part

To begin adapting this model into the Roblox workflow, we will need to create a new part. This is a block that we will size to fit up to the character’s shoulders and down to the avatar’s hips.

"HumanoidRootPart" applied to the character before turning it invisible

We will find this menu by hitting the "+" icon next to the character name

The final look of our avatar’s hierarchy

We will then rename this part to HumanoidRootPart and drag it into our avatar so they are grouped together. Then, we will increase the part’s transparency up to 1 to make it invisible.

Where to find the rig type and "HipHeight" in "Humanoid"

Lastly, we will add a Humanoid to our avatar, and we apply these settings to it:

  • Rig type: R15
  • Hip height: (insert the avatar’s hip height)

TIP: since the cube was placed at its hip height, you can see the HumanoidRootPart’s Y position to know the hip height of your character.

Make sure to delete any other folder, file or rig that is not listed in the images displayed to make sure it all works properly.

Step 4: scripting

To ensure we properly adapt our avatar to Roblox, we will need to dable briefly into its scripts. Luckily, the scripts are relatively easy to prepare.

Created script inside of the "StarterCharacterScripts" folder

We will have to go into the "StarterCharacter" folder, and into the "StarterCharacterScripts". By pressing on the “+” symbol next to the folder, we can create a new blank script.

On this new empty script, we just need to write two lines of code:

wait(1)
script.Parent.Humanoid.HipHeight = (Hip height of your avatar)

Once we have this done, we will hit the “playbutton.

With the game running, we have to go into the “Workspace > Your Username > Animate (script)”

Where to find the animate script

We will copy the animate script and paste it into our “StarterPlayer folder > StarterCharacterSripts” and paste it there.

The final composition of our "StarterCharacterScripts" folder

We can now stop the game from playing to return to the editing studio and move on.

Step 5: animating

To add animations to our avatar, we are going to use the help of Mixamo to get high-quality animations compatible with out avatar.

Going into Mixamo, we will now download animations for all the movements needed for Roblox:

All the animations we’ll have to add

The method to apply any animation to the model is the same for all of them; here we will see how to do it.

First, we will go to the "Avatar" tab and to the "Animation editor", clicking on our character, we will…

Where to find "Animation Editor"

By clicking on the “…” button we can then import > from .fbx Animation. We will be able to import the .fbx of the animation we downloaded from Mixamo.

How to import Mixamo animations

Our Avatar will then change poses to fit the animation we just uploaded, letting us know we did it correctly. From there, we can click “play” and make sure the animation is looping.

Video displaying the animation loop

Publish to roblox "..." button

With our animation uploaded we will have to click on the “…” button again and publish to Roblox.

We can then name our animation and continue until we get a window informing us we successfully submitted the animation and an “ID CODE” we will need to copy.

The ID we will need to copy to assign the animation

Hierarchy tree for the animation

Now we will have to go to our Starter Player > StarterCharacterScript > (animation action) and go into its settings.

There we will paste our ID into AnimationId and hit enter to make sure it registers.

Animation options

We will have to repeat this process for each individual animation to make sure they all register correctly into our model. Once we are done, we can exit the animation editor by clicking again on the tab.

Step 6: rigging

To start using RigEdit Lite, you will need to select your imported FBX model. You can find RigEdit Lite under the “Plugins” tab. Once selected, a window will appear, and you will need to click “Rig”.

All we need to do, is click on our avatar, navigate to the plugin folder, and select “Edit Rig”.

Where to find RigEdit Lite

RigEdit’s menu

Now, we will be able to see a small menu in the top right corner of our studio.

On this menu, all we need to do is select “HumanoidRootPart” and our avatar’s mesh.

And then click on “Create Joints”.

Making sure our "HumanoidRootPart" and mesh are selected when creating the joint

With just these few step,s we are finished with the rigging process of our model, and we can exit RigEdit mode by clicking the tab again.

Lastly, we will go into our character’s options and in the collision cathegory, we will make sure to uncheck the following traits and make sure "Collision Fidelity" is set to: "PreciseConvexDecomposition".

The final collision settings for our model

Step 7: final step

Finally, all we need to do is put it all together by renaming our avatar to “StarterCharacter” and dragging it into the “StarterPlayer” folder.

Final display of the "StarterPlayer" folder

You will see your avatar disappear from the workspace, but once you hit “play”, your avatar will show up, moving according to the animations you set for it.

Final results!
Avatars
Blender
Roblox
Mixamo
Sebi
Character Artist
Tutorial
Turning a 2D image into 3D using Blender
Tutorial
Trim textures: a new hope
Tutorial
Tomb Chaser 1 - Showcase