CREATE YOUR WORLD
Economy

ZEPETO Mannequin

28min

ZEPETO Mannequin is a mannequin API package that supports the ability to try on/sell clothes.

  • You will be able to sell the clothing items you've made in the World.
  • You can create a mannequin wearing a designated costume of a ZEPETO character NPC.
  • You can purchase clothing items by interacting with mannequins or objects.




STEP 1 : Install

Window → Package Manager → and install ZEPETO.World Package 1.21.15 or higher first.

After that, please install the ZEPETO.Module 1.0.8 package.

Document image


❗️ Caution

  • As part of performance improvement, the standalone package has been integrated into ZEPETO.Module 1.0.8 and later version packages.
    • Please delete any previously installed ZEPETO.Mannequin packages.
    • After removing existing packages, please install the ZEPETO.Module package version 1.0.8 or newer.



STEP 2 : Check item ID to set on mannequin

👍 How to verify item ID

  • You can check the URL that pops up when you click on the item product in ZEPETO Studio.

    Document image
    



  • Copy the item ID in the form of a random number, paste it into the Unity Editor, and paste 'CR_' in front of it.

    Document image
    

📘 If it's your first time making an item, please refer to the following guide. [Create your item]



STEP 3 : Setting Up the Mannequin

Mannequin objects can be produced in a total of three ways.

  • Only the items you've made and released can be set and sold in World with ZEPETO Mannequin.
  • Items that have been rejected in the review cannot be sold.
  • Therefore, you must be logged in to Unity in order to use the feature.
  • When you publish a package with mannequin function, you must also be logged in as an editor.
  • When using the ZEPETO Template and ZEPETO Model Type mannequins, the resources consumed are equivalent to the number of ZEPETO characters entering, which may impact optimization.
    • If you need to place many ZEPETO character-shaped mannequins within the world, it is recommended to select the Simple Type mannequin, and then utilize the ZEPETO BaseModel as an object.



STEP 3-1 : Simple Type

Example of using Simple Type Mannequin
Example of using Simple Type Mannequin




It's the most basic. Specific objects can be added as Mannequin children to set the appearance.

1) Adds an object to interact with.

2) Collider must be added in order to interact with the object.

  • isTrigger must be checked. If not checked, it is automatically processed to recognize it as a trigger.
  • When you try to add a mannequin component without adding a collider, a warning window will appear as shown below.
Document image




3) Add mannequin components to the object.

4) Please set the following in the inspector.

  • icon: The hanger icon is displayed by default. You can change it to a custom icon.
  • icon position: If not present, the icon appears in the object position with the mannequin component by default.
    • Input the value after adding position object to make it appear on the desired location.
  • ids: Please fill out the item ID of the clothing item you want to sell.
Document image




5) Add an Empty Object and write the object name as MannequinScript.

6) Add ZEPETO > Typescript and write the script name as MannequinScript.

7) Fill it out as below.

TypeScript


8) After adding the script to the object, press the [▶︎(play)] button to run it.

Document image




STEP 3-2 : ZEPETO Model Type

Example of using ZEPETO Model Type Mannequin
Example of using ZEPETO Model Type Mannequin




You can set the appearance of a mannequin by adding an item ID to the ZEPETO character NPC.

1) Create an Empty Object and name it as Mannequin.

2) Collider must be added in order to interact with the object.

  • isTrigger must be checked. If not checked, it is automatically processed to recognize it as a trigger.

3) Add mannequin components to the object.

4) Please set the following in the inspector.

  • icon: The hanger icon is displayed by default. You can change it to a custom icon.
  • icon position: If not present, the icon appears in the object position with the mannequin component by default.
    • Input the value after adding position object to make it appear on the desired location.
  • ids: Please fill out the item ID of the clothing item you want to sell.
  • pose: You can choose a pose and set it up.
    • In the future, we will provide the pose you want in the form of a pose id.



Document image




👍 If you already have a mannequin script in your scene, you can skip the later steps.

5) Add an Empty Object and write the object name as MannequinScript.

6) Add ZEPETO > Typescript and write the script name as MannequinScript.

7) Fill it out as below.

TypeScript


8) After adding the script to the object, press the [▶︎(play)] button to run it.

Document image




STEP 3-3 : ZEPETO Template Type

Example of using ZEPETO Template Type Mannequin
Example of using ZEPETO Template Type Mannequin




If you input a ZEPETO id, the clothes that the person is wearing will appear as mannequin. However, if it is not the clothes you made, the clothes will not be shown.

