Editing avatars in the Outfit window

Bigger ears, brighter lipstick—it's time to let your virtual stand-in truly stand out. Using the Outfit window, you can edit your avatar's appearance and outfits with ease.

Overview

Breakroom's Outfit window offers an impressive level of control over the physical appearance of your avatar. Completed outfits (including shape, skin, hairstyle, etc.) can be saved for future use. Once you've created a library of outfits, you can switch between them at will.

World Owners and World Administrators can enable and disable parts of the UI via the Dashboard. You may not have access to every avatar customization option described in this section.

Opening the Outfit window

Highlighted: The location of the Outfit button.

You can open the Outfit window by clicking the Outfit button located in the bottom toolbar, or by pressing Ctrl + O on your keyboard.

The Outfit window UI

Pictured: The main Outfit window UI.

Once you open the Outfit window, your avatar's current look will be displayed in the preview window on the left side. Before we discuss the various editing tools, let's review the Outfit window UI.

Button or UI component	Function
Current Outfit Bar (top center)	Displays details about the current outfit (name, outfit ID).
Save As button (top center)	Saves a copy of the current outfit under a new name.
Delete button (top center)	Deletes the current outfit.
Create New Outfit button (bottom center)	Creates a new base avatar for customization.
Avatar height slider (bottom left)	Adjusts the overall height of the avatar, while maintaining its current proportions.
Appearance tab	Displays avatar appearance and customization options.
Wardrobe tab	Displays a user's full collection of avatar components and accessories.
Wearing tab	Displays only the items a particular avatar is currently wearing.
Outfit List tab	Displays saved Outfits.
Camera panel (bottom left)	Adjusts the camera angle and focus point within the Outfit window.
Discard button	Discards any unsaved changes and reverts the avatar to its previous appearance.
Save button	Saves any changes made to the outfit and exits the Outfit window.

The camera tools

Pictured: The camera tools.

The camera tools can be found in the bottom left corner of the Outfit window. Use them to position your camera for optimum viewing while you edit your avatar or outfit.

Button	Function
Pan up	The camera will pan upward.
Pan down	The camera will pan downward.
Rotate left	The avatar will rotate left.
Rotate right	The avatar will rotate right.
Zoom in	Camera will zoom in closer to the avatar.
Zoom out	Camera will pull back from the avatar.
Legs/feet zoom button	Camera will focus on the avatar's feet.
Body zoom button	Camera will focus on the avatar's body.
Head zoom button	Camera will focus on the avatar's head/face.

Creating a new outfit

In Breakroom, the term outfit refers to a unique avatar configuration. It may help to think of an outfit as an avatar that you have saved at a particular moment in time, including all details such as hair, skin, eye color, shape, clothes, shoes, jewelry, etc.

For example, you may craft a basic "Me" avatar and then save several variations on this avatar as separate outfits, such as "Formal Me" and "Sporty Me." Or you may choose to create a diverse collection of outfits, including quadruped dragons, hovering ghosts, and more.

To create a new outfit or avatar, follow the steps below.

1. Open the Outfit window by clicking the Outfit button at the bottom of your screen.

2. Click the Create New Outfit button located at the bottom of the preview window.

Pictured: The Create New Outfit button.

1. A pop-up will appear, prompting you to select a basic body morphology. Make your choice by clicking either the Masculine or Feminine button.

2. Enter a name for your new outfit, and click the Save button.

Following these steps will replace your current avatar with a default masculine or feminine human avatar. You can then edit this avatar in detail to create a new outfit.

The Appearance tab

Highlighted: The location of the Appearance tab.

The Appearance tab contains a suite of convenient tools that allow you to change your avatar's body and face presets with a single click. You can also use the Head, Bodies, and Skin interfaces located under the Appearance > Details subtab to further customize your virtual look.

Applying preset shapes

Pictured: Body and face presets available under the Appearance tab.

Presets are built-in shapes designed to change your avatar's appearance with a single click. Using presets can help you achieve your avatar appearance goals more quickly, as they can be customized after you apply them.

To apply a new preset to your avatar, follow these steps.

1. Open the Outfit window by clicking the Outfit button at the bottom of your screen.

2. Make sure the avatar you want to edit is currently active, or create a new avatar to edit.

3. Click on the Appearance tab. Make sure the Body & Shape subtab is active.

4. Click on a body preset or a face preset to apply it to your avatar.

5. When you are satisfied with your changes, click the Save button.

Customizing your head and body shape

Highlighted: The Appearance tab, with the location of the Details tabs highlighted.

