Tutorial:Clothing

This page is mostly rough outlines and notes. Video tutorials at the bottom of the page explain the 'Static' version well.

Resonite provides as with many things, more than one way to do something and adding pre-made clothing to your avatar is no exception. With the exception of simple items such as hats, bracelets or similar accessories most clothing needs has rigging just like like avatars and also could have a number of blendshapes that interact with the model.

This tutorial assumes the user knows how to use the Dev Tool, has already imported and set up their avatar and knows how to use basic Resonate systems such as the Scene Inspector as well as what a slot is, how to drag and move things around in the Avatar's Hierarchy and dragging references into fields. Everything in this tutorial is also done only using components and avoids ProtoFlux to avoid the use of other tools.

There are two main ways to attach more complicated items to your avatar:

Static:
- Easy and quick, (nearly)always works, less go wrong.
- Simple context menu toggles to enable/disable clothing items.
- Everything always remains part of your avatar.

Dynamic:
- More fun and flexible but more complicated.
- Allows clothing to be physically removed or even swapped between compatible avatars.
- Leave your clothing spread around the room!
- Also handy for rigged assets you don't want to save with your avatar.

Importing

Clothing has to match your model's rigging/weight painting and be made to fit if you want it to 'just work'. While it's possible to change things in game to make basic items work, this is not a subject for this tutorial.

Mostly: Avatar Importing Guide#Clothing And running: Component:SkinnedMeshRenderer#Optimization over it to strip out blendshapes and bones that are not needed.

It's also possible to separate some clothing/items out of an existing avatar if it has a separate material using Component:SkinnedMeshRenderer#Blendshape removal for use by the 'Dynamic' method.

Otherwise this step needs to be done in an external program such as Blender and is well beyond the scope of this tutorial.

Static method

Attaching

Moving model's assets to the model's hierarchy.

Under CenterdRoot is suggested whenever the along with 'Body' mesh is.

Rig

Dragging bones over from avatar's main hierarchy Component:Rig

(Is there a tool?)

Context Menu

For a more detailed Tutorial: Tutorial:Context Menu

BooleanValueDriver<float>: Connecting ButtonToggle to this component's State field allow driving of BlendShapes directly. See component for examples.
ValueMultiDriver: Used if you need to drive a number of fields(For example several clothing items), not just a single one.
Component:MultiBoolConditionDriver: Lets you control what gets turned on and off depending on states.

Dynamic method

Assets need to be attachable and controllable from the avatar and disconnect able when removed. DynVars are the magic that makes this work.

As above this is all done with components. There are other ways that involve Protoflux, slot searching and the VirtualParent component, however while more flexible this is also a more complicated for newer users.

There is a bug with SkinnedMeshRenderer that causes it to glitch it's bones are swapped dynamically. Ways to mitigate this are included.

Snapper

Moving the model to the avatar and making a named snapper: Component:Snapper
Use: Create Pivot At Center (Move in place and just parent from slot?) from the Scene Inspector then create a snapper from that?
Suggested to add clothing to somewhere that matches the item. Chest for a hoodie, hips for pants, for example.
*Use Keywords to make it so only that item can snap there.

Dynvars

On avatar

To make things easier for future clothing/options, this tutorial recomends using the Avatar standard and running through the setup there. There are tools to help guide the setup.

The parts used by this tutorial are the Avatar standard#Armature Variables, mostly "Bone.Name" ones and Avatar standard#Blendshapes
If you want only the required ones: Inital Component:DynamicVariableSpace on avatar root and use Component:DynamicReference can be used to reference all the bones required.

On clothing (Rig)

Matching dynvars that are needed. Create a slot under the clothing item. Existing bone/rig can be left alone though as it's useful shortly.

Component:DynamicReferenceVariableDriver to connect everything up and revert to original rig when not snapped.
- 'Bone.Name' for all of the required bones. For each use TargetReference on the rig component and DefaultTarget to original rig.

<Fixes for SkinnedMeshRenderer bug switching is here. Swapping over to static renderer using dynvars? Restarting the component. etc.>

Blendshapes

Dynvars that also drive blendshapes that for example shrink limbs or hide body mesh parts to allow for clothing.

These are dynvars on the clothing that changes the avatar blendshapes.

Avatar standard#Blendshapes

Add: Component:DynamicValueVariable to the clothing to drive the blendshapes to the state you want.

For easier time, use DynamicReferenceVariableDriver to drive bools. Avatar standard has examples of how to drive these.

Materials

Make sure they are all copied to or duplicated on the removable item.

Context menu

While toggles to hide clothing are less needed, other options might be useful:
- Menu options that 'lock' clothing if you don't want to only use grab permissions. Driving Enabled on Component:Grabbable
The context menu needs to be installed on the clothing snapper so it can be removed along with the rest of the assets.
- The easiest way is to create a new context menu compete with Component:RootContextMenuItem, however using DynVars to drive the Parent Slot of a simplified menu to place it under an existing avatar context menu also works.

Permisions

Component:DestroyProxy and avatar protection and destroy on user leave. Adding Component:SimpleAvatarProtection

Grab permisions so only you can take your stuff off. Adding yourself to OnlyUsers for example

Videos

Static method:

Matching clothing toggles: