---
title: เปลี่ยนชุดผู้เล่นท้องถิ่น
slug: world-sdk-guide-th/0vjiVrzk4Ik5vTmST76RL
docTags: 
createdAt: 2024-09-02T08:34:13.135Z
---

คุณสามารถเปลี่ยนชุดของผู้เล่นท้องถิ่นเป็นชุดที่คุณมีได้

ต้องติดตั้ง ZEPETO.Character.Controller เวอร์ชัน 1.11.3 หรือสูงกว่า

## การใช้ API SetCostume

### วิธีการ

| **API**                                                         | **คำอธิบาย**                                                                                                           |
| --------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| SetCostume($itemCode: string, $complete?: System.Action)\:void; | ใส่รหัสรายการ (item id) เป็นค่าพารามิเตอร์เพื่อเปลี่ยนชุดของผู้เล่นท้องถิ่น รับการเรียกกลับเมื่อการเปลี่ยนชุดเสร็จสิ้น |



## ตัวอย่างการเปลี่ยนชุดผู้เล่นท้องถิ่น

คุณสามารถเปลี่ยนชุดของผู้เล่นท้องถิ่นโดยใช้ `SetCostume()`.

นี่คือตัวอย่างโค้ดที่สร้างผู้เล่นท้องถิ่นเมื่อฉากเริ่มต้น และเปลี่ยนชุดด้วยรหัสไอเท็มเฉพาะเมื่อผู้เล่นท้องถิ่นถูกสร้างขึ้น

1\) เพิ่ม ZEPETO > Typescript และตั้งชื่อสคริปต์ว่า ChangeLocalPlayerCostume

เขียนสคริปต์ตัวอย่างตามด้านล่าง

:::CodeblockTabs
ChangeLocalPlayerCostume.ts

```typescript
import { SpawnInfo, ZepetoPlayers } from 'ZEPETO.Character.Controller';
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { WorldService } from 'ZEPETO.World';

export default class ChangeLocalPlayerCostume extends ZepetoScriptBehaviour {

    public itemCode: string;

    // เมื่อฉากเริ่มต้น สร้างผู้เล่นด้วย ID ผู้ใช้ที่ให้มาและเปลี่ยนชุดของพวกเขา
    Start() {
        
        // สร้างผู้เล่นใหม่ด้วย ID ผู้ใช้ที่ระบุ
        ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, new SpawnInfo(), true);

        // เพิ่มผู้ฟังไปยังเหตุการณ์ OnAddedLocalPlayer ซึ่งจะถูกเรียกเมื่อผู้เล่นท้องถิ่นถูกเพิ่ม
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {

            // เรียกใช้วิธี ChangeCostume ด้วยรหัสไอเท็มที่ให้มาเพื่อเปลี่ยนชุด
            this.ChangeCostume(this.itemCode);
        });
    }

    // วิธีการเปลี่ยนชุดของผู้เล่นท้องถิ่นโดยใช้รหัสไอเท็มที่ให้มา
    ChangeCostume(itemCode: string) {

        // ใช้คุณสมบัติ LocalPlayer เพื่อเข้าถึงอินสแตนซ์ผู้เล่นท้องถิ่นและตั้งค่าชุดของพวกเขาโดยใช้รหัสไอเท็มที่ให้มา
        ZepetoPlayers.instance.LocalPlayer.SetCostume(itemCode, () => {
            // เมื่อการเปลี่ยนชุดเสร็จสิ้น ให้บันทึกข้อความที่บ่งบอกถึงการเปลี่ยนแปลงที่สำเร็จ
            console.log(`ตั้งชุดเสร็จสิ้น : ${itemCode}`);
        });
    }
}
```
:::

### คำอธิบายสคริปต์

- สคริปต์นี้เปลี่ยนชุดของผู้เล่นท้องถิ่นตามรหัสรายการที่กำหนดไว้
- เมื่อฉากเริ่มต้น ให้สร้างผู้เล่นด้วยรหัสผู้ใช้ที่ระบุและใช้ `CreatePlayerWithUserId()` ฟังก์ชันนี้
- มีการเพิ่มตัวฟังเหตุการณ์ OnAddedLocalPlayer เพื่อให้เมื่อมีการเพิ่มผู้เล่นท้องถิ่น เหตุการณ์นั้นจะถูกเรียกใช้ และ `ChangeCostume()` เมธอดจะถูกเรียกเพื่อเปลี่ยนชุด
- เข้าถึงอินสแตนซ์ผู้เล่นท้องถิ่นผ่านคุณสมบัติ LocalPlayer และเปลี่ยนชุดโดยใช้รหัสรายการที่ให้ไว้ เมื่อการเปลี่ยนชุดเสร็จสิ้น จะมีการบันทึกข้อความ `Set Costume Complete` ซึ่งจะแสดงถึงการเปลี่ยนแปลงที่สำเร็จ



