ZEPETO Mannequin

33 mnt

ZEPETO Mannequin adalah paket API mannequin yang mendukung kemampuan untuk mencoba/menjual pakaian.

Anda akan bisa menjual item pakaian yang Anda buat di Dunia.
Anda bisa membuat mannequin yang mengenakan kostum khusus NPC karakter ZEPETO.
Anda bisa membeli item pakaian dengan berinteraksi dengan mannequin atau objek.

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

STEP 1 : Instal

Window → Package Manager → dan instal ZEPETO.World Package 1.21.15 atau lebih tinggi terlebih dahulu.

Setelah itu silahkan install paket ZEPETO.Module 1.0.8.

❗️ Perhatian

Sebagai bagian dari peningkatan kinerja, paket mandiri telah diintegrasikan ke dalam paket ZEPETO.Module 1.0.8 dan versi yang lebih baru.
- Silakan hapus semua paket ZEPETO.Mannequin yang diinstal sebelumnya.
- Setelah menghapus paket yang ada, silakan instal paket ZEPETO.Module versi 1.0.8 atau lebih baru.

STEP 2 : Periksa ID item yang akan dipasang pada manekin

👍 Cara mengetahui item ID

Anda dapat memeriksa URL yang muncul ketika Anda mengklik produk item di ZEPETO Studio

Salin item ID dalam bentuk angka acak, tempelkan ke dalam Unity Editor, dan tempelkan 'CR_' di depannya.

📘 Jika ini adalah pertama kalinya Anda membuat item, silakan mengacu pada panduan berikut. [Create Your Item]

STEP 3 : Mengatur Mannequin

Objek mannequin bisa dibuat dengan tiga tahap.

❗️ Perhatian

Hanya item yang Anda buat dan rilis yang bisa dipasang dan dijual di Dunia dengan ZEPETO Mannequin.
Item yang telah ditolak pada peninjauan tidak bisa dijual.
Karena itu, Anda harus masuki ke Unity untuk menggunakan fitur tersebut.
Saat Anda mempublikasikan paket dengan fungsi mannequin, Anda juga harus masuk sebagai editor.
Saat menggunakan manekin Templat ZEPETO atau Tipe Model ZEPETO, jumlah manekin mungkin menggunakan sumber daya sebanyak jumlah karakter ZEPETO yang dimasukkan, sehingga dapat mempengaruhi pengoptimalan.
- Jika Anda perlu menempatkan banyak manekin berbentuk karakter Zepeto di dunia, kami sarankan memilih manekin Tipe Sederhana dan menggunakan ZEPETO BaseModel sebagai objeknya.

STEP 3-1 : Simple Type

Merupakan yang paling dasar. Object spesifik bisa ditambahkan sebagai anak-anak Mannequin untuk mengatur penampilan.

Tambahkan objek untuk berinteraksi.
Collider harus ditambahkan agar bisa berinteraksi dengan object.

isTrigger harus dicentang. Jika tidak, maka akan secara otomatis diproses untuk dikenali sebagai trigger.
Saat Anda mencoba menambahkan komponen mannequin tanpa menambahkan collider, jendela peringatan akan muncul seperti di bawah ini.

Tambahkan komponen mannequin ke object.
Di inspektur, atur seperti ini:
- icon: Icon gantungan baju akan ditampilkan secara bawaan. Anda bisa mengubahnya ke ikon khusus.
- icon position: Jika tidak ada, icon muncul di posisi object dengan komponen mannequin secara bawaan.
  - Masukkan nilai setelah menambahkan object posisi untuk membuatnya muncul di lokasi yang diinginkan.
- ids: Silakan isi item ID dari item pakaian yang ingin Anda jual.

Tambahkan Empty Object dan namakan sebagai MannequinScript.
Tambahkan ZEPETO>Typescript dan namakan sebagai MannequinScript.
Isi sebagai berikut.

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();
            });
        });
    }
}

Setelah menambahkan skrip ke objek, tekan tombol [▶︎(play)] untuk menjalankannya.

STEP 3-2 : ZEPETO Model Type

Anda bisa mengatur penampilan mannequin dengan menambahkan item ID ke NPC karakter ZEPETO.

Objek mannequin bisa dibuat dengan tiga tahap.
Collider harus ditambahkan agar bisa berinteraksi dengan object.

