---
title: การสร้างตัวละคร Zepeto
slug: world-sdk-guide-th/MRnK-zepeto
docTags: 
createdAt: 2024-09-02T08:34:13.136Z
---

## ขั้นตอนที่ 1 : การเพิ่มฐานในฉาก

- ในหน้าต่าง Hierarchy ให้คลิกที่ 3D Object → Plane.

::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-j5rQy5z3Bmb8ourQPZECC-20240904-102412.png" size="54" width="301" height="371" position="center" showCaption="false"}

- ตั้งค่าตำแหน่งของ Plane เป็น X: 0, Y: 0, Z: 0 และตั้งค่าขนาดให้ใหญ่พอเป็น X: 10, Y: 1, Z: 10.

::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-zlBL0jPUiiB-e_nYD5lIL-20240904-102412.png" size="40" width="389" height="180" position="center" showCaption="false"}

:::hint{type="success"}
**👍 เคล็ดลับ**

- Plane เป็นพื้นฐานที่ง่ายที่สุดสำหรับการทดสอบ.
- ไม่สำคัญว่าคุณจะใช้สิ่งใดตราบใดที่มันเป็นวัตถุที่มี Collider.
- เมื่อคุณคุ้นเคยกับการสร้างโลกมากขึ้น คุณสามารถสร้างแผนที่ที่เจ๋งเพื่อแทนที่พื้นได้.
- หากไม่มีแพลตฟอร์ม ตัวละครจะตกลงทันทีที่ถูกสร้างและจะไม่สามารถมองเห็นได้.
:::



## ขั้นตอนที่ 2 : การเพิ่มส่วนประกอบ ZEPETO Players

ในหน้าต่าง Hierarchy ให้เลือก ZEPETO → แท็บ ZepetoPlayers.

::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-qcHtp5uBzcW5VHQGrCgky-20240904-102412.png" size="44" width="321" height="473" position="center" showCaption="false"}

วัตถุที่เรียกว่า ZepetoPlayers จะถูกสร้างขึ้นโดยอัตโนมัติตามที่แสดงด้านล่าง  

ZepetoPlayers เป็นส่วนประกอบที่จัดการโมดูลตัวควบคุมตัวละครภายในโลก.

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



ตั้งค่าค่าต่างๆ สำหรับการควบคุมตัวละครและฟังก์ชันที่เกี่ยวข้องสามารถตั้งค่าได้ในหน้าต่าง Inspector.

- คุณสามารถตั้งค่าต่างๆ เช่น การตั้งค่ากล้อง ZEPETO ความเร็วในการเคลื่อนที่ของตัวละคร ความสูงในการกระโดด ฯลฯ ได้ตามปกติ
- ในตัวอย่างนี้ เราจะใช้ค่าตั้งต้น

:::hint{type="info"}
**📘 **สำหรับการตั้งค่าที่ละเอียด โปรดดูที่คู่มือ ZEPETO Character Controller.[ตัวควบคุมตัวละคร ZEPETO](docId\:NbX9cvlMOzM5VwvYtEQ_S) 
:::



## ขั้นตอนที่ 3 : โหลดตัวละคร

ในการโหลดตัวละคร คุณต้องสร้างไฟล์ ZEPETOScript ใหม่

1\) ในแผง \[Project] ให้เลือกเมนู \[+] ที่มุมซ้ายบนหรือเลือก Assets → Create → ZEPETO → TypeScript.

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



2\) เมื่อสร้างไฟล์ ZEPETOScript แล้ว โปรดป้อนชื่อเป็น CharacterLoader ไฟล์สคริปต์จะถูกสร้างขึ้นดังแสดงด้านล่าง

::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/DykIf_HYe4O9GwWHEKQaV_image.png" size="66" width="2880" height="1520" position="center" showCaption="false"}



3\) ในเมนู Hierarchy → \[+] → เรียกใช้เมนู Create Empty