:::hint{type="info"}
**📘 **กรุณาอ้างอิงคู่มือหุ่นจำลองเกี่ยวกับวิธีการตรวจสอบรหัสรายการ\[[ZEPETO Mannequin](docId\:Jp7d0wGm6ZT9ejYI682l_)]
:::



2\) หากคุณกดปุ่ม \[▶︎(เล่น)] เพื่อรันมัน คุณจะเห็นว่าผู้เล่นท้องถิ่นถูกสร้างขึ้นและเปลี่ยนด้วยชุดเครื่องแต่งกายตามรหัสรายการที่ป้อนเข้าไป

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-9ot0wNN2ut4K4pljvcSHI-20240904-102422.png)

ก่อนการเปลี่ยนชุดเครื่องแต่งกาย (ซ้าย), หลังการเปลี่ยนชุดเครื่องแต่งกาย (ขวา)



:::hint{type="danger"}
- หากรายการเป็นผลิตภัณฑ์ที่มีระยะเวลาคงที่ จะต้องสวมใส่หลังจากตรวจสอบว่าหมดอายุหรือไม่ สำหรับรายการที่หมดอายุ จะมีบันทึกข้อผิดพลาดที่เรียกว่า `รายการหมดอายุ` ถูกเรียกว่า.
- หากรายการเป็นผลิตภัณฑ์ที่จ่ายด้วย Zem จะต้องสวมใส่หลังจากตรวจสอบว่าผู้เล่นท้องถิ่นเป็นเจ้าของหรือไม่ สำหรับรายการที่ไม่มีเจ้าของ จะมีบันทึกข้อผิดพลาดที่เรียกว่า `ไม่มี ItemCode` ถูกเรียกว่า.
:::





### ตัวอย่างการโหลดรายการเสื้อผ้าและการเปลี่ยนชุด

คุณสามารถดึงรายการเสื้อผ้าโดยใช้ `GetMyItemListAsync()`, ซึ่งให้ข้อมูลเกี่ยวกับรายการที่ผู้ใช้เป็นเจ้าของ.

ตัวอย่างต่อไปนี้แสดงวิธีการแสดงชุดเครื่องแต่งกายที่ผู้เล่นท้องถิ่นเป็นเจ้าของบนหน้าจอและให้พวกเขาเลือกและเปลี่ยนชุดเครื่องแต่งกายได้



### ขั้นตอนที่ 1. สร้าง UI รายการเสื้อผ้า

ก่อนอื่น สร้างทรัพยากร UI รายการที่จะแสดงภาพขนาดย่อและชื่อของรายการเสื้อผ้า ทรัพยากรที่ต้องสร้างรวมถึง:

### ขั้นตอนที่ 1-1. สร้าง Item Prefab

หลังจากโหลดรายการเสื้อผ้าที่ผู้เล่นท้องถิ่นมี เราจะสร้างรายการรายการใน UI Item Prefab ทำหน้าที่เป็นแหล่งข้อมูลสำหรับแต่ละรายการที่ถูกสร้างขึ้น

เมื่อสร้าง Item Prefab ขึ้นมา จะมีภาพขนาดย่อและชื่อรายการแสดงใน UI.

Item Prefab ประกอบด้วยองค์ประกอบดังต่อไปนี้.

1. วัตถุ Button\_thumbnail: นี่คือวัตถุที่มีส่วนประกอบ Raw Image และส่วนประกอบ Button ลงทะเบียนเพื่อแสดงภาพขนาดย่อของรายการ.
2. วัตถุ Text\_name: วัตถุส่วนประกอบ Text ที่ชื่อรายการจะแสดงอยู่.

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Qm6kn6yLAAWhZNwsPWpok-20240904-102422.png)



### ขั้นตอนที่ 1-2. การตั้งค่า Canvas

Canvas คือหน้าจอ UI ที่แสดงเมื่อสร้าง Item Prefab ขึ้นมา แนะนำให้สร้าง Scroll View ภายใน Canvas นี้เพื่อให้สามารถดึงรายการขนาดใหญ่ได้.

วัตถุ Scroll View ภายใน Canvas ถูกตั้งค่าไว้ดังนี้.

- วัตถุ Scroll View ถูกตั้งค่าให้อนุญาตการเลื่อนแนวตั้งเท่านั้น
- วัตถุ Content ตั้งค่าคอมโพเนนต์ต่อไปนี้:
  - กลุ่มเลย์เอาต์แบบกริด:
    - ขนาดเซลล์ : x: 150, Y: 150
    - ข้อจำกัด : จำนวนคอลัมน์ที่คงที่
    - จำนวนข้อจำกัด : 5

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-wLg_pemNWFYxohPdYWt-N-20240904-102422.png)



