--- title: 제페토 캐릭터 생성하기 slug: world-sdk-guide-kr/n-0pSXE6cEbxm_uvrVrOp docTags: createdAt: 2024-09-02T08:34:13.136Z --- ## 1 단계 : Scene에 발판 추가하기 - 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" darkWidth="301" darkHeight="371" 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" darkWidth="389" darkHeight="180" showCaption="false"} :::hint{type="success"} **👍 팁** - Plane은 테스트를 위한 가장 기본적인 바닥입니다. - Collider가 포함된 Object라면 어떤 것이든 상관은 없습니다. - 월드 제작에 익숙해진다면 멋진 맵을 만들어서 바닥을 대신할 수 있습니다. - 발판이 없다면 캐릭터가 생성되자마자 떨어져서 보이지 않게 됩니다. ::: ## 2단계 : ZEPETO Players 컴포넌트 추가하기 Hierarchy 창에서, ZEPETO → ZepetoPlayers 탭을 클릭해서 Scene에 추가할 수 있습니다. ::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 창에서 캐릭터 컨트롤과 관련된 각종 설정값을 지정할 수 있습니다. - 주로 제페토 카메라에 대한 설정이나 캐릭터 이동속도, 점프 높이 등을 설정할 수 있습니다. - 이 예제에서는 기본 값으로 사용하도록 하겠습니다. :::hint{type="info"} **📘 **상세한 설정은 ZEPETO Character Controller 가이드를 참고하여 주세요.[ZEPETO 캐릭터 컨트롤러](docId\:tQnzuCZsWK1_KX_uLai0n) ::: ## 3단계 : ZEPETO 캐릭터 로딩하기 캐릭터 로딩을 위해 새로운 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 GameObejct 생성시 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\) Hierarchy에서 CharacterLoader 게임 오브젝트를 선택하고, Inspector에서 Add Component 버튼을 클릭해주세요. ![](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) Zepeto Script 컴포넌트의 Attach Zepeto Script 버튼을 클릭해주세요. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/gN2rDUqBRrFXwzZt3ffMr_image.png) 8\) Attach Zepeto Script 창에서 앞서 생성한 CharacterLoader ZEPETO Script 파일을 선택해주세요. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/CehMpoHs4aq97ZJMice1m_image.png) 9\) CharacterLoader 게임 오브젝트를 다음과 같이 구성해 주세요. ![](https://api.archbee.com/api/optimize/xv-TGeWVTX2GDZMFGOf1Y/xCmdyd_6xOKWjGsvsajGk_image.png) :::hint{type="danger"} - ZEPETOScript는 Scene에 존재하는 GameObject에 컴포넌트로 추가하지 않으면 실행되지 않습니다. ::: 10) 다음은 자신의 zepeto id를 입력해서 캐릭터를 Scene에 로드해 보겠습니다. CharacterLoader ZEPETOScript 파일을 Open하여 스크립트 에디터 프로그램을 실행시켜줍니다. 그런 다음 아래의 예제 스크립트를 적용하세요. - \[ZEPETO\_ID] 부분에 ZEPETO 아이디를 입력하여 주세요. - 당신의 ZEPETO ID가 'abcd'라면, 다음과 같이 입력해야 합니다. `ZepetoPlayers.instance.CreatePlayerWithZepetoId("", "abcd", new SpawnInfo(), true)` ### 특정 Zepeto ID의 캐릭터를 로딩하는 스크립트 :::CodeblockTabs 특정 ZEPETO ID로 ZEPETO 캐릭터를 로드하는 스크립트 ```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\) 스크립트 저장 후 유니티 에디터로 돌아와 주세요. - 4단계의 실행하기로 넘어가 주세요. :::hint{type="danger"} * 이 코드를 사용할 경우 특정 제페토 ID의 아바타로만 플레이하게 됩니다. * 월드를 출시할 때는 코드에 입력한 ZEPETO 아이디 대신, 월드에 접속한 유저의 ZEPETO 아이디 기반으로 코드를 수정해야 합니다. 아래 스크립트를 사용하여 주세요. ::: ### 로그인한 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() { // 에디터를 통해 ZEPETO에 로그인하여 지정된 사용자 ID를 가져옵니다. ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, new SpawnInfo(), true); ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => { const player: LocalPlayer = ZepetoPlayers.instance.LocalPlayer; }); } } ``` ::: - 이 스크립트는 특정한 ZEPETO ID를 입력받지 않고, 로그인한 ID 기반으로 제페토 캐릭터가 생성되게 되므로 반드시 유니티 에디터에 로그인 한 후 테스트를 수행하여 주세요. - 스크립트 저장 후 유니티 에디터로 돌아와 주세요. - 4단계의 실행하기로 넘어가 주세요. :::hint{type="danger"} * Local 플레이어 생성 코드는 클라이언트 스크립트에서 하나만 존재하도록 관리해 주세요. * 동일한 플레이어가 여러 명 생성된다면 CreatePlayerWithUserId() 스크립트가 다른 곳에서도 호출되고 있을 수 있습니다. * 주로 많이 하는 실수로는 이 가이드에 있는 캐릭터 생성 코드를 남겨둔 채로 멀티플레이 예제 코드를 적용해서 이중으로 캐릭터가 생성되는 경우이므로, 한 쪽을 주석처리 해주는 방식으로 관리해 주세요. ::: ## 4단계 : 실행하기 화면 중앙의 \[▶︎(play)] 버튼을 통해서 CharacterLoader가 동작하는 것을 확인할 수 있습니다. 이렇게 로딩된 캐릭터를 로컬 플레이어의 캐릭터라고 하며, 사용자가 자신의 기기에서 직접 조작할 수 있는 ZEPETO 캐릭터를 뜻합니다. CharacterLoader는 PC/Mobile 환경에 대응하여 각각의 Input Event에 대한 공통된 캐릭터 컨트롤 Key Mapping이 정의되어 있기 때문에, 어떤 플랫폼 환경에서든 Load한 캐릭터를 Scene 내에서 바로 조작할 수 있습니다. PC 환경에서는 키보드와 마우스를 통해 캐릭터 및 카메라를 조작할 수 있으며, 모바일 환경에서는 아래 스크린샷과 같이 가상패드를 통해 캐릭터 및 카메라 조작이 가능합니다. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-8SVLdCW6nNQ1LMI56pknJ-20240904-102412.gif) :::hint{type="success"} **👍 캐릭터 컨트롤 시 지원되는 입력 인터페이스** **PC** - Move: 키보드 방향키, WASD - Jump: Space - Double Jump : (좌측) Shift - Zoom: 마우스 휠 - Rotate: 스크린 드래그 **모바일** - Move: (스크린 좌측 하단)가상 패드 - Jump: (스크린 우측 하단)가상 패드 버튼 - Zoom: (두 손가락)스크린 드래그 - Rotate: (한 손가락)스크린 드래그 ::: 만약 ZEPETO 캐릭터 생성이 정상적으로 이루어지지 않는다면 `Unity menu > Project Settings > Editor > Enter Play Mode Settings`설정으로 들어가 주세요. - `Enter Play Mode Options` 를 끄기로 설정합니다. ![](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()에 원하는 값을 설정해주는 방법으로 특정 위치에서 생성되게 할 수 있습니다. 맵의 (0,0,0) 위치에는 3D Object > Cube를 미리 배치해 두었습니다. 캐릭터의 생성 위치값을 다음과 같이 변경하면 Cube 위에서 생성됩니다. :::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); // 에디터를 통해 Zepeto에 로그인하여 지정된 사용자 ID를 가져옵니다. ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, spawnInfo, true); ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => { const player: LocalPlayer = ZepetoPlayers.instance.LocalPlayer; }); } } ``` ::: 화면 중앙의 \[▶︎(play)] 버튼을 통해서 캐릭터 생성을 확인해 보세요. ![](https://api.archbee.com/api/optimize/fCt3n1oCa8rgNJ8fw9I2N-SnH-VRscD0asbLuAkFAHn-20240904-102412.png) 위치 값과 방향 값을 변경하면, 다음과 같이 엎어진 채로 생성되게 할 수도 있습니다. :::CodeblockTabs SpawnInfo 샘플 ```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)