Haberdashing in the Digital Era

If you’ve ever wanted to wear your hat at a jaunty angle or make it clip a little less with your hair, you may enjoy the latest and greatest in Rec Room hat technology: posable hats! 

This ended up being a surprisingly tricky feature to ship, but we’re super excited about it, and wanted to talk a little bit about the whole process.

So Many Hats!

The main reason this was a hard problem is that we have over a hundred hats already, plus dozens of hairstyles for them to work with! And to make it even more complicated, we authored every one of those hats at a slightly different angle. After all, when we didn’t have the ability to pose them, it made sense to build a hat the way it should be worn. Now that we were trying to make them adjustable, the fact that each one is unique meant we couldn’t really automate any of it.

We were faced with the challenge of not only making a system to let players pose hats but also a tool to let the artists set up hats for posing in the first place. And because there were so many hats to retrofit, and we’ll have to do this work for every new hat in the future, it had to be quick to get good results. 

Under the Hood

For us to give our hats additional independent movement, we needed to add a new bone to the Player Avatar that would not only derive its information from parent bones but also allow us to add information to its transform, without affecting the rest of the bones in the Avatar. 

first.png

We also needed to preview each customized hairpiece, each hat’s settings, and iterate quickly if any adjustments needed to be made.

To achieve these two goals, we created a tool that would allow us to do just that. 

image2.gif
image1.gif

The first version, as you can see in the second gif above, involved a custom mesh for each hairstyle that defined the ‘posable’ area. We got part of the way through this process before we realized that it wasn’t sustainable. This was a technically complex process, and not only did it add too much time to each new avatar item, it also relied a lot on individual judgement calls for consistency - there was no objective way to measure the choices. The result of this was that, over the hundreds of combinations of assets, the differing judgement of individual artists could lead to some very unpredictable and broken results, even if each piece looked great in isolation. 

We took a step back there and regrouped, then decided to use hemispheres, instead of custom meshes, to outline the traversable area of each hair piece. It’s a little less precise, but with this simplified hemisphere, we could now do all of the work in Unity instead of creating meshes in Blender and then importing them, which saved a lot of time for the artists. This also ensured that they all had identical topology and normals, so the same limits and defaults would mean the same thing for every different hairstyle. 

image5.gif

To work with the new bone in the avatar head, and the hemisphere mesh on the hairstyle, we gave each hat a new pivot point. This was mostly to make up for having created them at all sorts of different angles. This pivot point represents the center axis of the hat, at the point where it would rest against the scalp on a bald head. And using that pivot point, snapped to the center of the hemisphere mesh, gave us a consistent place to start setting limits on movement. 

image7.png

This was instantly a better result. Snapping the hat to the hemisphere improved most of the hair clipping issues by itself, even if the hemisphere is less precise. There was still some combinatorial hilarity though. In the same way that extreme sliders can make for a goofy-looking RPG hero, we had to be pretty careful to check all the slider limits at once to avoid some real body horror! This made for some pretty fun playtests.

oh god why

oh god why

Next we worked on creating a UI that would allow players to access the underlying data that manipulates the hat’s pose. There were many iterations of this because this was the most important (i.e. player facing) part of this feature. Below are some images of early iterations and designs.

image9.jpg
image6.png
image10.jpg

Finally.. we couldn’t break anything! We needed to make sure the posable hats feature played nice with all the other features that depend on the Player Avatar, so we did many playtests to ensure that we serialized data correctly across all representations of your character (Holotar, Minitar, Loading Screen Avatar, PiP...). We made sure that new outfits saved correctly and that old outfits would still load without breaking your avatar. And we also made sure to let you turn off posing entirely if you like the way your favorite hairstyle clips with your favorite hat.

image12.jpg
image8.jpg

Lots of Testing Later….

That’s the short version of our hat-posing saga. We hope you enjoy this extra bit of customization for your avatars. And as always, thanks for playing!

image3.gif