Mannequin ZEPETO

33 min

ZEPETO Mannequin est une API de mannequin qui permet d'essayer et de vendre des vêtements.

Vous pourrez vendre les vêtements que vous avez fabriqués dans le monde.
Vous pouvez créer un mannequin portant le costume d'un PNJ de ZEPETO.
Vous pouvez acheter des vêtements en interagissant avec des mannequins ou des objets.

https://www.youtube.com/embed/sag4H7B5oM4

ÉTAPE 1 : Installer

Window → Package Manager → et installez d'abord ZEPETO.World Package 1.21.15 ou supérieur.

Après cela, veuillez installer le package ZEPETO.Module 1.0.8.

❗️ Attention

Dans le cadre de l'amélioration des performances, le package autonome a été intégré aux packages ZEPETO.Module 1.0.8 et versions ultérieures.
- Veuillez supprimer tous les packages ZEPETO.Mannequin précédemment installés.
- Après avoir supprimé les packages existants, veuillez installer le package ZEPETO.Module version 1.0.8 ou plus récente.

ÉTAPE 2 : Vérifier l'identification de l'article à placer sur le mannequin

👍 Comment vérifier l'identifiant d'un article

Vous pouvez vérifier l'URL qui apparaît lorsque vous cliquez sur le produit de l'article dans ZEPETO Studio.

Copiez l'ID de l'élément sous la forme d'un nombre aléatoire, collez-le dans l'éditeur Unity et collez « CR_ » devant.

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

ÉTAPE 3 : Mise en place du mannequin

Les objets mannequins peuvent être produits de trois manières au total.

❗️ Attention

Seuls les articles que vous avez fabriqués et commercialisés peuvent être mis en place et vendus dans World with ZEPETO Mannequin.
Les articles qui ont été rejetés lors de l'examen ne peuvent pas être vendus.
Par conséquent, vous devez être connecté à Unity pour pouvoir utiliser cette fonctionnalité.
Lorsque vous publiez un paquet avec la fonction mannequin, vous devez également être connecté en tant qu'éditeur.
Lors de l'utilisation de mannequins de modèle ZEPETO ou de type de modèle ZEPETO, le nombre de mannequins peut consommer autant de ressources que le nombre de caractères ZEPETO saisis, ce qui peut affecter l'optimisation.
- Si vous devez placer de nombreux mannequins en forme de personnages Zepeto dans le monde, nous vous recommandons de sélectionner un mannequin de type simple et d'utiliser ZEPETO BaseModel comme objet.

ÉTAPE 3-1 : Type simple

C'est le plus simple. Des objets spécifiques peuvent être ajoutés en tant qu'enfants mannequins pour définir l'apparence.

Ajoute un objet avec lequel interagir.
Le collisionneur doit être ajouté afin d'interagir avec l'objet.

isTrigger doit être vérifié. S'il n'est pas vérifié, il est automatiquement traité pour être reconnu comme un déclencheur.
Lorsque vous essayez d'ajouter un composant mannequin sans ajouter de collisionneur, une fenêtre d'avertissement apparaît comme indiqué ci-dessous.

Ajouter des éléments de mannequin à l'objet.
Veuillez définir les éléments suivants dans l'inspecteur.
- icône : L'icône du cintre est affichée par défaut. Vous pouvez la remplacer par une icône personnalisée.
- position de l'icône : Si elle n'est pas présente, l'icône apparaît par défaut dans la position de l'objet avec le composant mannequin.
  - Saisissez la valeur après avoir ajouté l'objet de position pour qu'il apparaisse à l'endroit souhaité.
- ids : Veuillez indiquer l'identifiant de l'article que vous souhaitez vendre.

