NPC 생성하고 제어하기

34min
ZEPETO 캐릭터 NPC를 구현하는 방법을 알아봅시다.
각 기능 별로 제공되는 샘플 스크립트를 응용해서 원하는 NPC를 월드에 추가해 보세요.
﻿
NPC 생성하기
ZEPETO ID를 이용하여 NPC를 생성합니다.
﻿
﻿
주의사항
NPC의 외형 및 착용 아이템은 입력한 ZEPETO ID의 모습과 동일합니다.
특정 외형을 가진 ZEPETO 캐릭터를 먼저 세팅하고, NPC를 생성할 것을 권장합니다.
﻿
NPC가 생성될 위치 오브젝트 세팅하기
﻿
Scene에 기본적으로 ZEPETO 캐릭터 생성 코드를 구현해 주세요.
📘 다음 가이드를 참고하여 주세요. [ZEPETO 캐릭터 생성하기﻿]
﻿
Hierarchy > Create Empty Object를 생성하고 이름을 NPC로 변경합니다.
NPC가 생성될 위치를 저장할 오브젝트입니다.
Position, Rotation을 설정합니다.
오브젝트 생성 예시
﻿
﻿
NPC 생성 스크립트 작성하기
﻿
1) Project > Create > ZEPETO > TypeScript를 생성하고 NPCCreator로 이름을 변경합니다.
2) 아래와 같이 샘플 스크립트를 작성합니다.
TypeScript
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;
        })
    }
  
}
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) 아래와 같이 샘플 스크립트를 작성합니다.
TypeScript
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);
    }

}
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﻿]

NPC 점프 스크립트 작성하기
1) Project > Create > ZEPETO > TypeScript를 생성하고 NPCJump로 이름을 변경합니다.
2) 아래와 같이 샘플 스크립트를 작성합니다.
TypeScript
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);
        }
    }
}
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﻿
﻿
애니메이션 클립 준비하기
﻿
다음 가이드를 참고하여 NPC가 취할 제스쳐 애니메이션 클립을 준비합니다.
📘 다음 가이드를 참고하여 주세요.
[ZEPETO 캐릭터 애니메이션 사용 여부﻿]
[커스텀 애니메이션 적용 방법﻿]
﻿
애니메이터 생성하기
1) Project > Create > Animator Controller를 생성하고 NPCAnimatorController로 이름을 변경합니다.
﻿
﻿
2) Animator 탭에서 Create State > Empty를 생성합니다.
﻿
﻿
3)
인스펙터에서 이름을 적절하게 변경하고, 애니메이션 클립을 Motion에 할당합니다.
﻿
﻿

NPC 제스쳐 스크립트 작성하기
1) Project > Create > ZEPETO > TypeScript를 생성하고 NPCGesture로 이름을 변경합니다.
2) 아래와 같이 샘플 스크립트를 작성합니다.
TypeScript
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;
        });
    }
}
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로 이름을 변경합니다.
말풍선의 배경이 될 이미지입니다.
Example of Image Settings
﻿
﻿
3) SpeeachBubbleImage의 자식으로 Hierachy > UI > Text를 생성하고 SpeeachBubbleText로 이름을 변경합니다.
말풍선 안의 텍스트입니다.
텍스트의 크기를 알맞게 만들어주기 위해 Content Size Fitter 컴포넌트를 추가합니다.
Example of Text Settings
﻿
﻿
4) 세팅이 완료되었다면 Project 창으로 드래그하여 Prefab으로 만들어준 뒤, 하이어라키에 남아있는 PrefSpeechBubbleCanvas는 삭제합니다.
Example of Prefab Configuration
﻿
﻿
NPC 말풍선 스크립트 작성하기
﻿
1) Project > Create > ZEPETO > TypeScript를 생성하고 NPCSpeechBubble로 이름을 변경합니다.
2) 아래와 같이 샘플 스크립트를 작성합니다.
TypeScript
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);
    }

}
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) 아래와 같이 샘플 스크립트를 작성합니다.
TypeScript
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);
    }
    
}
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와 인터렉션했을 때 다이얼로그가 뜨게 하고 각 버튼을 눌렀을 때 처리하는 예제 스크립트입니다.
이를 응용해서 재미있는 컨텐츠를 구현해보세요.
TypeScript
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);
    }

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

}
﻿
﻿