NPC 생성하고 제어하기

zepeto 캐릭터 npc를 구현하는 방법을 알아봅시다 각 기능 별로 제공되는 샘플 스크립트를 응용해서 원하는 npc를 월드에 추가해 보세요 npc 생성하기 zepeto id를 이용하여 npc를 생성합니다 주의사항 npc의 외형 및 착용 아이템은 입력한 zepeto id의 모습과 동일합니다 특정 외형을 가진 zepeto 캐릭터를 먼저 세팅하고, npc를 생성할 것을 권장합니다 npc가 생성될 위치 오브젝트 세팅하기 scene에 기본적으로 zepeto 캐릭터 생성 코드를 구현해 주세요 📘 다음 가이드를 참고하여 주세요 \[ creating a zepeto character docid k4o tkiw83wg jhy0isa ] hierarchy > create empty object를 생성하고 이름을 npc로 변경합니다 npc가 생성될 위치를 저장할 오브젝트입니다 position, rotation을 설정합니다 npc 생성 스크립트 작성하기 1\) project > create > zepeto > typescript를 생성하고 npccreator로 이름을 변경합니다 2\) 아래와 같이 샘플 스크립트를 작성합니다 import { zepetoscriptbehaviour } from 'zepeto script'; import { spawninfo, zepetocharacter, zepetocharactercreator } from 'zepeto character controller'; export default class npccreator extends zepetoscriptbehaviour { // zepeto id of the npc public zepetoid string; // npc character object private npc zepetocharacter; start() { // create a new instance of spawninfo and set its position and rotation based on the object's transform const spawninfo = new spawninfo(); spawninfo position = this transform position; spawninfo rotation = this transform rotation; // use zepetocharactercreator to create a new character by zepeto id and assign it to npc variable zepetocharactercreator createbyzepetoid(this zepetoid, spawninfo, (character zepetocharacter) => { this npc = character; }) } } 스크립트의 흐름은 다음과 같습니다 start() zepetocharactercreator createbyzepetoid() 함수를 사용하여 npc 오브젝트 위치에 npc를 생성한 후, npc에 저장합니다 3\) 스크립트 작성을 완료한 후 npc 오브젝트에 스크립트를 추가합니다 4\) 인스펙터에서 zepeto id를 할당합니다 zepeto id npc의 zepeto id입니다 5\) play 버튼을 눌러 실행하면 npc가 생성됩니다 6\) 같은 방법으로 npc 위치 오브젝트를 추가하고, npc 스크립트를 추가하면 여러 npc를 쉽게 생성할 수 있습니다 npc에 이름표 붙이기 npc에 이름표를 붙여 플레이어와 npc를 구분할 수 있습니다 이름표 캔버스 프리팹 제작하기 1\) hierachy > ui > canvas를 생성하고 prefnametagcanvas로 이름을 변경합니다 render mode를 world space로 설정합니다 2\) prefnametagcanvas의 자식으로 hierachy > ui > text를 생성하고 nametagtext로 이름을 변경합니다 이름을 나타낼 텍스트입니다 텍스트의 크기를 알맞게 만들어주기 위해 content size fitter 컴포넌트를 추가합니다 3\) 세팅이 완료되었다면 project 창으로 드래그하여 prefab으로 만들어준 뒤, 하이어라키에 남아있는 prefnametagcanvas는 삭제합니다 npc 이름표 스크립트 작성하기 1\) project > create > zepeto > typescript를 생성하고 npccreatorwithnametag로 이름을 변경합니다 2\) 아래와 같이 샘플 스크립트를 작성합니다 import { zepetoscriptbehaviour } from 'zepeto script'; import { knowsockets, spawninfo, zepetocharacter, zepetocharactercreator } from 'zepeto character controller'; import { canvas, camera, vector3, object, gameobject } from 'unityengine'; import { text } from 'unityengine ui'; export default class npccreatorwithnametag extends zepetoscriptbehaviour { // zepeto id of the npc public zepetoid string; // name to be displayed in the name tag public nametag string; // prefab of the name tag canvas game object public nametagprefab gameobject; // y axis offset value of the name tag canvas game object public nametagyoffset number; // npc character object private npc zepetocharacter; // name tag canvas game object private npcnametagobject gameobject; // text inside the name tag canvas game object private npcnametagtext text; // name tag canvas private canvas canvas; // world camera private cachedworldcamera camera; start() { // create a new instance of spawninfo and set its position and rotation based on the object's transform const spawninfo = new spawninfo(); spawninfo position = this transform position; spawninfo rotation = this transform rotation; // use zepetocharactercreator to create a new character by zepeto id and assign it to npc variable zepetocharactercreator createbyzepetoid(this zepetoid, spawninfo, (character zepetocharacter) => { this npc = character; // set the name tag this setnametag(); }) } // set the name tag setnametag() { // dynamically create the name tag canvas game object this npcnametagobject = object instantiate(this nametagprefab) as gameobject; // set the parent of the name tag canvas game object transform to be the npc transform this npcnametagobject transform setparent(this npc transform); // set the position of the name tag canvas game object above the npc's head this npcnametagobject transform position = vector3 op addition(this npc getsocket(knowsockets head upper) position, new vector3(0, this nametagyoffset,0)); // set the text inside the name tag this npcnametagtext = this npcnametagobject getcomponentinchildren\<text>(); this npcnametagtext text = this nametag; this canvas = this npcnametagobject getcomponent\<canvas>(); this cachedworldcamera = object findobjectoftype\<camera>(); this canvas worldcamera = this cachedworldcamera; } private update() { if (this canvas != null) { this updatecanvasrotation(); } } // update the rotation of the name tag canvas to face the camera private updatecanvasrotation() { this canvas transform lookat(this cachedworldcamera transform); this canvas transform rotate(0, 180, 0); } } 스크립트의 흐름은 다음과 같습니다 start() setnametag() 커스텀 함수를 호출합니다 setnametag() npc의 이름표를 동적으로 생성하고, 생성된 이름표의 위치를 npc 머리 위로 조정합니다 이름표 안의 텍스트를 설정합니다 update() updatecanvasrotation() 커스텀 함수를 호출해 캔버스를 카메라에 맞게 회전시킵니다 3\) 스크립트 작성을 완료한 후 npc 오브젝트에 스크립트를 추가합니다 4\) 인스펙터에서 zepeto id, name tag, name tag prefab, name tag y offset을 할당합니다 name tag npc 이름표에 표시될 이름입니다 name tag prefab 이름표 캔버스 프리팹입니다 name tag y offset 이름표 캔버스 오브젝트의 y축 오프셋 값을 저장하는 변수입니다 캐릭터의 머리 위에 이름표를 띄울 때, 캐릭터와 이름표 사이의 거리를 조절할 수 있습니다 5\) play 버튼을 눌러 실행하면 이름표가 붙은 npc가 생성됩니다 npc 액션 컨트롤하기 npc의 액션을 컨트롤할 수 있습니다 점프 zepeto character api를 이용하여 npc가 점프하도록 구현합니다 zepeto character api를 이용하여 더 다양한 동작을 구현할 수 있습니다 📘 다음 가이드를 참고하여 주세요 \[ zepeto character docid 1sjftquomtcxfkg3tjh g ] npc 점프 스크립트 작성하기 1\) project > create > zepeto > typescript를 생성하고 npcjump로 이름을 변경합니다 2\) 아래와 같이 샘플 스크립트를 작성합니다 import { zepetoscriptbehaviour } from 'zepeto script'; import { spawninfo, zepetocharacter, zepetocharactercreator } from 'zepeto character controller'; import { waitforseconds } from 'unityengine'; export default class npcjump extends zepetoscriptbehaviour { // zepeto id of the npc public zepetoid string; // npc character object private npc zepetocharacter; start() { // create a new instance of spawninfo and set its position and rotation based on the object's transform const spawninfo = new spawninfo(); spawninfo position = this transform position; spawninfo rotation = this transform rotation; // use zepetocharactercreator to create a new character by zepeto id and assign it to npc variable zepetocharactercreator createbyzepetoid(this zepetoid, spawninfo, (character zepetocharacter) => { this npc = character; this startcoroutine(this jumpcoroutine()); }); } jumpcoroutine() { // infinite loop to continuously while (true) { // call the jump() method of the zepetocharacter to make it jump this npc jump(); // wait for 5 seconds yield new waitforseconds(5); } } } 스크립트의 흐름은 다음과 같습니다 start() jumpcoroutine() 코루틴을 호출합니다 jumpcoroutine() jump() 메소드를 호출하여 5초마다 npc 캐릭터가 점프합니다 3\) 스크립트 작성을 완료한 후 npc 오브젝트에 스크립트를 추가합니다 4\) play 버튼을 실행하면 npc가 점프합니다 gesture 애니메이터 컨트롤러를 이용하여 npc에게 제스쳐를 취하도록 구현합니다 애니메이터 컨트롤러를 이용하여 더 다양한 동작을 구현할 수 있습니다 📘 unity animator controller https //docs unity3d com/manual/class animatorcontroller html https //docs unity3d com/manual/class animatorcontroller html 애니메이션 클립 준비하기 다음 가이드를 참고하여 npc가 취할 제스쳐 애니메이션 클립을 준비합니다 📘 다음 가이드를 참고하여 주세요 \[ whether to use zepeto character animation docid\ ahh0r8pikezml5up q4dc ] \[ how to apply custom animation docid\ fgnaprjtltzzp5pj6sn4x ] 애니메이터 생성하기 1\) project > create > animator controller를 생성하고 npcanimatorcontroller로 이름을 변경합니다 2\) animator 탭에서 create state > empty를 생성합니다 3\) 인스펙터에서 이름을 적절하게 변경하고, 애니메이션 클립을 motion에 할당합니다 npc 제스쳐 스크립트 작성하기 1\) project > create > zepeto > typescript를 생성하고 npcgesture로 이름을 변경합니다 2\) 아래와 같이 샘플 스크립트를 작성합니다 import { zepetoscriptbehaviour } from 'zepeto script'; import { spawninfo, zepetocharacter, zepetocharactercreator } from 'zepeto character controller'; import { animator, runtimeanimatorcontroller } from 'unityengine'; export default class npcgesture extends zepetoscriptbehaviour { // the zepeto id of the npc public zepetoid string; // the animator controller of the npc public npcanimator runtimeanimatorcontroller; // npc character object private npc zepetocharacter; start() { // create a new instance of spawninfo and set its position and rotation based on the object's transform const spawninfo = new spawninfo(); spawninfo position = this transform position; spawninfo rotation = this transform rotation; // use zepetocharactercreator to create a new character by zepeto id and assign it to npc variable zepetocharactercreator createbyzepetoid(this zepetoid, spawninfo, (character zepetocharacter) => { this npc = character; // get the animator component from the npc character and set its runtimeanimatorcontroller to npcanimator this npc getcomponentinchildren\<animator>() runtimeanimatorcontroller = this npcanimator; }); } } 스크립트의 흐름은 다음과 같습니다 start() npc 오브젝트의 animator 컴포넌트를 가져와 npcanimator 변수로 지정된 animator controller로 설정합니다 3\) 스크립트 작성을 완료한 후, npc가 생성될 위치 오브젝트에 스크립트를 추가합니다 4\) 인스펙터에서 zepeto id, npc animator를 할당합니다 npc animator npc의 애니메이션 컨트롤러입니다 5\) play 버튼을 눌러 실행해보면 npc가 제스쳐를 취하는 모습을 확인할 수 있습니다 6\) 이를 응용해서 제스쳐, 점프 외에도 더 다양한 액션을 취하는 npc를 만들 수 있습니다 npc 위에 말풍선 띄우기 npc 머리 위에 canvas를 만들고, 이미지 또는 텍스트를 표시하여 말풍선을 띄울 수 있습니다 말풍선 캔버스 프리팹 생성하기 1\) hierachy > ui > canvas를 생성하고 prefspeechbubblecanvas로 이름을 변경합니다 render mode를 world space로 설정합니다 2\) prefspeechbubblecanvas의 자식으로 hierachy > ui > image를 생성하고 speeachbubbleimage로 이름을 변경합니다 말풍선의 배경이 될 이미지입니다 3\) speeachbubbleimage의 자식으로 hierachy > ui > text를 생성하고 speeachbubbletext로 이름을 변경합니다 말풍선 안의 텍스트입니다 텍스트의 크기를 알맞게 만들어주기 위해 content size fitter 컴포넌트를 추가합니다 4\) 세팅이 완료되었다면 project 창으로 드래그하여 prefab으로 만들어준 뒤, 하이어라키에 남아있는 prefspeechbubblecanvas는 삭제합니다 npc 말풍선 스크립트 작성하기 1\) project > create > zepeto > typescript를 생성하고 npcspeechbubble로 이름을 변경합니다 2\) 아래와 같이 샘플 스크립트를 작성합니다 import { zepetoscriptbehaviour } from 'zepeto script'; import { knowsockets, spawninfo, zepetocharacter, zepetocharactercreator } from 'zepeto character controller'; import { canvas, camera, vector3, object, gameobject } from 'unityengine'; import { text } from 'unityengine ui'; export default class npcspeechbubble extends zepetoscriptbehaviour { // zepeto id of the npc public zepetoid string; // dialogue content to be displayed in the speech bubble public speechbubbletext string; // prefab of the speech bubble canvas game object public speechbubbleprefab gameobject; // y axis offset value of the speech bubble canvas game object public speechbubbleyoffset number; // npc character object private npc zepetocharacter; // speech bubble canvas game object private speechbubbleobject gameobject; // text inside the speech bubble canvas game object private speechbubbletext text; // speech bubble canvas private canvas canvas; // world camera private cachedworldcamera camera; start() { // create a new instance of spawninfo and set its position and rotation based on the object's transform const spawninfo = new spawninfo(); spawninfo position = this transform position; spawninfo rotation = this transform rotation; // use zepetocharactercreator to create a new character by zepeto id and assign it to npc variable zepetocharactercreator createbyzepetoid(this zepetoid, spawninfo, (character zepetocharacter) => { this npc = character; // set the speech bubble this setbubble(); }) } // set the speech bubble setbubble() { // dynamically create the speech bubble canvas game object this speechbubbleobject = object instantiate(this speechbubbleprefab) as gameobject; // set the parent of the speech bubble canvas game object transform to be the npc transform this speechbubbleobject transform setparent(this npc transform); // set the position of the speech bubble canvas game object above the npc's head this speechbubbleobject transform position = vector3 op addition(this npc getsocket(knowsockets head upper) position, new vector3(0, this speechbubbleyoffset,0)); // set the text inside the speech bubble this speechbubbletext = this speechbubbleobject getcomponentinchildren\<text>(); this setbubbletext(this speechbubbletext); this canvas = this speechbubbleobject getcomponent\<canvas>(); this cachedworldcamera = object findobjectoftype\<camera>(); this canvas worldcamera = this cachedworldcamera; } // open the speech bubble canvas and set the text setbubbletext(bubbletext string) { this speechbubbleobject setactive(true); this speechbubbletext text = bubbletext; } private update() { if (this canvas != null) { this updatecanvasrotation(); } } // update the rotation of the speech bubble canvas to face the camera private updatecanvasrotation() { this canvas transform lookat(this cachedworldcamera transform); this canvas transform rotate(0, 180, 0); } } 스크립트의 흐름은 다음과 같습니다 start() setbubble() 커스텀함수를 호출합니다 setbubble() 말풍선 캔버스(speechbubbleprefab)를 생성하고, 생성된 말풍선의 위치를 npc 머리 위로 조정합니다 setbubbletext() 커스텀함수를 호출하여 말풍선 안의 텍스트를 설정합니다 setbubbletext() npc의 말풍선 캔버스( speechbubbleobject)를 활성화합니다 매개변수(bubbletext)로 주어진 string을 말풍선 안에 표시합니다 update() updatecanvasrotation() 커스텀 함수를 호출해 캔버스를 카메라에 맞게 회전시킵니다 3\) 스크립트 작성을 완료한 후, npc가 생성될 위치 오브젝트에 스크립트를 추가합니다 4\) 인스펙터에서 zepeto id, speech bubble text, speech bubble prefab, speech bubble y offset을 할당합니다 speech bubble text npc 캐릭터가 말풍선에 띄울 대화 내용을 저장하는 변수입니다 예시에서는 "hello world"와 같은 대화 내용을 저장합니다 speech bubble prefab 말풍선 캔버스 gameobject의 프리팹을 저장하는 변수입니다 speech bubble y offset 말풍선 캔버스 gameobject의 y축 offset 값을 저장하는 변수입니다 캐릭터의 머리 위에 말풍선을 띄울 때, 캐릭터와 말풍선 사이의 거리를 조절할 수 있습니다 5\) play 버튼을 눌러 실행하면 npc 머리 위에 말풍선이 띄워진 것을 볼 수 있습니다 npc와 인터렉션하기 npc와 인터렉션해서 여러가지 재미있는 컨텐츠를 구현할 수 있습니다 이 가이드에서는 예시로 npc에게 다가갔을 때 변경되는 말풍선을 구현해보겠습니다 콜라이더 세팅하기 1\) npc와 인터렉션하기 위해 오브젝트에 collider 컴포넌트를 추가한 뒤 istrigger에 체크합니다 2\) 플레이어가 npc와 인터렉션할 수 있는 범위만큼 collider의 크기를 조절합니다 npc 인터렉션 스크립트 작성하기 1\) project > create > zepeto > typescript를 생성하고 npcinteraction으로 이름을 변경합니다 2\) 아래와 같이 샘플 스크립트를 작성합니다 import { zepetoscriptbehaviour } from 'zepeto script'; import { knowsockets, spawninfo, zepetocharacter, zepetocharactercreator, zepetoplayers } from 'zepeto character controller'; import { canvas, camera, vector3, object, gameobject, collider } from 'unityengine'; import { text } from 'unityengine ui'; export default class npcinteraction extends zepetoscriptbehaviour { // zepeto id of the npc public zepetoid string; // dialogue content to be displayed in the speech bubble public speechbubbletext string; public changedspeechbubbletext string; // prefab of the speech bubble canvas game object public speechbubbleprefab gameobject; // y axis offset value of the speech bubble canvas game object public speechbubbleyoffset number; // local character object private zepetocharacter zepetocharacter; // npc character object private npc zepetocharacter; // speech bubble canvas game object private speechbubbleobject gameobject; // text inside the speech bubble canvas game object private speechbubbletext text; // speech bubble canvas private canvas canvas; // world camera private cachedworldcamera camera; start() { // create a new instance of spawninfo and set its position and rotation based on the object's transform const spawninfo = new spawninfo(); spawninfo position = this transform position; spawninfo rotation = this transform rotation; // use zepetocharactercreator to create a new character by zepeto id and assign it to npc variable zepetocharactercreator createbyzepetoid(this zepetoid, spawninfo, (character zepetocharacter) => { this npc = character; // set the speech bubble this setbubble(); }) zepetoplayers instance onaddedlocalplayer addlistener(() => { this zepetocharacter = zepetoplayers instance localplayer zepetoplayer character; }); } // check if player character enter collider ontriggerenter(collider collider) { if (this zepetocharacter == null || collider gameobject != this zepetocharacter gameobject) { return; } this setbubbletext(this changedspeechbubbletext); } ontriggerexit(collider collider) { if (this zepetocharacter == null || collider gameobject != this zepetocharacter gameobject) { return; } this setbubbletext(this speechbubbletext); } // set the speech bubble setbubble() { // dynamically create the speech bubble canvas game object this speechbubbleobject = object instantiate(this speechbubbleprefab) as gameobject; // set the parent of the speech bubble canvas game object transform to be the npc transform this speechbubbleobject transform setparent(this npc transform); // set the position of the speech bubble canvas game object above the npc's head this speechbubbleobject transform position = vector3 op addition(this npc getsocket(knowsockets head upper) position, new vector3(0, this speechbubbleyoffset,0)); // set the text inside the speech bubble this speechbubbletext = this speechbubbleobject getcomponentinchildren\<text>(); this setbubbletext(this speechbubbletext); this canvas = this speechbubbleobject getcomponent\<canvas>(); this cachedworldcamera = object findobjectoftype\<camera>(); this canvas worldcamera = this cachedworldcamera; } // open the speech bubble canvas and set the text setbubbletext(bubbletext string) { this speechbubbleobject setactive(true); this speechbubbletext text = bubbletext; } private update() { if (this canvas != null) { this updatecanvasrotation(); } } // update the rotation of the speech bubble canvas to face the camera private updatecanvasrotation() { this canvas transform lookat(this cachedworldcamera transform); this canvas transform rotate(0, 180, 0); } } 스크립트의 흐름은 다음과 같습니다 ontriggerenter(), ontriggerexit() 콜라이더 영역 내에 들어와 트리거를 감지하면 setbubbletext() 커스텀함수를 호출하여 말풍선 안의 텍스트를 changedspeechbubbletext로 설정합니다 콜라이더 영역을 벗어나면 setbubbletext() 커스텀함수를 호출하여 말풍선 안의 텍스트를 speechbubbletext로 설정합니다 3\) 스크립트 작성을 완료한 후, npc가 생성될 위치 오브젝트에 스크립트를 추가합니다 4\) 인스펙터에서 zepeto id, speech bubble text, speech bubble prefab, speech bubble y offset, changed speech bubble을 할당합니다 speech bubble text npc 캐릭터가 말풍선에 띄울 대화 내용을 저장하는 변수입니다 예시에서는 "hello world"와 같은 대화 내용을 저장합니다 speech bubble prefab 말풍선 캔버스 gameobject의 프리팹을 저장하는 변수입니다 speech bubble y offset 말풍선 캔버스 gameobject의 y축 offset 값을 저장하는 변수입니다 캐릭터의 머리 위에 말풍선을 띄울 때, 캐릭터와 말풍선 사이의 거리를 조절할 수 있습니다 changed speech bubble 플레이어가 npc의 콜라이더에 들어올 때, npc의 말풍선에 표시될 대화 내용을 저장합니니다 5\) play버튼을 눌러 실행 후 npc에게 가까이 다가가면 말풍선 내의 텍스트가 바뀝니다 npc 인터렉션 응용하기 다이얼로그 형식으로 만들려면 panel을 활용해서 ui를 만들어보세요 다음은 panel과 버튼으로 구성한 간단한 다이얼로그 예시입니다 npc와 인터렉션했을 때 다이얼로그가 뜨게 하고 각 버튼을 눌렀을 때 처리하는 예제 스크립트입니다 이를 응용해서 재미있는 컨텐츠를 구현해보세요 import { gameobject, humanbodybones, object, collider } from 'unityengine'; import { zepetoscriptbehaviour } from 'zepeto script'; import { button } from 'unityengine ui'; import { zepetocharacter, zepetoplayers } from "zepeto character controller"; export default class npcdialoginteraction extends zepetoscriptbehaviour { public npcdialogcanvas gameobject; public yesbutton button; public nobutton button; private zepetocharacter zepetocharacter; start() { zepetoplayers instance onaddedlocalplayer addlistener(()=>{ this zepetocharacter = zepetoplayers instance localplayer zepetoplayer character; }); // dialog select yes this yesbutton onclick addlistener(() => { console log("yes") this npcdialogcanvas setactive(false); }); // dialog select no this nobutton onclick addlistener(() => { console log("no") this npcdialogcanvas setactive(false); }); } // check if player character enter collider ontriggerenter(collider collider) { if (this zepetocharacter == null || collider gameobject != this zepetocharacter gameobject) { return; } this npcdialogcanvas setactive(true); } ontriggerexit(collider collider) { if (this zepetocharacter == null || collider gameobject != this zepetocharacter gameobject) { return; } this npcdialogcanvas setactive(false); } }