ZEPETO character hide and show

Using Renderer method

You can set ZEPETO Character's Renderer to be disabled to make it invisible to the camera.

The following is a sample code that hides and shows the appearance of the character by pressing a button.

Create an empty object by selecting Hierarchy > Create Empty Object and renaming it to HideShowCharacter.
Create a TypeScript by selecting Project > Create > ZEPETO > TypeScript and renaming it to HideShowCharacter.
Add a script to the HideShowCharacter object.
Write the sample script as follows:

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(() => {
                // Disable the Renderer of the Zepeto Character to make it invisible to the camera 
                ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character.GetComponentsInChildren<Renderer>().forEach(r => {
                    r.enabled = false;
                    console.log("Hide");
                });
            });
 
            this.showCharacterBtn.onClick.AddListener(() => {
                ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character.GetComponentsInChildren<Renderer>().forEach(r => {
                    r.enabled = true;
                    console.log("Show");
                });
            });  
        });
    }
 
}

Add buttons to the screen using Canvas > Button and assign them to the script inspector.

Press the play button to run the code.

Using Camera Culling Mask method

In addition to disabling a character's Renderer, you can also hide and show a character's appearance by manipulating its layer using ZEPETO Camera's Culling Mask.

The Culling Mask allows you to selectively hide specific layers from being rendered.

By default, ZEPETO characters are not assigned to any layer when they are created.

Here is an example code that demonstrates how to hide and show a ZEPETO character by first setting the Culling Mask to hide a specific layer, and then changing the character's layer based on button clicks:

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

// A function that changes the layer of all sub-objects of a character
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 (var i = 0; i < transform.childCount; i++)
    {
        var 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(() => {
            var character = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
            this.zepetoCamera = ZepetoPlayers.instance.LocalPlayer.zepetoCamera.camera;
            // Add layer to culling mask
            this.zepetoCamera.cullingMask |= (1 << LayerMask.NameToLayer("Player"));
            // Remove layer from culling mask
            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");
    }
}