1) Create an Empty Object and name it as Mannequin.

2) Collider must be added in order to interact with the object.

  • isTrigger must be checked. If not checked, it is automatically processed to recognize it as a trigger.

3) Add mannequin components to the object.

4) Please set the following in the inspector.

  • icon: The hanger icon is displayed by default. You can change it to a custom icon.
  • icon position: If not present, the icon appears in the object position with the mannequin component by default.
    • Input the value after adding position object to make it appear on the desired location.
  • zepeto id: Please enter a ZEPETO id.
  • pose: You can choose a pose and set it up.
    • In the future, we will provide the pose you want in the form of a pose id.
Document image




👍 If you already have a mannequin script in your scene, you can skip the later steps.

5) Add an Empty Object and write the object name as MannequinScript.

6) Add ZEPETO > Typescript and write the script name as MannequinScript.

7) Fill it out as below.

TypeScript


8) After adding the script to the object, press the [▶︎(play)] button to run it.

Document image




STEP 4 : Using Mannequin Purchases

If you have completed the mannequin setting correctly, an icon will appear for interaction when you enter the Collider area of the mannequin object.

When you click the icon, the purchase window will appear along with the item you set in the mannequin.

Document image


You can try it on by clicking on the item.

  • Items that you already own will be marked with a check mark instead of a price. When you leave the Collider area of the mannequin object, the trying on will be canceled and you will return to your original outfit.
Document image


The following is how the purchase process works according to the test scenario.



STEP 5 : Mannequin Multiplayer Sync

Multiplayer requires synchronizing the costumes worn by other players using the mannequin function.

👍 Basic multiplayer setup should be completed before working on the contents below.

1) Add a client script. Add ZEPETO > Typescript and write the script name as MannequinController.

2) Fill out as shown below.

TypeScript


3) Create Hierarchy > Empty Object and name it Mannequin Controller.

4) Add the script you just wrote to the Mannequin Controller.

Document image




5) Next, write the server code by referring to the contents below in World.Multiplay > index.ts.

TypeScript


6) Turn on the multiplayer server and test it.



Event Function

The event function is available from ZEPETO Mannequin 1.1.0.



ZEPETO.Mannequin.Mannequin

Function

Description

public static OnSelectedItem: UnityEngine_Events.UnityEvent$2<ItemContent, boolean>;

Called when a specific item is selected in the mannequin costume purchase window, and the ItemContent of selected item information and item selection are transferred to the boolean value.

public static OnSucceededPurchaseItems: UnityEngine_Events.UnityEvent$1<ItemContent[]>;

Called when the clothing purchase is completed, and the ItemContent list of purchased item information is brought over.

public static OnFailedPurchaseItems: UnityEngine_Events.UnityEvent$1<ItemContent[]>;

Called when the purchase of a clothing has failed, and the ItemContent list of failed item's information is brought over.

public static OnAppliedItems: UnityEngine_Events.UnityEvent$1<ItemContent[]>;

Called when you choose to wear the item you purchased after the successful purchase of the clothing, and the ItemContent list of the item information you have worn will be brought over.

public static OnOpenedShopUI: UnityEngine_Events.UnityEvent$1<ItemContent[]>;

Called when the mannequin costume purchase window is opened, and the ItemContent list of item information in the purchase window is brought over.

public static OnClosedShopUI: UnityEngine_Events.UnityEvent;

Called when the mannequin costume purchase window is closed.



ZEPETO.Mannequin.BasePreviewer

Function

Description

public OnChanged: UnityEngine_Events.UnityEvent$1<ZEPETO_Mannequin_BasePreviewer.ChangedValue[]>;

It is always called when the equipped item information is changed by pressing the mannequin, and the OnChagedValue list is brought over.

The member variable information for the OnChagedValue class is as follows:

public property : ZepetoPropertyFlag

Clothing Part Information

public id : string

item ID



Mannequin.WorldCamera

If Mannequin.WorldCamera is not set, the camera for the mannequin interaction icon will be set as a camera with low Depth.

If you wish to set a specific camera, you can use Mannequin.WorldCamera to designate one.

Variable

Description

Mannequin.WorldCamera

A variable that allows you to manually set the camera for the mannequin interaction icon.



Below is an example setting of Mannequin.WorldCamera on an existing MannequinScript.

TypeScript






OnContentsLoaded API

A callback has been added that is triggered when all clothing items are fully loaded while using the Mannequin API to equip clothing items.

API




An example of setting OnContentsLoaded in the existing MannequinScript is as follows.

MannequinScript