Layered Roblox clothing
In this article, we will learn the basics of creating and testing wearables in Roblox
The mission
Roblox is one of the platforms that has taken wearables as a way to express oneself and take one's identity in the metaverse one step further.
In order to do that, they use a technology called Layered Clothing. This allows the same wearable to work for any kind of avatar, regardless of size or proportions of it.
In here, we will learn how to create layered wearables that can be used in Roblox.
Resources
- Blender
- Maya
- Roblox Studio
Create the wearable
Modeling wearables follows the same process we have discussed in other articles. You can choose your trusted 3D software and model.
Wearables are divided into two categories: accessories and clothing. Unlike other platforms, you define the wearables once you upload the model.
In order to explain the basics of creating wearables, we are going to take one model that we have already used before: the tiger onesie.This model has been updated with “Normals”, “Roughness”, and “Emissive” channels in order to test the limits of this platform.
Once we have our wearable modeled, we need to adapt it to the Roblox Template. This template is in Blender, and it contains a rig and two humanoid avatars, “InnerCage” and “OuterCage”.
When we import our wearable, we must ensure that it fits the proportions of the two avatars. In my case, since it's a piece of clothing, I made sure that it fits “InnerCage”.
In case that we are creating complete avatar Make sure the proportions are correct and no that if fits or no.
Once the wearable is prepared and fitted with the skeleton, it's time to modify the cages. The “InnerCage” must be inside the wearable; in my case, it fit already, so no changes were necessary.
However, the “OuterCage” defines the wearable's exterior, so we need to make alterations (sculpting, inflating, moving vertices) until it is no longer visible from the outside.
The other thing we need to change is the names; make sure the wearables have an easy name, because it's more comfortable. The name of the “InnerCage” will be NameOfWearableModel_InnerCage and the “OuterCage” will be NameOfWearableModel_OuterCage.
Once these changes are done, export the model in FBX and we can import it into Roblox Studio.
Upload the wearable in Roblox Studio
In Roblox Studio, we can create a new scene to test our wearables. To ensure the rig and cages are functioning properly, we need to check that 3D layered clothing and “Accessory fitting” tool is activated. In recent versions, it's already included; however, you can check it in Beta Features. If it doesn't appear, it's already enabled.
To import our model, we will head to the “Home” tab inside Roblox Studio and click on “Import 3D”. From there we will search for the model we created before hand and click on import.
On the window that it opens, we can check that the model works correctly as well, if the faces are not facing correctly go to the model check on double sided and vertex colors. If your material is not working correctly you can add a surface material inside the program.
From here on we have two way on preparing this to be a wearable, the one that has been implimented is on the latest version of the program is the “Accesory Fitting” tool. You can find that tool on the “Avatar” tab.
Once you click on it it will take you through a menu where It will ask us to select our model and will have to let the software know which kind of wearable it is (in our case a wearable dress) and also will let you try it out on different king of characters. Finished that process we will end up with an accesory.
Trying our wearables inside Roblox Studio
After we have done this we will need to create and Script which we will add it to the “ServerScriptService”. Said script should be like this:
Finally, we will drag the accessory that we have created inside ServerStorage, getting something like this at the end. Once we have finally done this, we can click "Play" and test our wearables. We can change our avatar inside our Roblox profile, change our avatar and see how it adapts to these different avatars.
