ADVANCED - Uploading your own outfits
Harness the power of Breakroom's SDK and the Unity game engine to create and upload your own custom clothing items to Breakroom.
If you have access to Unity developer resources, you can install the Breakroom SDK in order to create and upload custom clothing items and avatar components. You can restrict use of these items to your world (hereafter referred to as a grid), or list them for sale in the Breakroom Shop and make them available for users in other worlds. You can also add your branded items to new outfits, or even create special items designed to serve as user rewards or incentives.
Custom items can be uploaded as individual pieces that integrate with our existing human clothing collections, or you can create entirely new and unique costume avatars. The choice is yours.
To get started, locate the clothing template and textures you want to use. You can import clothing made in Blender or another 3D modeling application, and you are also welcome to utilize our library of clothing templates by visiting this page. These templates were designed specifically for our platform, and are completely free to use.
Item templates can be formatted as FBX or OBJ files. Textures can be formatted as PSD, TIFF, JPG, TGA, PNG, GIF, BMP, IFF, or PICT files.
Once you have your clothing template and textures selected, you can import all of your files either by dragging them into the Project Asset panel in Unity, or by clicking the Assets drop-down menu and selecting Import Asset.
Once you've imported your clothing template into Unity, you can drag it into the Hierarchy.
An example item, added to the Hierarchy and currently highlighted.
Drag your texture onto the clothing, and add the normal, height, and occlusion maps as required.
The same highlighted item, with textures applied.
Next, make sure the clothing model is selected in the Hierarchy and click the Add Component button. Search for "clothing," and add the Clothing Item Settings component to the model.
The same highlighted item, with the Clothing Item Settings component added.
In the Clothing Item Settings component, we will now set our skeleton. The item should be set to the same skeleton for which it was rigged in the original 3D software. You have the choice of unisex, base male, and base female skeletons.
The Clothing Items Setting, with the Base Female skeleton selected.
Expand the Clothing tab by clicking the arrow located to the left, and select the clothing type. As we are uploading clothing, we will select Rigged Clothing.
The Clothing tab expanded, and Rigged Clothing selected as the clothing type.
Expand the Fittings & Slots tab by clicking the arrow located to the left. You will be asked to choose which layer the clothing item will occupy. You can visualize virtual clothing layers just as you would physical clothing layers—for example, layering a t-shirt under a pullover, with the t-shirt tucked under the pullover.
Underwear is the default setting, and the layer that sits closest to the avatar skin. Each layer. working downwards through the menu, will be laid on top of the previous layer.
In this tab, you will also select the slot your clothing will occupy on the avatar. The slot and the layer work in conjunction with each other in the avatar wardrobe. You can only wear one item per layer/slot—trying to wear two items in the same layer/slot will remove the first item that was worn. Selecting one or more slots will add a wireframe avatar to the scene view. This can be used to ensure that your clothing is positioned correctly on the avatar.
Care should be taken to only check the slots that are required. For example, a t-shirt would occupy the upper chest and back, leaving other slots open for use.
The item positioned on a wireframe avatar. A layer and several slots have been selected.
Next, we will take a look at the Materials & Patterns tab located under the Clothing Item Settings component. You can expand this tab by clicking the arrow located to the left.
If you are using only one material for your clothing item, you will need to check the box beside the "Keep Materials Always" option. Failing to enable this option will cause the material to be removed upon processing.
The Materials & Patterns tab expanded, and "Keep Materials Always" enabled.
Finally, you will need to auto-rig and weight your clothing in preparation for upload. This can be achieved by expanding the Automatic Skin Weighting tab, and then clicking the Convert to Skinned button.
The Automatic Skin Weighting tab, with the Covert to Skinned button highlighted.
When rigging is complete, you'll notice that the Automatic Skin Weighting tab will update to detail bone counts and bind counts, and offer the ability to re-rig if necessary.
The expanded Automatic Skin Weighting tab, updated with rigging information.
You will also see that the Finalize/Prepare button has changed to a bright cyan. This tells us that the clothing item is now ready for finalization. Click the Finalize/Prepare button to complete the clothing setup.
It is normal for the clothing preparation to take a few minutes, depending on the complexity of the clothing item.
The location of the Finalize/Prepare button.
In order to upload the finished clothing item to your grid, you will need to add the Virtual Good component. Select your clothing item in the Hierarchy, and then click the Add Component button in the Inspector window. Search for "virtual good," and add the Virtual Good component.
A finished clothing item, with the Virtual Good component added.
From here, you will need to navigate through the Virtual Good component tabs and edit certain information to complete setup of your clothing item. Here are the key steps you will need to take.
In the Virtual Good component, under the Basic tab, you will need to select the clothing type and the clothing category. The clothing category you select will influence where your item appears in your users' inventories and/or where your item is displayed within the Breakroom Shop. For example, selecting the Clothes/Tops/Shirts category for the vest pictured above will file the item under the Tops tab of the Outfit window, and also under the Tops tab of the Shop should you decide to list your item for sale.
There are additional details under the Basic tab that you will need to provide:
- Name: The item's name.
- Description: A brief description of the item. This will be used to describe your item in the Shop, so it's an excellent place to list your item's features.
- Brand: Your clothing brand name.
Here a clothing item has been named, described, and branded.
An example of how the Pricing tab may appear.
If you want to sell your item in the Breakroom Shop, you will need to enter your desired price in Silver or Gold under the Pricing tab. (You can list a price in both currencies if you wish.) There are also several other options that you can enable or disable as the seller.
If you do not intend to sell your item, do not enter a price into either the Price Gold or Price Silver fields. Instead, be sure to check the box beside the "Not for Sale" option.
The Icons tab allows you to associate images with your item, such as a store image, inventory image, or brand logo. Click on the Select buttons to pick the images you would like to use.
The Icons tab.
You can use the Take Screenshots button located under the Icons tab to auto-generate images for your item based on the Unity model. You will need to finish prefabbing your item before this function will work. See the section that follows about prefabbing and uploading your clothing item.
The Author tab allows you to add relevant author information, such as the developer name and copyright.
The Author tab.
If in doubt, leave the Unique Status drop-down menu set to Available Elsewhere, enter your name into the Developer Name field (as the grid Owner), and set the Copyright field to your company name.
When uploading a clothing item intended for sale, you do not need to make any changes to the information listed under the Upload tab. If you want to upload a clothing item to your grid alone, however, you will need to specify your grid ID. You can obtain your grid ID from multiple places.
- 1.Navigate to your Dashboard.
- 2.Look in the top left corner of the screen. You will see your world name followed by an ID number. This ID number is your grid ID.
- 1.Navigate to your Dashboard.
- 2.Click the Advanced button at the top of the page. This will take you to Curator.
- 3.In the Curator window that appears, locate the Grid listing to your world. Your grid ID will be displayed next to the world name.
An example of what you might see in Curator.
Now that you have your grid ID, it can be entered into the Grid ID field under the Upload tab as shown.
The Upload tab, with the grid number entered into the appropriate field.
To complete setup on your clothing item, you will need to prefab it by dragging the model from the Hierarchy to the Project Asset panel. Once the item is prefabbed, you can right click on the clothing item in the Project Asset panel and select Upload to Sinespace to upload your item.
You will need to drag your completed model to the Project Asset folder to prefab it.