::Image[]{src="https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-QyiUep5E4kvP6g35JLYNZ-20240904-102412.png" size="64" width="311" height="276" position="center" showCaption="false"}



4\) เมื่อสร้าง Empty GameObject ให้เขียน CharacterLoader GameObject จะถูกสร้างขึ้นดังแสดงด้านล่าง

::Image[]{src="https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/i78pMoFETMuNHms6xPgOC_image.png" size="48" width="2880" height="1454" position="center" showCaption="false"}



5\) เลือก CharacterLoader GameObject ในลำดับชั้นและคลิกปุ่ม Add Component ใน Inspector

![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/hEFdTqAlIRQlM7D_7ESX3_image.png)



6\) ในหน้าต่าง Add Component ให้เพิ่มส่วนประกอบ Zepeto script

![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/sveZxtP0NmzHbbth36HL4_image.png)



7) คลิกปุ่ม Attach Zepeto Script บนส่วนประกอบ Zepeto Script

![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/gN2rDUqBRrFXwzZt3ffMr_image.png)



8\) เลือกไฟล์ CharacterLoader ZEPETO Script ที่คุณสร้างไว้ก่อนหน้านี้ในหน้าต่างแนบ Zepeto Script

![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/CehMpoHs4aq97ZJMice1m_image.png)



9\) กำหนดค่า CharacterLoader GameObject ดังต่อไปนี้

![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/xCmdyd_6xOKWjGsvsajGk_image.png)

:::hint{type="danger"}
- ZEPETOScript จะไม่ทำงานหากไม่ได้เพิ่มเป็น component ใน GameObject ใน Scene.
:::



10) ขั้นตอนต่อไปคือโหลดตัวละครเข้าสู่ Scene โดยป้อน ID ZEPETO ของคุณ
เปิดไฟล์ ZEPETO Script ของ CharacterLoader เพื่อเรียกใช้โปรแกรมแก้ไขสคริปต์
จากนั้นใช้สคริปต์ตัวอย่างด้านล่าง

- กรุณาใส่ ZEPETO ID ของคุณในที่ที่เขียนว่า \[ZEPETO\_ID].
- หาก ZEPETO ID ของคุณคือ 'abcd' คุณควรใส่มันเป็น `ZepetoPlayers.instance.CreatePlayerWithZepetoId("", "abcd", new SpawnInfo(), true)`



### สคริปต์สำหรับโหลดตัวละคร ZEPETO ด้วย ZEPETO ID ที่เฉพาะเจาะจง

:::CodeblockTabs
สคริปต์สำหรับโหลดตัวละคร ZEPETO ด้วย ZEPETO ID ที่เฉพาะเจาะจง

```typescript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { SpawnInfo, ZepetoPlayers, LocalPlayer } from 'ZEPETO.Character.Controller';

export default class CharacterLoader extends ZepetoScriptBehaviour {

    Start() {
        ZepetoPlayers.instance.CreatePlayerWithZepetoId("", "[ZEPETO_ID]", new SpawnInfo(), true);
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            const player: LocalPlayer = ZepetoPlayers.instance.LocalPlayer;
        });
    }
}
```
:::



11\) หลังจากบันทึกสคริปต์แล้ว กรุณากลับไปที่ Unity editor.

- กรุณาไปที่การดำเนินการของขั้นตอนที่ 4.

:::hint{type="danger"}
* หากคุณใช้โค้ดนี้ คุณจะเล่นได้เฉพาะกับอวตารของ ZEPETO ID ที่เฉพาะเจาะจงเท่านั้น.
* เมื่อคุณเปิดโลกของคุณ คุณจะต้องปรับเปลี่ยนโค้ดของคุณให้ขึ้นอยู่กับ ZEPETO ID ของผู้ใช้ที่เข้าถึงโลกของคุณ แทนที่จะเป็น ZEPETO ID ที่คุณป้อนในโค้ดของคุณ กรุณาใช้สคริปต์ด้านล่างนี้.
:::