Ajouter un objet vide et écrire le nom de l'objet comme MannequinScript.
Ajouter ZEPETO > ; Typescript et écrire le nom du script comme MannequinScript.
Remplissez-le comme suit.

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { ZepetoPlayers, SpawnInfo } from 'ZEPETO.Character.Controller';
import { WorldService } from 'ZEPETO.World';
import { ItemContentsRequest, Mannequin, MannequinComponent, MannequinInteractable, MannequinPreviewer } from 'ZEPETO.Mannequin';
import { Object } from 'UnityEngine';

export default class MannequinScript extends ZepetoScriptBehaviour {

    private _previewer: MannequinPreviewer;

    Start() {
        // Code that creates a ZEPETO character based on the logged in ID  
        // ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, SpawnInfo.Default, true);
      
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            const character = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            // Add Mannequin Interactable Component
            character.gameObject.AddComponent<MannequinInteractable>();
        });

        // Find all Mannequin components
        const mannequins = Object.FindObjectsOfType<MannequinComponent>();

        mannequins.forEach(m => {
            // Enter the Collider
            m.onActive.AddListener(contents => {
                Mannequin.OpenUI(contents);
                const zepetoContext = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character.Context;
                this._previewer = new MannequinPreviewer(zepetoContext, contents);
                this._previewer.PreviewContents();
            });

            // Exit the Collider
            m.onCancel.AddListener(() => {
                Mannequin.CloseUI();
                this._previewer?.ResetContents();
            });
        });
    }
}

Après avoir ajouté le script à l'objet, appuyez sur le bouton [▶︎(play)] pour l'exécuter.

ÉTAPE 3-2 : Type de modèle ZEPETO

Vous pouvez définir l'apparence d'un mannequin en ajoutant un ID d'objet au PNJ du personnage ZEPETO.

Create an Empty Object and name it as Mannequin.
Le collisionneur doit être ajouté afin d'interagir avec l'objet.

isTrigger doit être vérifié. S'il n'est pas vérifié, il est automatiquement traité pour être reconnu comme un déclencheur.

Ajouter des éléments de mannequin à l'objet.
Veuillez définir les éléments suivants dans l'inspecteur.
- icône : L'icône du cintre est affichée par défaut. Vous pouvez la remplacer par une icône personnalisée.
- position de l'icône : Si elle n'est pas présente, l'icône apparaît par défaut dans la position de l'objet avec le composant mannequin.
  - Saisissez la valeur après avoir ajouté l'objet de position pour qu'il apparaisse à l'endroit souhaité.
- ids : Veuillez indiquer l'identifiant de l'article que vous souhaitez vendre.
- pose : vous pouvez choisir une pose et la configurer.
  - À l'avenir, nous fournirons la pose souhaitée sous la forme d'un identifiant de pose.

👍 Si vous avez déjà un script de mannequin dans votre scène, vous pouvez sauter les étapes suivantes.

Ajouter un objet vide et écrire le nom de l'objet comme MannequinScript.
Ajouter ZEPETO > ; Typescript et écrire le nom du script comme MannequinScript.
Remplissez-le comme suit.

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { ZepetoPlayers, SpawnInfo } from 'ZEPETO.Character.Controller';
import { WorldService } from 'ZEPETO.World';
import { ItemContentsRequest, Mannequin, MannequinComponent, MannequinInteractable, MannequinPreviewer } from 'ZEPETO.Mannequin';
import { Object } from 'UnityEngine';

export default class MannequinScript extends ZepetoScriptBehaviour {

    private _previewer: MannequinPreviewer;

    Start() {
        // Code that creates a ZEPETO character based on the logged in ID  
        // ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, SpawnInfo.Default, true);
      
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            const character = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            // Add Mannequin Interactable Component
            character.gameObject.AddComponent<MannequinInteractable>();
        });

        // Find all Mannequin components
        const mannequins = Object.FindObjectsOfType<MannequinComponent>();

        mannequins.forEach(m => {
            // Enter the Collider
            m.onActive.AddListener(contents => {
                Mannequin.OpenUI(contents);
                const zepetoContext = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character.Context;
                this._previewer = new MannequinPreviewer(zepetoContext, contents);
                this._previewer.PreviewContents();
            });

            // Exit the Collider
            m.onCancel.AddListener(() => {
                Mannequin.CloseUI();
                this._previewer?.ResetContents();
            });
        });
    }
}

