---
title: การซ่อนและแสดงรูปลักษณ์ของตัวละคร ZEPETO
slug: world-sdk-guide-th/e81o-zepeto
docTags: 
createdAt: 2024-09-02T08:34:13.135Z
---

## การใช้วิธี Renderer

คุณสามารถปิด Renderer ของตัวละคร ZEPETO เพื่อทำให้มันมองไม่เห็นในกล้องได้

ต่อไปนี้คือตัวอย่างโค้ดเพื่อซ่อนและแสดงรูปลักษณ์ของตัวละครด้วยการกดปุ่ม

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



1\) สร้าง Hierarchy > สร้างวัตถุเปล่าและเปลี่ยนชื่อเป็น 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(() => {
                // ปิด Renderer ของตัวละคร 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 เพื่อเพิ่มปุ่มแต่ละปุ่มลงบนหน้าจอและกำหนดให้กับสคริปต์ใน Inspector

::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)



## เปลี่ยนเลเยอร์ของตัวละครเพื่อจัดการการซ่อน

นอกจากการปิดการใช้งาน Renderer ของตัวละครแล้ว คุณยังสามารถซ่อนและแสดงรูปลักษณ์ของตัวละครได้อีกด้วย.

สิ่งนี้ทำได้โดยการใช้ Culling Mask ในกล้อง ZEPETO.

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