---
title: การเปลี่ยนสีตัวละคร ZEPETO และสีของไอเท็มที่สวมใส่
slug: world-sdk-guide-th/cyU_-zepeto
docTags: 
createdAt: 2024-09-02T08:34:13.135Z
---

คู่มือนี้มีเป้าหมายเพื่อช่วยในการสร้างเนื้อหาที่น่าสนใจ.



## การเปลี่ยนสีของตัวละคร ZEPETO

ตัวละคร ZEPETO ถูกสร้างขึ้นในระหว่างการทำงานเป็นวัตถุ ZepetoCharacter.

หากคุณตรวจสอบโครงสร้างของ ZepetoCharacter คุณจะพบวัตถุย่อยชื่อ Zepeto Context ภายใน Zepeto Context ยังมีวัตถุอีกชื่อหนึ่งชื่อ body.

โดยการแทนที่วัสดุ body(Clone) ของวัตถุ body ในระหว่างการทำงานโดยใช้สคริปต์ คุณสามารถเปลี่ยนสีของตัวละคร ZEPETO ได้.

สำหรับอวตารที่ไม่เคลื่อนไหว วิธีนี้จะเปลี่ยนสีของทั้งใบหน้าและร่างกาย.

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



อย่างไรก็ตาม สำหรับอวตารที่เคลื่อนไหว คุณต้องแก้ไขวัสดุ body(Clone) ของ ANIME\_BASEMODEL ซึ่งเป็นลูกของวัตถุ body.

โปรดทราบว่าการแทนที่วัสดุสามารถทำได้ด้วยอาร์เรย์วัสดุที่มีความยาวเท่ากัน.

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-AkdhoVcIjqsmtzq-DbbLM-20240904-102411.png)