### ขั้นตอนที่ 2. สคริปต์เพื่อโหลดรายการและเปลี่ยนชุด

### ขั้นตอน 2-1. เขียนสคริปต์

- เพิ่ม ZEPETO > Typescript และเปลี่ยนชื่อสคริปต์เป็น MyItemList.
- เขียนสคริปต์ตัวอย่างตามด้านล่าง.

:::CodeblockTabs
MyItemList.ts

```typescript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { ShopService, ItemKeyword } from 'ZEPETO.Module.Shop';
import { ZepetoPropertyFlag } from 'Zepeto';
import { GameObject, Object, RectTransform, Texture2D, Transform, WaitUntil } from 'UnityEngine';
import { Button, LayoutRebuilder, RawImage, Text } from 'UnityEngine.UI';
import { SpawnInfo, ZepetoPlayers } from 'ZEPETO.Character.Controller';
import { WorldService } from 'ZEPETO.World';
import { Item } from 'ZEPETO.Module.Content';

export default class CheckMyItemList extends ZepetoScriptBehaviour {

    public itemPrefab: GameObject;
    public itemCanvas: Transform;

    // เมื่อฉากเริ่มต้น สร้างผู้เล่นด้วย ID ผู้ใช้ที่ให้มาและเริ่มดึงและแสดงรายการสินค้า
    Start() {
        // สร้างผู้เล่นใหม่ด้วย ID ผู้ใช้ที่ระบุ
        ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, new SpawnInfo(), true);

        // เพิ่มผู้ฟังไปยังเหตุการณ์ OnAddedLocalPlayer ซึ่งจะถูกเรียกเมื่อผู้เล่นท้องถิ่นถูกเพิ่ม
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            // เริ่ม Coroutine CoGetMyItem เพื่อดึงและแสดงรายการสินค้า
            this.StartCoroutine(this.CoGetMyItem());
        });
    }

    // Coroutine เพื่อดึงและแสดงรายการสินค้า
    *CoGetMyItem() {
        // ขอรายการสินค้าด้วยคีย์เวิร์ด "all" และไม่มีการกรอง
        var requestItemList = ShopService.GetMyContentItemListAsync(ItemKeyword.all, null);

        // รอจนกว่าคำขอจะเสร็จสิ้น
        yield new WaitUntil(() => requestItemList.keepWaiting == false);

        if (requestItemList.responseData.isSuccess) {
            let contentItems: Item[] = requestItemList.responseData.items;

            console.log(contentItems.length);

            for (let i = 0; i < contentItems.length; ++i) {
                const property: ZepetoPropertyFlag = contentItems[i].property;

                // ขอ texture thumbnail สำหรับสินค้า
                var textureReq = contentItems[i].GetThumbnailAsync();
                yield new WaitUntil(() => textureReq.keepWaiting == false);
                let thumbnailTexture: Texture2D = textureReq.responseData.texture;

                // สร้าง prefab สินค้าและตั้งค่าคุณสมบัติ
                const item = Object.Instantiate(this.itemPrefab, this.itemCanvas) as GameObject;
                item.GetComponentInChildren<RawImage>().texture = thumbnailTexture;
                item.GetComponentInChildren<Text>().text = contentItems[i].id;

                // เพิ่มผู้ฟังการคลิกไปยังปุ่มสินค้าเพื่อเปลี่ยนชุดเมื่อคลิก
                item.GetComponentInChildren<Button>().onClick.AddListener(() => {
                    this.SetItemButton(contentItems[i].id);
                });
            }
        }

        // บังคับให้สร้างเลย์เอาต์ใหม่เพื่อให้แน่ใจว่าการจัดตำแหน่งของ UI ถูกต้อง
        const rect = this.itemCanvas.gameObject.GetComponent<RectTransform>();
        LayoutRebuilder.ForceRebuildLayoutImmediate(rect);
    }

    // วิธีการเปลี่ยนชุดของผู้เล่นท้องถิ่นตามรหัสสินค้าที่ให้มา
    SetItemButton(itemCode: string) {
        // ใช้คุณสมบัติ ZepetoPlayers.instance.LocalPlayer เพื่อเข้าถึงอินสแตนซ์ผู้เล่นท้องถิ่นและเปลี่ยนชุดของพวกเขา
        ZepetoPlayers.instance.LocalPlayer.SetCostume(itemCode, () => {
            // เมื่อการเปลี่ยนชุดเสร็จสิ้น ให้บันทึกข้อความที่บ่งบอกถึงการเปลี่ยนแปลงที่สำเร็จ
            console.log(`Set Costume Complete : ${itemCode}`);
        });
    }

}
```
:::