Après avoir ajouté le script à l'objet, appuyez sur le bouton [▶︎(play)] pour l'exécuter.

STEP 3-3 : ZEPETO Template Type

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.

Create an Empty Object and name it as Mannequin.
Le collisionneur doit être ajouté afin d'interagir avec l'objet.

isTrigger doit être vérifié. S'il n'est pas vérifié, il est automatiquement traité pour être reconnu comme un déclencheur.

Ajouter des éléments de mannequin à l'objet.
Veuillez définir les éléments suivants dans l'inspecteur.
- icône : L'icône du cintre est affichée par défaut. Vous pouvez la remplacer par une icône personnalisée.
- position de l'icône : Si elle n'est pas présente, l'icône apparaît par défaut dans la position de l'objet avec le composant mannequin.
  - Saisissez la valeur après avoir ajouté l'objet de position pour qu'il apparaisse à l'endroit souhaité.
- zepeto id: Please enter a ZEPETO id.
- pose : vous pouvez choisir une pose et la configurer.
  - À l'avenir, nous fournirons la pose souhaitée sous la forme d'un identifiant de pose.

👍 Si vous avez déjà un script de mannequin dans votre scène, vous pouvez sauter les étapes suivantes.

Ajouter un objet vide et écrire le nom de l'objet comme MannequinScript.
Ajouter ZEPETO > ; Typescript et écrire le nom du script comme MannequinScript.
Remplissez-le comme suit.

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { ZepetoPlayers, SpawnInfo } from 'ZEPETO.Character.Controller';
import { WorldService } from 'ZEPETO.World';
import { ItemContentsRequest, Mannequin, MannequinComponent, MannequinInteractable, MannequinPreviewer } from 'ZEPETO.Mannequin';
import { Object } from 'UnityEngine';

export default class MannequinScript extends ZepetoScriptBehaviour {

    private _previewer: MannequinPreviewer;

    Start() {
        // Code that creates a ZEPETO character based on the logged in ID  
        // ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, SpawnInfo.Default, true);

        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            const character = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            // Add Mannequin Interactable Component
            character.gameObject.AddComponent<MannequinInteractable>();
        });

        // Find all Mannequin components
        const mannequins = Object.FindObjectsOfType<MannequinComponent>();

        mannequins.forEach(m => {
            // Enter the Collider
            m.onActive.AddListener(contents => {
                Mannequin.OpenUI(contents);
                const zepetoContext = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character.Context;
                this._previewer = new MannequinPreviewer(zepetoContext, contents);
                this._previewer.PreviewContents();
            });

            // Exit the Collider
            m.onCancel.AddListener(() => {
                Mannequin.CloseUI();
                this._previewer?.ResetContents();
            });
        });
    }
}

Après avoir ajouté le script à l'objet, appuyez sur le bouton [▶︎(play)] pour l'exécuter.

ÉTAPE 4 : Utilisation des achats de mannequins

Si vous avez correctement paramétré le mannequin, une icône d'interaction apparaît lorsque vous entrez dans la zone de collision de l'objet mannequin.

Lorsque vous cliquez sur l'icône, la fenêtre d'achat apparaît avec l'article que vous avez placé dans le mannequin.

Vous pouvez l'essayer en cliquant sur l'article.

Lorsque vous quittez la zone de collision de l'objet mannequin, l'essayage est annulé et vous retrouvez votre tenue d'origine.

Voici comment se déroule le processus d'achat selon le scénario de test.