isTrigger harus dicentang. Jika tidak, maka akan secara otomatis diproses untuk dikenali sebagai trigger.

Tambahkan komponen mannequin ke object.
Di inspektur, atur seperti ini:
- icon: Icon gantungan baju akan ditampilkan secara bawaan. Anda bisa mengubahnya ke ikon khusus.
- icon position: Jika tidak ada, icon muncul di posisi object dengan komponen mannequin secara bawaan.
  - Masukkan nilai setelah menambahkan object posisi untuk membuatnya muncul di lokasi yang diinginkan.
- ids: Silakan isi item ID dari item pakaian yang ingin Anda jual.
- pose: Anda bisa memilih pose dan mengaturnya.
  - Di masa depan, kami akan menyediakan pose yang Anda inginkan dalam bentuk pose ID.

👍 Jika Anda sudah menerapkan skrip Manekin di Adegan Anda, Anda dapat melewati langkah selanjutnya.

Tambahkan Empty Object dan namakan sebagai MannequinScript.
Tambahkan ZEPETO>Typescript dan namakan sebagai MannequinScript.
Isi sebagai berikut.

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();
            });
        });
    }
}

Setelah menambahkan skrip ke objek, tekan tombol [▶︎(play)] untuk menjalankannya.

STEP 3-3 : ZEPETO Template Type

Jika Anda memasukkan ZEPETO ID, pakaian yang dipakai orang tersebut akan ditampilkan pada mannequin. Akan tetapi, jika itu bukan pakaian yang Anda buat, maka pakaian tersebut tidak akan diperlihatkan.

Objek mannequin bisa dibuat dengan tiga tahap.
Collider harus ditambahkan agar bisa berinteraksi dengan object.

isTrigger harus dicentang. Jika tidak, maka akan secara otomatis diproses untuk dikenali sebagai trigger.

Tambahkan komponen mannequin ke object.
Di inspektur, atur seperti ini:
- icon: Icon gantungan baju akan ditampilkan secara bawaan. Anda bisa mengubahnya ke ikon khusus.
- icon position: Jika tidak ada, icon muncul di posisi object dengan komponen mannequin secara bawaan.
  - Masukkan nilai setelah menambahkan object posisi untuk membuatnya muncul di lokasi yang diinginkan.
- zepeto id: Silakan masukkan ZEPETO ID.
- pose: Anda bisa memilih pose dan mengaturnya.
  - Di masa depan, kami akan menyediakan pose yang Anda inginkan dalam bentuk pose ID.

👍 Jika Anda sudah menerapkan skrip Manekin di Adegan Anda, Anda dapat melewati langkah selanjutnya.

Tambahkan Empty Object dan namakan sebagai MannequinScript.
Tambahkan ZEPETO>Typescript dan namakan sebagai MannequinScript.
Isi sebagai berikut.

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();
            });
        });
    }
}

Setelah menambahkan skrip ke objek, tekan tombol [▶︎(play)] untuk menjalankannya.

STEP 4 : Menggunakan Pembelian Mannequin

Jika Anda sudah menyelesaikan pengaturan mannequin dengan benar, ikon akan muncul untuk berinteraksi saat Anda memasuki area Collider dari objek mannequin.

Saat Anda klik pada ikon, jendela pembelian akan muncul beserta item yang Anda pasang di mannequin.

Anda bisa mencobanya dengan mengklik pada item.

Item yang sudah dimiliki akan ditandai dengan tanda centang alih-alih harga. Saat Anda meninggalkan area Collider objek mannequin, percobaan pakaian akan dibatalkan dan Anda akan kembali ke pakaian awal.

Berikut adalah cara proses pembelian bekerja berdasarkan skenario tes.