### สคริปต์สำหรับโหลดตัวละครของ ID ที่เข้าสู่ระบบ

:::CodeblockTabs
สคริปต์สำหรับโหลดตัวละครของ ID ที่เข้าสู่ระบบ

```typescript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { SpawnInfo, ZepetoPlayers, LocalPlayer, ZepetoCharacter } from 'ZEPETO.Character.Controller';
import { WorldService } from 'ZEPETO.World'; 
 
export default class CharacterLoader extends ZepetoScriptBehaviour {   
 
    Start() {       
        // Grab the user id specified from logging into zepeto through the editor.
        ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, new SpawnInfo(), true);            
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {           
            const player: LocalPlayer = ZepetoPlayers.instance.LocalPlayer;       
        });   
    }
}
```
:::

- สคริปต์นี้สร้างตัวละคร ZEPETO ตาม ID ที่เข้าสู่ระบบและไม่รับ ID ZEPETO เฉพาะ ดังนั้นโปรดตรวจสอบให้แน่ใจว่าคุณได้เข้าสู่ระบบใน Unity editor ก่อนทำการทดสอบ
- หลังจากบันทึกสคริปต์แล้ว โปรดกลับไปที่ Unity editor
- โปรดดำเนินการต่อไปยังขั้นตอนที่ 4

:::hint{type="danger"}
* โปรดตรวจสอบให้แน่ใจว่ามีโค้ดการสร้างผู้เล่นท้องถิ่นเพียงหนึ่งเดียวในสคริปต์ของไคลเอนต์
* หากมีการสร้างผู้เล่นที่เหมือนกันหลายคน สคริปต์ CreatePlayerWithUserId() อาจถูกเรียกจากที่อื่น
* ข้อผิดพลาดทั่วไปคือการใช้โค้ดตัวอย่างหลายผู้เล่นในขณะที่ปล่อยให้โค้ดการสร้างตัวละครในคู่มือนี้ไม่เปลี่ยนแปลง ส่งผลให้ตัวละครถูกสร้างขึ้นสองครั้ง โปรดจัดการโดยการคอมเมนต์ออกด้านหนึ่ง
:::



## ขั้นตอนที่ 4 : เรียกใช้

ใช้ปุ่ม \[▶︎(เล่น)] ที่กลางหน้าจอเพื่อตรวจสอบว่า CharacterLoader ทำงานได้อย่างถูกต้องหรือไม่

ตัวละครที่โหลดเข้ามาจะถูกเรียกว่า ตัวละครของผู้เล่นท้องถิ่น ซึ่งหมายถึงตัวละคร ZEPETO ที่ผู้ใช้สามารถควบคุมได้โดยตรงบนอุปกรณ์ของตนเอง

CharacterLoader มีการแมพปุ่มควบคุมตัวละครที่ใช้ร่วมกันสำหรับแต่ละเหตุการณ์การป้อนข้อมูลที่ตรงกับอุปกรณ์ (PC/มือถือ) ดังนั้นตัวละครที่โหลดเข้ามาสามารถควบคุมได้ในฉากโดยไม่คำนึงถึงแพลตฟอร์ม

บน PC ตัวละครและกล้องสามารถทำงานได้ด้วยเมาส์ บนอุปกรณ์มือถือ ตัวละครและกล้องสามารถทำงานได้ด้วยแผ่นควบคุมเสมือนตามที่แสดงในภาพหน้าจอด้านล่าง

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-8SVLdCW6nNQ1LMI56pknJ-20240904-102412.gif)

:::hint{type="success"}
**👍 อินเตอร์เฟซการป้อนข้อมูลต่อไปนี้รองรับสำหรับการควบคุมตัวละคร:**
**PC**

- เคลื่อนที่: ลูกศรบนคีย์บอร์ด, WASD
- กระโดด: Space
- กระโดดสองครั้ง: (ซ้าย) Shift
- ซูม: ล้อเมาส์
- หมุน: ลากหน้าจอ

**มือถือ**