Environnement de test	Processus d'achat
Achat à partir de l'éditeur Unity	Pendant le jeu, la tenue sera changée si l'achat est réussi. Cependant, à la fin de la partie, elle reviendra à son état d'origine.
Achats dans l'environnement de test du code QR mobile	Étant donné que vous vous connectez au serveur réel pour tester, les vêtements seront changés une fois l'achat réussi et les vêtements changés seront conservés lorsque vous quitterez le monde. De plus, si l'achat est réussi, l'article sera acheté sur le serveur réel, donc les Zems détenus par le compte réel seront déduits et vous aurez l'article de costume. Les vêtements achetés ne peuvent pas être jetés ou supprimés arbitrairement, veuillez donc acheter soigneusement lors des tests.
Achat après avoir enregistré le paquet sur ZEPETO Studio et s'être connecté via le lien de test.	Étant donné que vous vous connectez au serveur réel pour tester, les vêtements seront changés une fois l'achat réussi et les vêtements changés seront conservés lorsque vous quitterez le monde. De plus, si l'achat est réussi, l'article sera acheté sur le serveur réel, donc les Zems détenus par le compte réel seront déduits et vous aurez l'article de costume. Les vêtements achetés ne peuvent pas être jetés ou supprimés arbitrairement, veuillez donc acheter soigneusement lors des tests.

ÉTAPE 5 : Synchronisation multijoueurs du Mannequin

Le mode multijoueur nécessite de synchroniser les costumes portés par les autres joueurs à l'aide de la fonction mannequin.

👍 La configuration de base du mode multijoueur doit être terminée avant d'aborder le contenu ci-dessous.

Ajouter un script client. Ajouter ZEPETO > ; Typescript et écrire le nom du script comme MannequinController.
Remplir comme indiqué ci-dessous.

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Room } from 'ZEPETO.Multiplay';
import { ClothesPreviewer, ItemContent, ItemContentsRequest, Mannequin, MannequinComponent, MannequinInteractable, MannequinPreviewer } from 'ZEPETO.Mannequin';
import { ZepetoContext } from 'Zepeto';
import { ZepetoPlayer, ZepetoPlayers } from 'ZEPETO.Character.Controller';
import { GameObject, Object, Canvas, WaitForSecondsRealtime, LayerMask } from 'UnityEngine';
import { Player } from 'ZEPETO.Multiplay.Schema';
import { ZepetoWorldMultiplay } from 'ZEPETO.World';
 
class CharacterItem {
    property: string;
    id: string;
}
 
class ChangedItem {
    sessionId: string;
    characterItems: CharacterItem[];
}
 
export default class MannequinController extends ZepetoScriptBehaviour {
    private MESSAGE_TYPE = {
        OnChangedItem: "OnChangedItem",
        SyncChangedItem: "SyncChangedItem",
        CheckChangedItem: "CheckChangedItem"
    }
 
    private multiplay: ZepetoWorldMultiplay;
    private _room: Room;
    private _previewer: MannequinPreviewer
    private _context: ZepetoContext
 
    private _userZepetoContexts: Map<string, ZepetoContext> = new Map<string, ZepetoContext>();
    private _currentMannequinComponent: MannequinComponent = null;
    private _selectMannequinComponent: MannequinComponent = null;
    private _isOpenMannequinUI: boolean = false;
 
    private _basicClothString = "basicCloth" as const;
 