The Appearance tab contains two subtabs, which are located in the top right corner. The Details tab contains three subtabs of its own—the Head tab, the Bodies tab, and the Skins tab. In this section, we will focus on the Head and Bodies tabs.

The Head tab

Pictured: The Head tab, with several facial feature control panels expanded.

Under the Appearance > Details > Head tab, you will find a number of facial features with nested slider controls. To expand a facial feature control panel, click the > arrow located to the left of its name. You will also see options to Minimize All or Expand All panels near the top of the window.

Each slider controls a single aspect of your avatar's facial configuration. The level of detail you can achieve with these sliders is astonishing, and the best way to learn how to use them is to experiment. You can always Undo your last step or Reset your avatar entirely by clicking the relevant buttons at the bottom of the window.

The Randomize feature

Pictured: The Randomize slider.

Of particular interest is the Randomize feature, which allows you to "roll the dice" and see what kind of face you get. If you chance upon a set of facial features you like, you can then refine your look using the facial feature sliders.

To use the Randomize feature, follow these steps.

1. Open the Outfit window by clicking the Outfit button at the bottom of your screen.

2. Make sure the avatar you want to edit is currently active, or create a new avatar to edit.

3. Click on the Appearance tab, and then navigate to the Details > Head tab.

4. Click on the > arrow located to the right of the Randomize control panel to expand it.

5. Increase or decrease the "randomness factor" by adjusting the associated slider. The larger the randomness factor, the more dramatically different each random generation will appear.

6. When you are ready, click the Randomize button.

If you end up with an avatar that looks a little too random, you can always click the Undo Randomization button to restore your avatar's previous appearance, or click the Reset button to revert your avatar to the default masculine or feminine human settings.

When you are happy with your changes, be sure to click the Save button. If you prefer to throw away all of your changes and keep your last saved appearance, click the Discard button.

The Bodies tab

The Appearance > Details > Bodies tab appears and functions much like the Head tab. You can adjust the relevant sliders to change your avatar's body shape and size, right down to the length of your fingers. You can also use the Randomize feature to generate a random physical appearance.

When you are happy with your changes, be sure to click the Save button. If you prefer to throw away all of your changes and keep your last saved appearance, click the Discard button.

Choosing an avatar skin

Pictured: The Skins tab.

The Appearance tab also allows you to apply a skin to your avatar and edit it. Additional skins can be purchased through the Breakroom Shop.

To change your avatar's skin, follow these steps.

1. Open the Outfit window by clicking the Outfit button at the bottom of your screen.

2. Make sure the avatar you want to edit is currently active, or create a new avatar to edit.

3. Click on the Appearance tab, and then navigate to the Details > Skins tab.

4. Click on the skin you want to use.

Pictured: The Skin Bumpiness slider.

After choosing a new skin for your avatar, you can refine its texture using the Skin Bumpiness slider. Decreasing bumpiness will make your avatar's skin look smooth, while increasing bumpiness will make it look more matte or rough, depending on the lighting.

When you are happy with your changes, be sure to click the Save button. If you prefer to throw away all of your changes and keep your last saved appearance, click the Discard button.

Skin Shade and Skin Shininess

Pictured: The Skin Shade settings.

The Skin Shade and Skin Shininess features are available through the Appearance > Details > Skins tab. While these interfaces look the same, each controls a slightly different aspect of your overall skin color.

• Skin Shade refers to the general tint of your chosen skin. For instance, you could use this feature to tint a pale skin deep green for an alien costume contest.

• Skin Shininess refers to the tint of the shine that appears when light hits your skin. To continue our example, you might add a red shine to your alien avatar's green skin for added "otherworldliness" and dimension.

To edit either the Skin Shade or Skin Shininess features, follow the steps below.

1. Open the Outfit window by clicking the Outfit button at the bottom of your screen.

2. Make sure the avatar you want to edit is currently active, or create a new avatar to edit.

3. Click on the Appearance tab, and then navigate to the Details > Skins tab.

4. Click on the skin you want to apply to your avatar.

5. Click on the > arrow located to the right of either the Skin Shade panel or the Skin Shininess panel, or both.

6. Select your tint color(s) using the color palette and HSB sliders, or enter a hex or RGB code into the relevant boxes.

7. When you are done, click the OK button. To discard your changes, click the Cancel button.

The Wardrobe tab

Highlighted: The location of the Wardrobe tab.

Clothing items and other avatar components can be worn or edited through the Wardrobe tab. You can also access and apply morphs to further customize your avatar shape.

Wearing and removing avatar components

Pictured: The Wardrobe tab categories.