Lingkungan Tes	Proses Pembelian
Pembelian dari Unity Editor	Selama Play, pakaian akan berubah jika pembelian berhasil. Akan tetapi, saat Play selesai, pakaian akan kembali ke kondisi semula.
Pembelian di lingkungan tes kode QR ponsel	Karena Anda masuk ke server sungguhan untuk melakukan tes, pakaian akan berubah saat pembelian berhasil dan pakaian yang diubah akan dipertahankan saat Anda meninggalkan Dunia. Juga, jika pembelian berhasil, item akan dibeli dari server nyata, sehingga permata yang dipegang oleh akun nyata akan dikurangi dan Anda akan memiliki item kostum. Pakaian yang dibeli tidak dapat dibuang atau dihapus secara sembarangan, jadi harap berhati-hati saat melakukan pengujian.
Pembelian setelah mendaftarkan paket di ZEPETO Studio dan terhubung melalui tautan tes	Karena Anda masuk ke server sungguhan untuk melakukan tes, pakaian akan berubah saat pembelian berhasil dan pakaian yang diubah akan dipertahankan saat Anda meninggalkan Dunia. Juga, jika pembelian berhasil, item akan dibeli dari server nyata, sehingga permata yang dipegang oleh akun nyata akan dikurangi dan Anda akan memiliki item kostum. Pakaian yang dibeli tidak dapat dibuang atau dihapus secara sembarangan, jadi harap berhati-hati saat melakukan pengujian.

STEP 5 : Sinkronisasi Multiplayer Manekin

Multiplay perlu mensinkronisasikan kostum yang dipakai pemain lain saat menggunakan fungsi manekin.

👍 Pengaturan multiplayer dasar harus diselesaikan sebelum mengerjakan konten di bawah.

Tambahkan skrip client. Tambahkan ZEPETO > Typescript dan namakan skrip sebagai MannequinController.
Isi seperti yang ditampilkan berikut.

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;
    }
 
}

Buat Hierarchy > Empty Object dan namakan MannequinController.
Tambahkan skrip yang baru ditulis ke MannequinController.

Selanjutnya, tulis kode server dengan mengacu pada konten di bawah di 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);
        }
    }
}

Nyalakan server multiplayer dan tes.

Fungsi Event

Fungsi event tersedia dari ZEPETO Mannequin 1.1.0.

ZEPETO.Mannequin.Mannequin

Fungsi	Deskripsi
public static OnSelectedItem: UnityEngine_Events.UnityEvent$2<ItemContent, boolean>;	Dipanggil saat item tertentu dipilih dari jendela pembelian kostum mannequin, dan ItemContent dari informasi item yang dipilih dan pemilihan item ditransfer ke nilai boolean.
public static OnSucceededPurchaseItems: UnityEngine_Events.UnityEvent$1<ItemContent[]>;	Dipanggil saat pembelian pakaian selesai, dan daftar temContent informasi item yang dibeli dibawa.
public static OnFailedPurchaseItems: UnityEngine_Events.UnityEvent$1<ItemContent[]>;	Dipanggil saat pembelian pakaian gagal, dan daftar temContent informasi item yang gagal dibeli dibawa.
public static OnAppliedItems: UnityEngine_Events.UnityEvent$1<ItemContent[]>;	Dipanggil saat Anda memilih untuk mengenakan item yang dibeli setelah pembelian berhasil, dan daftar ItemContent dari informasi item yang Anda telah kenakan akan dibawa.
public static OnOpenedShopUI: UnityEngine_Events.UnityEvent$1<ItemContent[]>;	Dipanggil saat jendela pembelian kostum mannequin dibuka, dan daftar temContent informasi item di jendela pembelian dibawa.
public static OnClosedShopUI: UnityEngine_Events.UnityEvent;	Dipanggil saat jendela pembelian kostum mannequin ditutup.

ZEPETO.Mannequin.BasePreviewer

Fungsi	Deskripsi
public OnChanged: UnityEngine_Events.UnityEvent$1<ZEPETO_Mannequin_BasePreviewer.ChangedValue[]>;	Selalu dipanggil saat informasi item yang dikenakan diubah dengan menekan mannequin, dan daftar OnChangedValue dibawa.

Informasi variabel anggota untuk kelas OnChangedValue adalah sebagai berikut:


public property : ZepetoPropertyFlag	Informasi Bagian Pakaian
public id : string	item ID

Mannequin.WorldCamera

Jika tidak mengatur Mannequin.WorldCamera, kamera terkait dengan ikon interaksi manekin diatur menjadi kamera dengan Depth rendah.

Jika ingin mengatur kamera yang diinginkan secara terpisah, silakan gunakan Mannequin.WorldCamera untuk menentukan pengaturan.

Variable	Deskripsi
Mannequin.WorldCamera	Variabel untuk mengatur kamera terkait dengan ikon interaksi manekin secara langsung.

Contoh pengaturan Mannequin.WorldCamera pada MannequinScript yang tersedia adalah sebagai berikut.

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();
            });
        });
    } 
}