    Start() {
        this.multiplay = Object.FindObjectOfType<ZepetoWorldMultiplay>();
 
        Mannequin.OnOpenedShopUI.AddListener((item) => {
            // When you click OpenShopButton
            this.OpenedShopUI(item)
        });
        Mannequin.OnClosedShopUI.AddListener(() => {
            // When you click CloseShopButton
            this.ClosedShopUI()
        });
        Mannequin.OnSelectedItem.AddListener((itemcontent: ItemContent, select: boolean) => {
            // Action when item is selected
        });
 
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            const myPlayer = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer;
 
            // Mannequin
            const character = myPlayer.character;
            character.gameObject.AddComponent<MannequinInteractable>();
 
            console.log("local _context set");
            this._context = character.Context;
 
            const mannequins = Object.FindObjectsOfType<MannequinComponent>()
            mannequins.forEach(mannequin => {
                // When you enter mannequin collider
                mannequin.onActive.AddListener(contents => {
                    if (this._currentMannequinComponent != null && this._currentMannequinComponent == mannequin) {
                        return;
                    }
 
                    if (contents == null || contents.length == 0) {
                        console.log("No mannequin data");
                        return;
                    }
 
                    if (this._isOpenMannequinUI) {
                        this.BreakMannequin();
                    }
 
                    this._selectMannequinComponent = mannequin;
                    Mannequin.OpenUI(contents);
                    console.log("onActive");
                });
 
                // [Option] When you leave mannequin collider
                mannequin.onCancel.AddListener( () => {
                    if (this._currentMannequinComponent == null || this._currentMannequinComponent != mannequin) {
                        return;
                    }
 
                    this.BreakMannequin();
                    console.log("onCancel");
                });
 
                let iconCanvas = mannequin.gameObject.GetComponentInChildren<Canvas>(true);
                if (iconCanvas != null) {
                    iconCanvas.gameObject.layer = LayerMask.NameToLayer("UI");
                }
            });
        });
 
        ZepetoPlayers.instance.OnAddedPlayer.AddListener((sessionId: string) => {
            if (ZepetoPlayers.instance.GetPlayer(sessionId).isLocalPlayer) {
                return;
            }
            const userContext = ZepetoPlayers.instance.GetPlayer(sessionId).character.Context;
            this._userZepetoContexts.set(sessionId, userContext);
            this._room.Send(this.MESSAGE_TYPE.CheckChangedItem, sessionId);
        });
        this.multiplay.RoomJoined += (room: Room) => {
            this._room = room;
            this.AddMessageHandler();
        };
    }
 
    private AddMessageHandler() {
        // [Option] Synchronize each player's clothes
        this._room.AddMessageHandler<ChangedItem>(this.MESSAGE_TYPE.SyncChangedItem, message => {
            console.log("syncChangedItem");
            if (message == null) {
                return;
            }
 
            if (false == this._userZepetoContexts.has(message.sessionId)) {
                return;
            }
 
            let itemContents: ItemContent[] = [];
 
            for (const characterItem of message.characterItems) {
                let itemContent: ItemContent = new ItemContent();
                itemContent.id = characterItem.id;
                itemContent.property = parseInt(characterItem.property);
 
                if (itemContent.id == this._basicClothString) {
                    itemContent.id = "";
                }
 
                itemContents.push(itemContent);
            }
            let clothesPreviewer:ClothesPreviewer = new ClothesPreviewer(this._userZepetoContexts.get(message.sessionId),itemContents);
            clothesPreviewer.PreviewContents();
        });
    }
 
    private ClosedShopUI() {
        this._currentMannequinComponent = null;
        this._isOpenMannequinUI = false;
    }
 
    private OpenedShopUI(items: ItemContent[]) {
        this._isOpenMannequinUI = true;
        this._currentMannequinComponent = this._selectMannequinComponent;
 
        this._previewer = new MannequinPreviewer(this._context, items);
        this._previewer.OnChanged.AddListener((changeValues) => {
            let characterItems: CharacterItem[] = [];
 
            for (const changeValue of changeValues) {
                let characterItem: CharacterItem = new CharacterItem();
                characterItem.id = changeValue.id;
                characterItem.property = changeValue.property.toString();
 
                if (characterItem.id == "") {
                    characterItem.id = this._basicClothString;
                }
                characterItems.push(characterItem);
            }
            this._room.Send(this.MESSAGE_TYPE.OnChangedItem, characterItems);
        });
 
        this._previewer.PreviewContents();
    }
 
    public BreakMannequin() {
        Mannequin.CloseUI();
        if (this._previewer) {
            this._previewer.ResetContents();
            this._previewer = null;
        }
 
        this._currentMannequinComponent = null;
        this._isOpenMannequinUI = false;
    }
 
}