The Wardrobe tab contains a number of avatar component categories. You can expand any category by clicking on the > arrow to the right. You can also search for an item using the search field at the top.

To wear an item, follow these steps.

1. Open the Outfit window by clicking the Outfit button at the bottom of your screen.

2. Make sure the avatar you want to edit is currently active, or create a new avatar to edit.

3. Click on the Wardrobe tab.

4. Expand the category you need by clicking the > arrow to the right of its name. For example, you can expand the Accessory category to find any bracelets, glasses, and rings you own, or expand the Top category to find a suit jacket.

5. In the window that appears, locate the item you want to wear. Click on the item to add it to your avatar.

6. When you are satisfied with your changes, click the Save button. To discard your changes, click the Discard button.

To remove an item from your avatar, repeat the steps outlined above. When you click on a currently worn item in the Wardrobe tab, it will be removed from your avatar. Alternatively, you can remove worn items using the Wearing tab.

Editing avatar components

Some avatar components have features that can be edited or customized by the user, which may include:

• Object position, size, and rotation

• Material transparency and texture

• Color or tint

Customization options must be approved by the original item creator or uploader. You can check to see which customization options have been enabled for a particular item using either the Wardrobe or Wearing tabs.

Pictured: An avatar item in the Wardrobe tab. Note the pencil icon in the lower right corner.

To edit an avatar component, follow these steps.

1. Open the Outfit window by clicking the Outfit button at the bottom of your screen.

2. Make sure the avatar you want to edit is currently active, or create a new avatar. If you create a new avatar, add the avatar component you want to edit.

3. Click on the Wardrobe tab or the Wearing tab, and locate the worn item you want to edit.

   1. If you are using the Wardrobe tab, click the pencil icon in the bottom right corner of the avatar component tile to access customization options.

   2. If you are using the Wearing tab, customization options will be displayed automatically.

4. Within the customization options, you may see:

   1. Move, Rotate, and Resize buttons that allow you to customize the item to better fit your avatar.

   2. Material Alpha and Smoothness sliders that allow you to customize the transparency and texture of the item.

   3. Color palettes that allow you to customize the color or tint of the item.

5. Once you're done customizing an item, be sure to click the Save button to save any changes you make. You can also remove the item from your avatar by clicking the Remove button.

Pictured: An example of the customization options available for a particular avatar component.

Using avatar morphs

Pictured: An example of a third-party morph, alongside other avatar components.

Morphs are another way you can apply predefined body shape settings to your avatar. If you own any morphs, you will find them listed under the Wardrobe tab > Bodies category.

You can add or remove a morph just like any other avatar component. Even when wearing a morph, you can still customize your appearance using the Head and Bodies settings available under the Appearance tab.

What is the difference between a preset and a morph? Presets contain different values for the face and body shape sliders available under the Appearance tab, while morphs actually change the default shape of the mesh that makes up your avatar. Imagine that you want to design a classic "gray alien" avatar with oversized black eyes. If you use the Appearance sliders to shape the eyes, then you have created a preset. If you use Unity to create a new mesh head shape that includes the oversized eyes, and apply that to your avatar, then you have created a morph. You can use the Appearance sliders to make further adjustments to any morphs that you apply to your avatar. However, to return to the default human shape, you will need to remove any morphs that you are wearing.

The Wearing tab

Highlighted: The location of the Wearing tab.

The Wearing tab lists all of the items you are currently wearing to create your outfit. Here you can quickly access these items in order to edit or remove them.

Pictured: The Wearing tab. Note the Remove buttons and the edit sliders.

The Outfit List tab

Highlighted: The location of the Outfit List tab.

The Outfit List tab contains all of your saved outfits. Here you can switch between outfits, delete them, or copy the outfit ID number should you need it.

Pictured: The Outfit List tab populated with saved outfits.

Here's a brief overview of the UI.

Button or UI component	Function
Refresh List button	Refreshes the Outfit List.
Add Outfit button	Creates a new default human avatar for customization.
Delete button	Deletes the outfit you are currently wearing.
Search field	Allows you to search for a saved outfit.
Avatar icon (male or female head)	Loads the chosen outfit.
Copy ID button	Copies the ID number that identifies that unique outfit.

Selecting a saved outfit

To select one of your saved outfits to wear or for further editing, follow these steps.

1. Open the Outfit window by clicking the Outfit button at the bottom of your screen.

2. Click the Outfit List tab.

3. Click on the outfit you would like to wear or edit.

4. When you are satisfied with your changes, click the Save button. To discard your changes, click the Discard button.