- เคลื่อนที่: (มุมล่างซ้ายของหน้าจอ) แผ่นเสมือน
- กระโดด: (มุมล่างขวาของหน้าจอ) ปุ่มแผ่นเสมือน
- ซูม: (สองนิ้ว) ลากหน้าจอ
- หมุน: (นิ้วเดียว) ลากหน้าจอ
:::



หากการสร้างตัวละคร ZEPETO ไม่ทำงานอย่างถูกต้อง โปรดไปที่ `เมนู Unity > การตั้งค่าโปรเจกต์ > บรรณาธิการ > ตั้งค่าโหมดเล่น`.

- ตั้งค่าตัวเลือกโหมดเล่นให้เป็นปิด.

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-Tx-wTd76glhN_dTqIHHIs-20240904-102412.png)



## ขั้นตอนที่ 5 : เปลี่ยนตำแหน่งเริ่มต้นของตัวละคร ZEPETO

ตำแหน่งเริ่มต้นของตัวละคร ZEPETO ถูกสร้างขึ้นที่ UnityEngine.Vector3(0,0,0) เว้นแต่จะตั้งค่าอื่น.

ค่าการหมุนก็ถูกสร้างขึ้นที่มุมของ UnityEngine.Quaternion.Euler(0,0,0).

ตำแหน่งการเกิดตัวละครและค่าการหมุนถูกตั้งค่าโดยใช้ `ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, new SpawnInfo(), true); `อาร์กิวเมนต์ของฟังก์ชัน SpawnInfo() จะถูกสร้างขึ้น.

ดังนั้นคุณสามารถตั้งค่าค่าที่ต้องการสำหรับ SpawnInfo() ก่อนที่จะเรียกใช้ฟังก์ชันการสร้างตัวละครเพื่อให้แน่ใจว่ามันจะเกิดขึ้นที่ตำแหน่งเฉพาะ.

เราได้วางวัตถุ 3D > ลูกบาศก์ที่ตำแหน่ง (0,0,0) บนแผนที่.

หากคุณเปลี่ยนค่าตำแหน่งการเกิดสำหรับตัวละครเป็นค่าต่อไปนี้ มันจะเกิดขึ้นบนลูกบาศก์.

:::CodeblockTabs
CharacterLoader

```typescript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { SpawnInfo, ZepetoPlayers, LocalPlayer, ZepetoCharacter } from 'ZEPETO.Character.Controller';
import { WorldService } from 'ZEPETO.World';
import { Quaternion, Vector3 } from 'UnityEngine';

export default class CharacterLoader extends ZepetoScriptBehaviour {

    Start() {
        // ตั้งค่าตำแหน่งการเกิดตัวละคร
        const spawnInfo = new SpawnInfo();
        spawnInfo.position = new Vector3(0,2,0);
        // ตั้งค่าการหมุนตัวละคร
        spawnInfo.rotation = Quaternion.Euler(0,0,0);

        // ดึง user id ที่ระบุจากการเข้าสู่ระบบ zepeto ผ่าน editor.
        ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, spawnInfo, true);
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            const player: LocalPlayer = ZepetoPlayers.instance.LocalPlayer;
        });
    }
}
```
:::



ใช้ปุ่มเล่นที่กลางหน้าจอเพื่อตรวจสอบการสร้างตัวละคร.

![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-SnH-VRscD0asbLuAkFAHn-20240904-102412.png)



หากคุณเปลี่ยนค่าตำแหน่งและการหมุน คุณยังสามารถสร้างตัวละครที่นอนอยู่แบบนี้ได้.

:::CodeblockTabs
SpawnInfo Sample

```typescript
// ตั้งค่าตำแหน่งการเกิดตัวละคร
const spawnInfo = new SpawnInfo();
spawnInfo.position = new Vector3(2,1,2);
// ตั้งค่าการหมุนตัวละคร
spawnInfo.rotation = Quaternion.Euler(90,0,0);
```
:::

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