Créer une hiérarchie > ; Objet vide et le nommer Mannequin Controller.
Ajoutez le script que vous venez d'écrire au Mannequin Controller.

Ensuite, écrivez le code du serveur en vous référant au contenu ci-dessous dans World.Multiplay > ; index.ts.

import { Sandbox, SandboxOptions, SandboxPlayer } from 'ZEPETO.Multiplay';
import { Player, Transform, Vector3 } from 'ZEPETO.Multiplay.Schema';
 
class CharacterItem {
    property: string;
    id: string;
}
 
class ChangedItem {
    sessionId: string;
    characterItems: CharacterItem[];
}
 
enum Cloth {
    TOP = "19",
    BOTTOM = "20" ,
    DRESS = "22"
}
 
export default class extends Sandbox {
    private MESSAGE_TYPE = {
        OnChangedItem: "OnChangedItem",
        SyncChangedItem: "SyncChangedItem",
        CheckChangedItem: "CheckChangedItem"
    }
     
    // Map<sessionId, Map<CharacterItem.property, CharacterItem.id>>
    private ChangedItems: Map<string, Map<string, string>>;
 
    onCreate(options: SandboxOptions) {
        // Called when the Room object is created.
        // Handle the state or data initialization of the Room object.
        this.onMessage("onChangedTransform", (client, message) => {
            const player = this.state.players.get(client.sessionId);
 
            const transform = new Transform();
            transform.position = new Vector3();
            transform.position.x = message.position.x;
            transform.position.y = message.position.y;
            transform.position.z = message.position.z;
 
            transform.rotation = new Vector3();
            transform.rotation.x = message.rotation.x;
            transform.rotation.y = message.rotation.y;
            transform.rotation.z = message.rotation.z;
 
            player.transform = transform;
        });
        this.onMessage("onChangedState", (client, message) => {
            const player = this.state.players.get(client.sessionId);
            player.state = message.state;
            player.subState = message.subState; // Character Controller V2
        });
 
        // Mannequin server code
        this.ChangedItems = new Map<string, Map<string, string>>();
 
        this.onMessage<CharacterItem[]>(this.MESSAGE_TYPE.OnChangedItem, (client, message) => {
            // Overwrite clothes and set new parts
            if (this.ChangedItems.has(client.userId)) {
                const changedItemMap = this.ChangedItems.get(client.userId);
                for (const characterItem of message) {
                    if (characterItem.property == Cloth.DRESS) {
                        // In the case of a dress (22), remove the top (19) and bottom (20)
                        if (changedItemMap.has(Cloth.TOP)) {
                            changedItemMap.delete(Cloth.TOP);
                        }
                        if (changedItemMap.has(Cloth.BOTTOM)) {
                            changedItemMap.delete(Cloth.BOTTOM);
                        }
                    } else if (characterItem.property == Cloth.TOP || characterItem.property == Cloth.BOTTOM) {
                        // Remove the dress if it is a top (19) or bottom (20)
                        if (changedItemMap.has(Cloth.DRESS)) {
                            changedItemMap.delete(Cloth.DRESS);
                        }
                    }
 
                    changedItemMap.set(characterItem.property,characterItem.id);
                    console.log(`OnChangedItem old ${client.userId} : ${characterItem.property} // ${characterItem.id}`);
                }
            } else {
                // Initial registration
                let changedItemMap: Map<string,string> = new Map<string, string>();
                for (const characterItem of message) {
                    changedItemMap.set(characterItem.property,characterItem.id);
                }
                this.ChangedItems.set(client.sessionId,changedItemMap);
            }
 
            let changedItem: ChangedItem = new ChangedItem();
            changedItem.sessionId = client.sessionId;
            changedItem.characterItems = message;
 
            console.log(`OnChangedItem : ${changedItem.sessionId}`);
            for (const characterItem of changedItem.characterItems) {
                console.log(` ::: ${characterItem.property} - ${characterItem.id} `);
            }
            this.broadcast(this.MESSAGE_TYPE.SyncChangedItem, changedItem, {except: client});
        });
 
        this.onMessage<string>(this.MESSAGE_TYPE.CheckChangedItem,(client, message) => {
            if (false == this.ChangedItems.has(message)) {
                return;
            }
 
            let changedItem: ChangedItem = new ChangedItem();
            changedItem.sessionId = client.sessionId;
            changedItem.characterItems = [];
 
            for (const property of this.ChangedItems.get(message).keys()) {
                let characterItem: CharacterItem = new CharacterItem();
                characterItem.property = property;
                characterItem.id = this.ChangedItems.get(message).get(property);
 
                changedItem.characterItems.push(characterItem);
            }
 
            client.send<ChangedItem>(this.MESSAGE_TYPE.SyncChangedItem, changedItem );
        });
 
    }
 