:::hint{type="info"}
**📘 วัสดุของ Unity**
[https://docs.unity3d.com/2020.3/Documentation/Manual/Materials.html](https://docs.unity3d.com/2020.3/Documentation/Manual/Materials.html)
:::



ด้านล่างนี้คือตัวอย่างโค้ดที่เปลี่ยนสีพื้นหลังของผู้เล่นท้องถิ่น.

โปรดตรวจสอบให้แน่ใจว่ามีการดำเนินการตรรกะเพื่อให้สีของตัวละครเปลี่ยนเฉพาะหลังจากที่ตัวละครโหลดเสร็จแล้ว.

```typescript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script'
import {LocalPlayer, SpawnInfo, ZepetoCharacter, ZepetoCharacterCreator, ZepetoPlayers} from "ZEPETO.Character.Controller";
import {ZepetoPropertyFlag} from "Zepeto";
import { GameObject, Material, Renderer, SkinnedMeshRenderer, Transform, WaitForSeconds } from 'UnityEngine';
import { Button } from 'UnityEngine.UI';


export default class ChangeSkinColor extends ZepetoScriptBehaviour {

    public newColorMaterial : Material;
    public changeColorButton : Button;
    public originalColorButton : Button;

    private _originalColorMaterial : Material;
    private _originalAnimeMaterials : Material[];
    private _animeRend : Renderer;
    private _bodyRend : Renderer;
    private _bodyRends : Renderer[];
    private _localCharacter: ZepetoCharacter;
    
    Start() {
        // ค้นหาผู้เล่นท้องถิ่นและตั้งค่าให้กับ _localCharacter
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            // ค้นหาวัสดุของบริบท zepeto ของผู้เล่นท้องถิ่น
            this._bodyRend= this._localCharacter.Context.GetComponentInChildren<SkinnedMeshRenderer>();
            // เก็บวัสดุเดิม
            this._originalColorMaterial = this._bodyRend.material;

            
            // กำหนดว่ามันเป็นอวตารที่เคลื่อนไหวและบันทึกข้อมูลที่เกี่ยวข้อง
            this._bodyRends= this._localCharacter.GetComponentsInChildren<SkinnedMeshRenderer>();
            this._bodyRends.forEach((currentRenderer) =>{
                if(currentRenderer.name.includes("ANIME_BASEMODEL")){
                    this._animeRend = currentRenderer; 
                    this._originalAnimeMaterials = this._animeRend.sharedMaterials;
                }
            });
        });

        // แทนที่ด้วยวัสดุที่ตั้งไว้เมื่อปุ่มถูกกด
        this.changeColorButton.onClick.AddListener(() => {
            if(this._localCharacter != null) {
                this._bodyRend.material = this.newColorMaterial;
                
                if(this._animeRend != null) {
                    let tempMaterials : Material[] = [this._animeRend.sharedMaterials[0],this._animeRend.sharedMaterials[1],this.newColorMaterial,this._animeRend.sharedMaterials[3]];
                    this._animeRend.sharedMaterials = tempMaterials;
                }
            }
        });

        // กลับไปยังวัสดุเดิมเมื่อปุ่มถูกกด
        this.originalColorButton.onClick.AddListener(() => {
            if(this._localCharacter != null) {
                this._bodyRend.material = this._originalColorMaterial;

                if(this._animeRend != null) {
                    this._animeRend.sharedMaterials = this._originalAnimeMaterials;
                }
            }
        });
    }
}  
```



![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-VbPNIrw2rE0A2UPOoY-Ri-20240904-102413.gif)

:::hint{type="danger"}
- การเปลี่ยนแปลงวัสดุของร่างกายอาจทำให้การแต่งหน้าของอวตาร ZEPETO ไม่แสดงอย่างถูกต้อง
:::



## การเปลี่ยนสีของรายการที่สึกหรอ

รายการที่สึกหรอจะถูกสร้างเป็นวัตถุย่อยภายใต้วัตถุหลัก.

คุณสามารถตรวจสอบวัสดุที่ใช้สำหรับแต่ละรายการจากส่วนวัสดุของวัตถุรายการ.

โดยการเปลี่ยนวัสดุในระหว่างการทำงานโดยใช้สคริปต์ คุณสามารถเปลี่ยนสีของรายการได้.

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



ด้านล่างนี้คือตัวอย่างโค้ดที่เปลี่ยนสีของรายการแรกที่สวมใส่โดยผู้เล่นท้องถิ่น.

ตรวจสอบให้แน่ใจว่าสีของรายการจะถูกเปลี่ยนเฉพาะหลังจากที่ตัวละครโหลดเสร็จแล้ว.

```typescript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script'
import {LocalPlayer, ZepetoCharacter, ZepetoPlayers} from "ZEPETO.Character.Controller";
import { GameObject, Material, Renderer, SkinnedMeshRenderer, Transform, WaitForSeconds } from 'UnityEngine';
import { Button } from 'UnityEngine.UI';


export default class ChangeSkinColor extends ZepetoScriptBehaviour {

    public newColorMaterial : Material;
    public changeColorButton : Button;
    public originalColorButton : Button;

    private _originalColorMaterial : Material;
    private _body : GameObject;
    private _itemRend : Renderer;
    private _localCharacter: ZepetoCharacter;

    Start() {
        // ค้นหาผู้เล่นท้องถิ่นและตั้งค่าให้กับ _localCharacter
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            // เข้าถึงร่างกายของบริบท zepeto ของผู้เล่นท้องถิ่น
            this._body = this._localCharacter.Context.GetComponentInChildren<SkinnedMeshRenderer>().gameObject;
            // เข้าถึงวัสดุของรายการแรกในร่างกาย
            this._itemRend = this._body.transform.GetChild(0).GetComponent<SkinnedMeshRenderer>();
            // เก็บวัสดุเดิม
            this._originalColorMaterial = this._itemRend.material;
        });

        // แทนที่ด้วยวัสดุที่ตั้งไว้เมื่อปุ่มถูกกด
        this.changeColorButton.onClick.AddListener(() => {
            if(this._localCharacter != null) {
                this._itemRend.material = this.newColorMaterial;
            }
        });

        // กลับไปยังวัสดุเดิมเมื่อปุ่มถูกกด
        this.originalColorButton.onClick.AddListener(() => {
            if(this._localCharacter != null) {
                this._itemRend.material = this._originalColorMaterial;
            }
        });
    }
}  
```



- คำอธิบายโค้ด
  - `this.body.transform.GetChild(0)` หมายถึงรายการแรกในรายการที่สวมใส่, คือรายการที่อยู่ที่ดัชนี 0.
  - คุณสามารถปรับเปลี่ยนสิ่งนี้เพื่อเปลี่ยนสีของรายการที่สวมใส่อื่น ๆ ได้.
  - สำหรับรายการที่ใช้วัสดุหลายชนิด, โปรดจำไว้ว่าการแทนที่วัสดุต้องการอาร์เรย์วัสดุที่มีความยาวเท่ากัน.

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



## การเปลี่ยนสีของตัวละคร ZEPETO ทั้งสองตัวและรายการทั้งหมด

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

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



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

```typescript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script'
import {LocalPlayer, ZepetoCharacter, ZepetoPlayers} from "ZEPETO.Character.Controller";
import { GameObject, Material, Renderer, SkinnedMeshRenderer, Transform, WaitForSeconds } from 'UnityEngine';
import { Button } from 'UnityEngine.UI';


export default class ChangeAllMaterial extends ZepetoScriptBehaviour {

    public newColorMaterial : Material;
    public changeColorButton : Button;
    public originalColorButton : Button;

    private _originalMaterials : Material[] = new Array();
    private _bodyRends : Renderer[];
    private _localCharacter: ZepetoCharacter;

    Start() {
        // ค้นหาผู้เล่นท้องถิ่นและตั้งค่าให้กับ _localCharacter
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            
            // บันทึกเพื่อเก็บวัสดุเดิม
            this._bodyRends= this._localCharacter.GetComponentsInChildren<SkinnedMeshRenderer>();
            this._bodyRends.forEach((currentRenderer) =>{
                for(let i=0; i<currentRenderer.sharedMaterials.length;i++){
                    this._originalMaterials.push(currentRenderer.sharedMaterials[i]);
                }
            });
        });

        // แทนที่ด้วยวัสดุที่ตั้งไว้เมื่อปุ่มถูกกด
        this.changeColorButton.onClick.AddListener(() => {
            if(this._localCharacter != null) {
                this._bodyRends.forEach((currentRenderer) =>{
                    let tempMaterials : Material[] = new Array();
                    for(let i=0; i<currentRenderer.sharedMaterials.length;i++){
                        tempMaterials.push(this.newColorMaterial);
                    }
                    currentRenderer.sharedMaterials = tempMaterials;
                });
            }
        });

        // กลับไปที่วัสดุเดิมเมื่อปุ่มถูกกด
        this.originalColorButton.onClick.AddListener(() => {
            if(this._localCharacter != null) {
                let indexNum = 0;
                this._bodyRends= this._localCharacter.GetComponentsInChildren<SkinnedMeshRenderer>();
                this._bodyRends.forEach((currentRenderer) =>{
                    let tempMaterials : Material[] = new Array();
                    for(let i=0; i<currentRenderer.sharedMaterials.length;i++){
                        tempMaterials.push(this._originalMaterials[indexNum]);
                        indexNum++;
                    }
                    currentRenderer.sharedMaterials = tempMaterials; 
                });
            }
        });
    }
}  
```



:::hint{type="success"}
- วิธีนี้ไม่เพียงใช้ได้กับผู้เล่นท้องถิ่น แต่ยังใช้ได้กับตัวละคร ZEPETO ใด ๆ ที่สร้างขึ้นในระหว่างการทำงาน รวมถึงตัวละคร NPC ด้วย
- อย่าลังเลที่จะใช้ความคิดสร้างสรรค์และนำไปใช้ในวิธีที่สนุกสนาน!
:::