---
title: 隐藏和显示ZEPETO角色外观
slug: world-sdk-guide-ch/nsM4-zepeto
docTags: 
createdAt: 2024-09-02T08:34:13.135Z
---

## 使用渲染器方法

您可以禁用ZEPETO角色的渲染器，使其对相机不可见。

以下是一个示例代码，可以通过按下按钮来隐藏和显示角色的外观。

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



1\) 创建层级 > 创建空对象并将其重命名为HideShowCharacter。

2\) 创建项目 > 创建 > ZEPETO > TypeScript并将其重命名为HideShowCharacter。

3\) 将脚本添加到HideShowCharacter对象。

4\) 按如下所示编写示例脚本。

:::CodeblockTabs
HideShowCharacter

```typescript
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(() => {
                // 禁用Zepeto角色的渲染器，使其对相机不可见 
                ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character.GetComponentsInChildren<Renderer>().forEach(r => {
                    r.enabled = false;
                    console.log("隐藏");
                });
            });
 
            this.showCharacterBtn.onClick.AddListener(() => {
                ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character.GetComponentsInChildren<Renderer>().forEach(r => {
                    r.enabled = true;
                    console.log("显示");
                });
            });  
        });
    }
 
}
```
:::



5\) 使用画布 > 按钮将每个按钮添加到屏幕并将其分配给脚本检查器。

::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-k52OchCmTDxBmf7Ly1QlN-20240904-102417.png" size="68" width="702" height="714" position="center" showCaption="false"}



6\) 按下 \[▶︎(播放)] 按钮以运行它。

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



## 更改角色的层以处理隐藏

除了禁用角色的渲染器外，您还可以隐藏和显示角色的外观。

这是通过利用ZEPETO相机中的剔除遮罩完成的。

剔除遮罩允许您将特定层视为不可见。

当创建ZEPETO角色时，默认情况下没有设置任何层。

以下示例代码展示了如何在ZEPETO相机中使特定层不可见，然后在单击按钮时更改ZEPETO角色的层以隐藏和显示它。

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

// 一个更改角色所有子对象层的函数
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;
            // 将层添加到剔除遮罩
            this.zepetoCamera.cullingMask |= (1 << LayerMask.NameToLayer("Player"));
            // 从剔除遮罩中移除层
            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");
    }
}
```