    onJoin(client: SandboxPlayer) {
 
        // Create the player object defined in schemas.json and set the initial value.
        console.log(`[OnJoin] sessionId : ${client.sessionId}, HashCode : ${client.hashCode}, userId : ${client.userId}`)
 
        const player = new Player();
        player.sessionId = client.sessionId;
      
        if (client.userId) {
            player.zepetoUserId = client.userId;
        }
 
        // Manage the Player object using sessionId, a unique key value of the client object.
        // The client can check the information about the player object added by set by adding the add_OnAdd event to the players object.
        this.state.players.set(client.sessionId, player);
    }
 
    async onLeave(client: SandboxPlayer, consented?: boolean) {
 
        // By setting allowReconnection, it is possible to maintain connection for the circuit, but clean up immediately in the basic guide.
        // The client can check the information about the deleted player object by adding the add_OnRemove event to the players object.
        this.state.players.delete(client.sessionId);
        if (this.ChangedItems.has(client.sessionId)) {
            this.ChangedItems.delete(client.sessionId);
        }
    }
}

Activez le serveur multijoueur et testez-le.

Fonction de l'événement

La fonction événement est disponible à partir de ZEPETO Mannequin 1.1.0.

ZEPETO.Mannequin.Mannequin

Fonction	Description
public static OnSelectedItem: UnityEngine_Events.UnityEvent$2<ItemContent, boolean>;	Appelé lorsqu'un article spécifique est sélectionné dans la fenêtre d'achat du costume de mannequin, et que le contenu de l'article sélectionné (ItemContent) et la sélection de l'article sont transférés vers la valeur booléenne.
public static OnSucceededPurchaseItems: UnityEngine_Events.UnityEvent$1<ItemContent[]>;	Appelé lorsque l'achat de vêtements est terminé et que la liste ItemContent des informations sur les articles achetés est transférée.
public static OnFailedPurchaseItems: UnityEngine_Events.UnityEvent$1<ItemContent[]>;	Appelé lorsque l'achat d'un vêtement a échoué et que la liste ItemContent des informations relatives à l'article échoué est reprise.
public static OnAppliedItems: UnityEngine_Events.UnityEvent$1<ItemContent[]>;	Appelé lorsque vous choisissez de porter l'article que vous avez acheté après l'achat réussi du vêtement, et la liste ItemContent des informations sur l'article que vous avez porté sera affichée.
public static OnOpenedShopUI: UnityEngine_Events.UnityEvent$1<ItemContent[]>;	Appelé lorsque la fenêtre d'achat du costume de mannequin est ouverte et que la liste ItemContent des informations sur l'article dans la fenêtre d'achat est transférée.
public static OnClosedShopUI: UnityEngine_Events.UnityEvent;	Appelé lorsque la fenêtre d'achat du costume de mannequin est fermée.

ZEPETO.Mannequin.BasePreviewer

Fonction	Description
public OnChanged: UnityEngine_Events.UnityEvent$1<ZEPETO_Mannequin_BasePreviewer.ChangedValue[]>;	Elle est toujours appelée lorsque les informations sur l'objet équipé sont modifiées en appuyant sur le mannequin, et que la liste OnChagedValue est reprise.

