Clothing Layering Video + Dev Diary: Deep Dive Into the Design of our Clothing Layering System (Patreon)

Happy Friday, Anna here!

Today, I am bringing you the above video showcasing our new clothing layering feature, which will be made public next week but we wanted to show it to you first. In the meantime, keep it between Patrons only! Clothing layering is the ability to wear, for instance, two tops at the same time. This is usually a rare feature in games because it comes with a lot of technical challenges but it was highly requested since it allows flexible customization. If you think about it, it’s extremely common for people to mix and match multiple layers of clothes in real life.

In this post, I will go a little bit more in depth and explain how we designed our layering system, step by step.

Development Diary: Layered Clothes in Paralives

Our Goals

Let’s start by giving a proper definition of clothing layering to make sure everyone is on the same page! In Paralives, layered clothing defines two separate pieces of clothes that can be worn at the same time on the same body part and won’t be stuck together. For example, Sebastian’s jacket and turtleneck before the addition of this feature was considered only one piece of clothing, but now the two pieces will be separated. If you think about it, when wearing tights, socks and boots, Maggie was already wearing layers of clothes in this video a while ago! This won’t change, but it is not exactly what we have in mind with today’s system. Today’s applications will include more complex examples: coats or overalls being on top of shirts, while still existing as their own standalone version. Why is it complex you ask? Wait for the next section of this post to know!

A lot of people have suggested this feature and we think it was a very interesting addition to our Paramaker. The main reason is that it will allow the player to have more customization options, without needing us developers to create more clothes. With only one jacket like Sebastian’s one, players will be able to make their characters in multiple styles: casual with a simple shirt or sweater, classy with the turtleneck, or even spicy without any shirt on. In the future we could also imagine a more formal version with a shirt and tie! Possibilities are endless (well… almost).

Four styles for one jacket!

1: Fancy bad boy - turtleneck.  2: Casual bad boy (summer edition) - tank top.  3: Casual bad boy (winter edition) - sweater.  4: Spicy bad boy (or Timothée Chalamet at the Oscars ceremony) - bare chest.

Our main challenge with this feature is to give as many customization options as we can while keeping the interface simple, clean and intuitive. That’s not an easy task!

Layers Without Limits: Is It A Good Idea?

Our game already allows the equipment of multiple things at once, with an “order” setting applied to textures (so that a sweater appears on top of a shirt and not the opposite, for instance). Another example of things that are already worn at the same time would be the different skin and skin details textures (freckles, makeup, etc.) that need to be rendered on top of each other in a certain order. Theoretically, we could just allow all tops to be wearable whenever the player wants to, instead of only allowing one piece of clothing to be worn at a time in the “Top” category. It would require approximately 6 seconds of our time to remove this restriction and should not cause any major bugs in the code.

However, it is not as simple as it looks. Here are some examples of issues that would arise if we just allowed any equipment to be layerable with each other:

Layering issues of some of the possible combos.

Image #1: When clothes are not originally made for a layering system, the results you get when compiling the two might work technically but the result might feel a little weird!

Image #2: Sometimes, it just doesn’t work: both clothes are in conflict with each other because of clipping issues (the 3D models overlap each other and cause the textures to break).
Image #3: Sometimes, it works very well... But you can hardly see that the tank top is there!

Another problem is that the player would have to travel between different categories of the Paramaker, or scroll to see which clothes are worn. If they want to remove them, they would have to find them in three different categories in the menu and click on each of them! A bit long when you test multiple outfits on your Para. Players could even forget that there are multiple hidden layers underneath! It is not very intuitive.

Some of the (not shown) other combinations might work just right. For instance, the jacket and sweater combo looks flawless!

However, we don’t want to allow the 1000 possible combinations of tops if 900 of them won’t be used in the game for similar problems (editor’s note: these numbers are exaggerated…for now). We cannot modify every single equipment to make sure they work with every other equipment either: some combinations are just not supposed to work in the first place. Also, there is not an easy way to automatically make the clothes adapt to each other like the rules of physics do in real life.

To sum up, many combinations from existing clothes might not work very well, but some will. I think it is okay: when you decide your outfit of the day will include a leather jacket, you might not want to put a puffed sleeves shirt under it because the interesting part of the shirt wouldn’t be visible and your sleeves might wrinkle. Now that we agree (I hope!) that we cannot allow endless possibilities, how do we show the player which layers are possible and which are not?

In this case, the biggest challenge really lies in what we call the UX (User Experience), or how, as game designers, we want our players to efficiently find their way into the most relevant options we have to offer.

The Clothing Layering Menu in the Paramaker

The main idea: some of the clothes have an extra customization button allowing players to select from different hand-picked layering combinations.  In the example of the above image, the “primary equipment” (the over layer) is linked to three “secondary equipment” (the possible under layers). Both pieces of equipment have to be separate clothes, which means their colors or patterns will be customizable separately. In most cases, the secondary equipment will already exist as a standalone equipment. For example, in the concept below, the shirt, turtleneck and sweater can all be worn under the jacket, but they can also be worn on their own as they exist in a different clothing category of the Paramaker!

It also means we can hand pick the pieces of equipment that are layerable with each other. We will test which combinations are possible (no clipping issues) and the most useful, so the player is not drawn into plenty of variations that are not interesting!

Early concept of the idea. When the jacket is equipped, the player can click on its layer icon and a pop up appears so they can choose which shirt goes under the jacket.

Here are some additional notes to this design:

• The set of possible secondary equipment can differ from one primary equipment to another! For example, customization for a winter coat could include: a turtleneck and a big sweater, while a leather jacket could include a short sweater and a simple T-shirt.
• Only one secondary piece of equipment can be worn at a time.
• The secondary equipment can’t be layerable, so there’s a limit of two “layers” (accessories such as necklaces or tights do not count as layers!)
• Modders can easily add their own layered clothes and edit the possible combinations. (see #1 in image below)
• For clarity, a ⚙️ icon has been added to every customizable equipment: whether they’re layerable, have a variant (like Maggie’s Christmas sweaters), or other specific customization options, like the moveable tattoos. That will allow the player to have a quick glance at which piece of clothing has more options hidden in the UI! (see #2 in image below)

1. How the layering settings look in the mod system for the leather jacket right now. Notice that there’s an empty option, which allows for a bare chest option! (only the jacket will be equipped, without any under layer). 2. The customizable icon that will allow players to differentiate which equipment is layerable and which one is not. 3. You can access the layer selection popup by clicking on this icon

What do you think about this feature? Don’t hesitate to share your ideas of layered clothing that you would like to see in Paralives!

That’s all for today, I hope you enjoyed reading this dev diary as much as I enjoyed making it!

Anna

✿ʕᵔﻌᵔʔ✿