---
title: Modification de la couleur du personnage ZEPETO et de la couleur des objets portés
slug: world-sdk-guide-fr/modification-de-la-couleur-du-personnage-zepeto-et-de-la-couleur-des-objets-portes
docTags: 
createdAt: 2024-09-02T08:34:13.135Z
---

Ce guide vise à aider à créer un contenu engageant.



## Changer la couleur des personnages ZEPETO

Les personnages ZEPETO sont instanciés à l'exécution en tant qu'objet ZepetoCharacter.

Si vous inspectez la structure de ZepetoCharacter, vous trouverez un sous-objet nommé Zepeto Context. Plus loin dans Zepeto Context, il y a un autre objet nommé body.

En remplaçant le matériau body(Clone) de l'objet body à l'exécution à l'aide de scripts, vous pouvez changer la couleur du personnage ZEPETO.

Pour les avatars non animés, cette approche change la couleur de l'ensemble du visage et du corps.

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



Cependant, pour les avatars animés, vous devez également modifier le matériau body(Clone) du ANIME\_BASEMODEL, qui est un enfant de l'objet body.

Veuillez noter que les remplacements de matériaux sont réalisables avec des tableaux de matériaux de la même longueur.

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



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



Voici un exemple de code qui change la couleur du corps du joueur local.

Assurez-vous d'implémenter la logique afin que la couleur du personnage ne change qu'après que le personnage a été chargé.

```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() {
        // Trouver le joueur local et le définir à _localCharacter
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            // Trouver le matériau du contexte zepeto du joueur local
            this._bodyRend= this._localCharacter.Context.GetComponentInChildren<SkinnedMeshRenderer>();
            // Stocker le matériau original
            this._originalColorMaterial = this._bodyRend.material;

            
            // Déterminer s'il s'agit d'un avatar animé et sauvegarder les informations connexes
            this._bodyRends= this._localCharacter.GetComponentsInChildren<SkinnedMeshRenderer>();
            this._bodyRends.forEach((currentRenderer) =>{
                if(currentRenderer.name.includes("ANIME_BASEMODEL")){
                    this._animeRend = currentRenderer; 
                    this._originalAnimeMaterials = this._animeRend.sharedMaterials;
                }
            });
        });

        // Remplacer par le matériau prédéfini lorsque le bouton est pressé
        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;
                }
            }
        });

        // Retourner au matériau original lorsque le bouton est pressé
        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"}
- Modifier le matériau du corps peut entraîner un affichage incorrect du maquillage de l'avatar ZEPETO.
:::



## Changer la couleur des objets usés

Les objets usés sont instanciés en tant que sous-objets sous l'objet corps.

Vous pouvez vérifier le matériau appliqué pour chaque objet dans la section Matériaux de l'objet.

En remplaçant les matériaux à l'exécution à l'aide de scripts, vous pouvez changer la couleur des objets.

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



Ci-dessous un exemple de code qui change la couleur du premier objet porté par le joueur local.

Assurez-vous que la couleur de l'objet est changée uniquement après que le personnage a été chargé.

```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() {
        // Trouver le joueur local et le définir à _localCharacter
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            // Accéder au corps du contexte zepeto du joueur local
            this._body = this._localCharacter.Context.GetComponentInChildren<SkinnedMeshRenderer>().gameObject;
            // Accéder au matériau du premier objet enfant du corps
            this._itemRend = this._body.transform.GetChild(0).GetComponent<SkinnedMeshRenderer>();
            // Stocker le matériau original
            this._originalColorMaterial = this._itemRend.material;
        });

        // Remplacer par le matériau prédéfini lorsque le bouton est pressé
        this.changeColorButton.onClick.AddListener(() => {
            if(this._localCharacter != null) {
                this._itemRend.material = this.newColorMaterial;
            }
        });

        // Retourner au matériau original lorsque le bouton est pressé
        this.originalColorButton.onClick.AddListener(() => {
            if(this._localCharacter != null) {
                this._itemRend.material = this._originalColorMaterial;
            }
        });
    }
}  
```



- Explication du code
  - `this.body.transform.GetChild(0)` fait référence au premier objet parmi les objets portés, c'est-à-dire l'objet à l'index 0.
  - Vous pouvez adapter cela pour changer la couleur d'autres objets portés.
  - Pour les objets utilisant plusieurs matériaux, rappelez-vous que les remplacements de matériaux nécessitent des tableaux de matériaux de la même longueur.

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



## Changer la couleur des personnages ZEPETO et de tous les objets

En tirant parti des informations que nous avons acquises jusqu'à présent, vous pouvez modifier la couleur à la fois du personnage et de tous les objets de manière uniforme.

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



Voici un code d'exemple qui modifie complètement la couleur du personnage et des objets du joueur local lorsque le bouton "Changer de couleur" est cliqué et revient à l'original lorsque le bouton "Couleur originale" est cliqué :

```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() {
        // Trouver le joueur local et le définir à _localCharacter
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._localCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            
            // Sauvegarder pour garder les matériaux originaux
            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]);
                }
            });
        });

        // Remplacer par le matériau prédéfini lorsque le bouton est pressé
        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;
                });
            }
        });

        // Retourner au matériau original lorsque le bouton est pressé
        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"}
- Cette méthode est applicable non seulement au joueur local, mais aussi à tous les personnages ZEPETO créés à l'exécution, y compris les personnages NPC.
- N'hésitez pas à faire preuve de créativité et à l'appliquer de manière amusante !
:::