Modification de la couleur du personnage ZEPETO et de la couleur des objets portés

8 min

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.

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.

📘 Matériaux Unity 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é.

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

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.

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é.

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.

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.

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é :

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

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 !