---
title: 제페토 캐릭터 외형 숨기기, 나타나기
slug: world-sdk-guide-kr/bpnNGBn00sLziN958Z5eF
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 카메라의 Culling Mask를 활용하여 수행됩니다.

Culling Mask를 사용하면 특정 레이어를 보이지 않게 처리할 수 있습니다.

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;
            // culling mask에 레이어 추가
            this.zepetoCamera.cullingMask |= (1 << LayerMask.NameToLayer("Player"));
            // 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");
    }
}
```