---
title: ZEPETOキャラクターの外見を隠すと表示する
slug: world-sdk-guide-ja/gLEv-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\) Canvas > Buttonを使用して、各ボタンを画面に追加し、スクリプトインスペクタに割り当てます。

::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");
    }
}
```