Les informations sur les variables membres de la classe OnChagedValue sont les suivantes :

propriété publique : ZepetoPropertyFlag	Informations sur les pièces d'habillement
public id : string	ID de l'article

Mannequin.WorldCamera

Si Mannequin.WorldCamera n'est pas défini, la caméra de l'icône d'interaction avec le mannequin sera définie comme une caméra à faible profondeur.

Si vous souhaitez définir une caméra spécifique, vous pouvez utiliser Mannequin.WorldCamera pour en désigner une.

Variable	Description
Mannequin.WorldCamera	Une variable qui vous permet de régler manuellement la caméra pour l'icône d'interaction avec le mannequin.

Voici un exemple de paramétrage de Mannequin.WorldCamera sur un MannequinScript existant.

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { ZepetoPlayers, SpawnInfo } from 'ZEPETO.Character.Controller';
import { WorldService } from 'ZEPETO.World';
import { ItemContentsRequest, Mannequin, MannequinComponent, MannequinInteractable, MannequinPreviewer } from 'ZEPETO.Mannequin';
import { Object } from 'UnityEngine';
 
export default class MannequinScript extends ZepetoScriptBehaviour {
     
    private _previewer: MannequinPreviewer;
 
    Start() {
        // Code that creates a ZEPETO character based on the logged in ID 
        // ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, SpawnInfo.Default, true);
 
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            const character = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            // Add Mannequin Interactable Component
            character.gameObject.AddComponent<MannequinInteractable>();
             
            // Code to set up the Mannequin Icon World Canvas Camera as the ZEPETO Camera
            Mannequin.WorldCamera = ZepetoPlayers.instance.LocalPlayer.zepetoCamera.camera;
        });
 
        // Find all Mannequin components
        const mannequins = Object.FindObjectsOfType<MannequinComponent>();
 
        mannequins.forEach(m => {
            // Enter the Collider
            m.onActive.AddListener(contents => {
                Mannequin.OpenUI(contents);
                const zepetoContext = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character.Context;
                this._previewer = new MannequinPreviewer(zepetoContext, contents);
                this._previewer.PreviewContents();
            });
 
            // Exit the Collider
            m.onCancel.AddListener(() => {
                Mannequin.CloseUI();
                this._previewer?.ResetContents();
            });
        });
    }
}

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.

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

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

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { ZepetoPlayers, SpawnInfo } from 'ZEPETO.Character.Controller';
import { WorldService } from 'ZEPETO.World';
import { ItemContentsRequest, Mannequin, MannequinComponent, MannequinInteractable, MannequinPreviewer } from 'ZEPETO.Mannequin';
import { Object } from 'UnityEngine';
 
export default class MannequinScript extends ZepetoScriptBehaviour {
 
    private _previewer: MannequinPreviewer;
 
    Start() {
        // Code that creates a ZEPETO character based on the logged in ID 
        // ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, SpawnInfo.Default, true);
 
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            const character = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            // Add Mannequin Interactable Component
            character.gameObject.AddComponent<MannequinInteractable>();
        });
 
        // Find all Mannequin components
        const mannequins = Object.FindObjectsOfType<MannequinComponent>();
 
        mannequins.forEach(m => {
            // Enter the Collider
            m.onActive.AddListener(contents => {
                Mannequin.OpenUI(contents);
                const zepetoContext = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character.Context;
                this._previewer = new MannequinPreviewer(zepetoContext, contents);
 
                // Adding listener to OnContentsLoaded event
                this._previewer.OnContentsLoaded.AddListener((changedValues)=>{
                    console.log('Contents loaded:', changedValues);
                });
 
                this._previewer.PreviewContents();
            });
 
            // Exit the Collider
            m.onCancel.AddListener(() => {
                Mannequin.CloseUI();
                this._previewer?.ResetContents();
            });
        });
    } 
}