Masquer et afficher l'apparence du personnage ZEPETO

4 min

Utilisation de la méthode Renderer

Vous pouvez désactiver le Renderer du personnage ZEPETO pour le rendre invisible à la caméra.

Voici un exemple de code pour cacher et montrer l'apparence du personnage en appuyant sur un bouton.

1) Créez une hiérarchie > Créez un objet vide et renommez-le en HideShowCharacter.

2) Créez un projet > Créez > ZEPETO > TypeScript et renommez-le en HideShowCharacter.

3) Ajoutez un script à l'objet HideShowCharacter.

4) Écrivez le script d'exemple comme indiqué ci-dessous.

import { Renderer } from 'UnityEngine';
import { Button } from 'UnityEngine.UI';
import { SpawnInfo, ZepetoPlayers } from 'ZEPETO.Character.Controller';
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
 
export default class HideShowCharacter extends ZepetoScriptBehaviour {
 
    public hideCharacterBtn: Button;
    public showCharacterBtn: Button;
 
    Start() {
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this.hideCharacterBtn.onClick.AddListener(() => {
                // Désactiver le Renderer du personnage Zepeto pour le rendre invisible à la caméra 
                ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character.GetComponentsInChildren<Renderer>().forEach(r => {
                    r.enabled = false;
                    console.log("Cacher");
                });
            });
 
            this.showCharacterBtn.onClick.AddListener(() => {
                ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character.GetComponentsInChildren<Renderer>().forEach(r => {
                    r.enabled = true;
                    console.log("Montrer");
                });
            });  
        });
    }
 
}

5) Utilisez Canvas > Bouton pour ajouter chaque bouton à l'écran et les assigner à l'inspecteur de script.

6)Veuillez appuyer sur le bouton [▶︎(play)] pour l'exécuter.

Modifier le calque du personnage pour gérer le masquage

In addition to disabling the character's Renderer, you can also hide and show the character's appearance.

Cela se fait en utilisant le Masque de Culling dans la caméra ZEPETO.

Le Masque de Culling vous permet de traiter des couches spécifiques comme invisibles.

Lorsqu'un personnage ZEPETO est créé, aucune couche n'est définie par défaut.

Le code d'exemple suivant montre comment rendre une couche spécifique invisible dans la caméra ZEPETO, puis changer la couche du personnage ZEPETO au clic d'un bouton pour le cacher et le montrer.

import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { Camera, LayerMask, Transform } from "UnityEngine";
import { ZepetoCharacter, ZepetoPlayers } from "ZEPETO.Character.Controller";
import { Button } from "UnityEngine.UI";

// Une fonction qui change la couche de tous les sous-objets d'un personnage
function ChangeLayersRecursively(transform: Transform, layer: string, fromLayer?: string): void {
    if (!transform || !layer || layer.length === 0) {
        return;
    }

    if (fromLayer) {
        if (transform.gameObject.layer === LayerMask.NameToLayer(fromLayer)) {
            transform.gameObject.layer = LayerMask.NameToLayer(layer);
        }
    } else {
        transform.gameObject.layer = LayerMask.NameToLayer(layer);
    }
    for (let i = 0; i < transform.childCount; i++)
    {
        let child = transform.GetChild(i);
        ChangeLayersRecursively(child, layer, fromLayer);
    }
}

export default class ChangeCameraLayer extends ZepetoScriptBehaviour {

    private zepetoCamera : Camera;
    public hideCharacterBtn: Button;
    public showCharacterBtn: Button;

    Start() {
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            let character = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            this.zepetoCamera = ZepetoPlayers.instance.LocalPlayer.zepetoCamera.camera;
            // Ajouter une couche au masque de culling
            this.zepetoCamera.cullingMask |= (1 << LayerMask.NameToLayer("Player"));
            // Retirer une couche du masque de culling
            this.zepetoCamera.cullingMask &= ~(1 << LayerMask.NameToLayer("TransparentFX"));

            this.hideCharacterBtn.onClick.AddListener(() => {
                this.SetHiddenLayer(character);
            });

            this.showCharacterBtn.onClick.AddListener(() => {
                this.SetPlayerLayer(character);
            });
        });
    }

    SetPlayerLayer(playerObject: ZepetoCharacter) {
        ChangeLayersRecursively(playerObject.transform, "Player");
    }

    SetHiddenLayer(playerObject: ZepetoCharacter) {
        ChangeLayersRecursively(playerObject.transform, "TransparentFX");
    }
}