---
title: Mengubah warna karakter ZEPETO dan warna item yang dikenakan
slug: world-sdk-guide-id/mengubah-warna-karakter-zepeto-dan-warna-item-yang-dikenakan
docTags: 
createdAt: 2024-09-02T08:34:13.135Z
---

Panduan ini bertujuan untuk membantu dalam membuat konten yang menarik.



## Mengubah Warna Karakter ZEPETO

Karakter ZEPETO diinstansiasi saat runtime sebagai objek ZepetoCharacter.

Jika Anda memeriksa struktur ZepetoCharacter, Anda akan menemukan sub-objek bernama Zepeto Context. Lebih jauh di dalam Zepeto Context, ada objek lain bernama body.

Dengan mengganti Material body(Clone) dari objek body saat runtime menggunakan skrip, Anda dapat mengubah warna karakter ZEPETO.

Untuk avatar yang tidak dianimasikan, pendekatan ini mengubah warna seluruh wajah dan tubuh.

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



Namun, untuk avatar yang dianimasikan, Anda juga perlu memodifikasi Material body(Clone) dari ANIME\_BASEMODEL, yang merupakan anak dari objek body.

Harap dicatat bahwa penggantian Material dapat dilakukan dengan array Material yang memiliki panjang yang sama.

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



:::hint{type="info"}
**📘 Bahan Unity**
[https://docs.unity3d.com/2020.3/Documentation/Manual/Materials.html](https://docs.unity3d.com/2020.3/Documentation/Manual/Materials.html)
:::



Di bawah ini adalah contoh kode yang mengubah warna tubuh Pemain Lokal.

Pastikan untuk menerapkan logika sehingga warna karakter hanya berubah setelah karakter dimuat.

```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() {
        // Temukan pemain lokal dan atur ke _localCharacter
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            // Temukan material dari konteks zepeto pemain lokal
            this._bodyRend= this._localCharacter.Context.GetComponentInChildren<SkinnedMeshRenderer>();
            // Simpan material asli
            this._originalColorMaterial = this._bodyRend.material;

            
            // Tentukan apakah itu avatar yang dianimasikan dan simpan informasi terkait
            this._bodyRends= this._localCharacter.GetComponentsInChildren<SkinnedMeshRenderer>();
            this._bodyRends.forEach((currentRenderer) =>{
                if(currentRenderer.name.includes("ANIME_BASEMODEL")){
                    this._animeRend = currentRenderer; 
                    this._originalAnimeMaterials = this._animeRend.sharedMaterials;
                }
            });
        });

        // Ganti dengan material preset saat tombol ditekan
        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;
                }
            }
        });

        // Kembali ke material asli saat tombol ditekan
        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"}
- Mengubah bahan tubuh dapat mengakibatkan makeup avatar ZEPETO tidak ditampilkan dengan benar.
:::



## Mengubah Warna Barang yang Dipakai

Barang yang dipakai diinstansikan sebagai sub-objek di bawah objek tubuh.

Anda dapat memeriksa Material yang diterapkan untuk setiap barang dari bagian Material objek barang.

Dengan mengganti Material saat runtime menggunakan skrip, Anda dapat mengubah warna barang-barang tersebut.

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



Di bawah ini adalah contoh kode yang mengubah warna item pertama yang dikenakan oleh Pemain Lokal.

Pastikan bahwa warna item hanya diubah setelah karakter dimuat.

```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() {
        // Temukan pemain lokal dan atur ke _localCharacter
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            // Akses tubuh konteks zepeto pemain lokal
            this._body = this._localCharacter.Context.GetComponentInChildren<SkinnedMeshRenderer>().gameObject;
            // Akses material item anak pertama dari tubuh
            this._itemRend = this._body.transform.GetChild(0).GetComponent<SkinnedMeshRenderer>();
            // Simpan material asli
            this._originalColorMaterial = this._itemRend.material;
        });

        // Ganti dengan material preset saat tombol ditekan
        this.changeColorButton.onClick.AddListener(() => {
            if(this._localCharacter != null) {
                this._itemRend.material = this.newColorMaterial;
            }
        });

        // Kembali ke material asli saat tombol ditekan
        this.originalColorButton.onClick.AddListener(() => {
            if(this._localCharacter != null) {
                this._itemRend.material = this._originalColorMaterial;
            }
        });
    }
}  
```



- Penjelasan Kode
  - `this.body.transform.GetChild(0)` mengacu pada item pertama di antara item yang dikenakan, yaitu item pada indeks 0.
  - Anda dapat menyesuaikan ini untuk mengubah warna item lain yang dikenakan.
  - Untuk item yang menggunakan beberapa Material, ingat bahwa penggantian Material memerlukan array Material dengan panjang yang sama.

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



## Mengubah Warna Kedua Karakter ZEPETO dan Semua Item

Dengan memanfaatkan wawasan yang telah kami peroleh sejauh ini, Anda dapat memodifikasi warna baik karakter maupun semua item secara seragam.

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



Berikut adalah contoh kode yang mengubah warna karakter Pemain Lokal dan warna item sepenuhnya ketika tombol "Ubah Warna" diklik dan kembali ke warna asli ketika tombol "Warna Asli" diklik:

```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() {
        // Temukan pemain lokal dan atur ke _localCharacter
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            
            // Simpan untuk menjaga material asli
            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]);
                }
            });
        });

        // Ganti dengan material preset ketika tombol ditekan
        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;
                });
            }
        });

        // Kembali ke material asli ketika tombol ditekan
        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"}
- Metode ini tidak hanya berlaku untuk Pemain Lokal tetapi juga untuk karakter ZEPETO yang dibuat saat runtime, termasuk karakter NPC.
- Silakan berkreasi dan terapkan dengan cara yang menyenangkan!
:::