### คำอธิบายสคริปต์

- ในวิธี Start ผู้เล่นใหม่ถูกสร้างขึ้นโดยใช้ `ZepetoPlayers.instance.CreatePlayerWithUserId()`และ `CoGetMyItem()` coroutine จะถูกเรียกใช้เมื่อผู้เล่นท้องถิ่นถูกเพิ่มเข้าไป.
- &#x20;coroutine ของ `CoGetMyItem()` ใช้ `ShopService.GetMyContentItemListAsync()` เพื่อดึงรายการของรายการที่ผู้เล่นเป็นเจ้าของ.
  - ขอรายการของรายการทั้งหมดในทุกหมวดหมู่ผ่าน ItemKeyword.all รอจนกว่าคำขอจะเสร็จสิ้นโดยใช้ `yield new WaitUntil(() => requestItemList.keepWaiting == false)`.
  - ถ้าคำขอสำเร็จ `requestItemList.responseData.isSuccess`, ทำการวนซ้ำผ่านรายการของ `contentItems` และดึงภาพขนาดย่อของแต่ละรายการโดยใช้ `GetThumbnailAsync()`.
  - สร้างองค์ประกอบ UI สำหรับแต่ละรายการโดยใช้ itemPrefab ที่ให้มา และตั้งค่าภาพขนาดย่อและ ID ปุ่มสำหรับแต่ละรายการถูกสร้างขึ้น และตั้งค่าให้เรียก `SetItemButton()` โดยใช้ ID ของรายการเป็นอาร์กิวเมนต์.
- วิธีการ `SetItemButton()` จะถูกเรียกเมื่อปุ่มที่เกี่ยวข้องกับรายการถูกคลิก.
  - ใช้รายการที่เลือกเป็นชุดเครื่องแต่งกายของตัวละครผู้เล่นโดยใช้ `ZepetoPlayers.instance.LocalPlayer.SetCostume()`.
  - เมื่อชุดเครื่องแต่งกายถูกเปลี่ยนสำเร็จ ข้อความบันทึกที่บอกว่า `Set Costume Complete` จะถูกแสดงพร้อมกับรหัสรายการ.



:::hint{type="info"}
**📘 เคล็ดลับ**

- โปรดดูคู่มือด้านล่างเกี่ยวกับวิธีการตรวจสอบข้อมูลรายการของผู้ใช้ผ่าน `ShopService.GetMyContentItemListAsync()`. \[[ค้นหาข้อมูลเกี่ยวกับสิ่งของที่ผู้ใช้เป็นเจ้าของ](docId\:r6NB-tPwSS3JtCEcAm1C7)]
- เมื่อค้นหารายการที่ผู้ใช้เป็นเจ้าของ คุณสามารถค้นหาตามหมวดหมู่โดยใช้ ItemKeyword และแสดงในรายการบน UI.
:::



:::hint{type="danger"}
**❗️ ระวัง**
รายการเสื้อผ้าที่ดึงมาผ่าน `ShopService.GetMyContentItemListAsync()` มีผลิตภัณฑ์ที่หมดอายุและมีเวลาจำกัด ดังนั้น `รายการที่หมดอายุ` สามารถเรียกดูบันทึกข้อผิดพลาดได้.
:::



### ขั้นตอน 2-2. การตั้งค่าตรวจสอบ MyItemList

ลงทะเบียน itemPrefab ที่สร้างขึ้นในขั้นตอนที่ 1 ใน Item Prefab ของคอมโพเนนต์ที่ MyItemList ถูกนำไปใช้ และลงทะเบียน Canvas ใน `itemCanvas`.

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-weiBa5i6f4IGwXfZX54QJ-20240904-102422.png)



### ขั้นตอนที่ 3. รัน

หากคุณกดปุ่มเล่นเพื่อรัน มุมมอง UI ของแคนวาสจะแสดงรายการของที่เป็นเจ้าของโดยผู้เล่นท้องถิ่น และคุณจะเห็นว่าของเปลี่ยนเป็นชุดที่ตรงกันเมื่อเลือก

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-jPLZSSNp7pTrldr4dK9vx-20240904-102426.gif)



:::hint{type="danger"}
**❗️ ระวัง**

- API การสวมชุดนี้ใช้ได้เฉพาะกับผู้เล่นท้องถิ่นและไม่รองรับการซิงโครไนซ์แบบผู้เล่นหลายคนในขณะนี้
- การซิงโครไนซ์ชุดแบบผู้เล่นหลายคนจะมีให้ในอนาคต
:::