NPCを作成

33min
ZEPETOキャラクターからNPCを作成する方法を学びましょう。
各機能に提供されているサンプルスクリプトを適用して、あなたのワールドに選択したNPCを追加します。
﻿
ZEPETO IDを使用してNPCを作成します。
﻿
﻿
NPCの外見と着用するアイテムは、入力されたZEPETO IDと同じになります。
NPCを作成する前に、特定の外見を持つZEPETOキャラクターを設定することをお勧めします。
﻿
NPCが作成される場所オブジェクトの設定
﻿
シーンにZEPETOキャラクター作成コードをデフォルトで実装します。
📘 次のガイドを参照してください。[ZEPETOキャラクターを作成する﻿]
﻿
階層を作成 > 空のオブジェクトを作成し、NPCに名前を変更します。
NPCが作成される場所を保存するオブジェクト。
位置と回転を設定します。
﻿
﻿
NPC作成スクリプトの作成
﻿
1) プロジェクトを作成 > 作成 > ZEPETO > TypeScript とし、NPCCreatorに名前を変更します。
2) 以下のようなサンプルスクリプトを書きます。
TypeScript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { SpawnInfo, ZepetoCharacter, ZepetoCharacterCreator } from 'ZEPETO.Character.Controller';
  
export default class NPCCreator extends ZepetoScriptBehaviour {
  
    // NPCのZEPETO ID
    public zepetoId: string;
    // NPCキャラクターオブジェクト
    private _npc: ZepetoCharacter;
  
    Start() {
        // SpawnInfoの新しいインスタンスを作成し、オブジェクトのトランスフォームに基づいてその位置と回転を設定します
        const spawnInfo = new SpawnInfo();
        spawnInfo.position = this.transform.position;
        spawnInfo.rotation = this.transform.rotation;
  
        // Zepeto IDを使用して新しいキャラクターを作成し、それを_npc変数に割り当てるためにZepetoCharacterCreatorを使用します
        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 {
  
    // NPCのZEPETO ID
    public zepetoId: string;
    // NPCキャラクターオブジェクト
    private _npc: ZepetoCharacter;
  
    Start() {
        // SpawnInfoの新しいインスタンスを作成し、オブジェクトのトランスフォームに基づいてその位置と回転を設定します
        const spawnInfo = new SpawnInfo();
        spawnInfo.position = this.transform.position;
        spawnInfo.rotation = this.transform.rotation;
  
        // Zepeto IDを使用して新しいキャラクターを作成し、それを_npc変数に割り当てるためにZepetoCharacterCreatorを使用します
        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) 実行するために再生ボタンを押すと、NPCが作成されます。
6) 同様にNPCの位置オブジェクトを追加し、複数のNPCを簡単に作成するためのNPCスクリプトを追加します。
﻿
﻿
NPCのラベリング
﻿
プレイヤーと区別するために、名前タグでNPCにラベルを付けることができます。
﻿
﻿
名前タグキャンバスプレハブを作成する
﻿
1) 階層 > UI > キャンバスを作成し、PrefNameTagCanvasに名前を変更します。
レンダーモードをワールドスペースに設定します。
キャンバス設定の例
﻿
﻿
2) PrefNameTagCanvasの子として階層 > UI > テキストを作成し、NameTagTextに名前を変更します。
名前を表すテキスト。
テキストを適切なサイズにするために、コンテンツサイズフィッターコンポーネントを追加します。
テキスト設定の例
﻿
﻿
3) 完了したら、プロジェクトウィンドウにドラッグしてプレハブにし、ハイライターにまだ残っているPrefNameTagCanvasを削除します。
プレハブ設定の例
﻿
﻿
NPC名札スクリプトの作成
﻿
1) プロジェクトを作成 > 作成 > 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 {

    // NPCのZEPETO ID
    public zepetoId: string;
    // 名札に表示される名前 
    public nameTag: string;
    // 名札キャンバスゲームオブジェクトのプレハブ
    public nameTagPrefab: GameObject;
    // 名札キャンバスゲームオブジェクトのY軸オフセット値
    public nameTagYOffset: number;

    // NPCキャラクターオブジェクト
    private _npc: ZepetoCharacter;
    // 名札キャンバスゲームオブジェクト
    private _npcNameTagObject: GameObject;
    // 名札キャンバスゲームオブジェクト内のテキスト
    private _npcNameTagText: Text;
    // 名札キャンバス
    private _canvas: Canvas;
    // ワールドカメラ
    private _cachedWorldCamera: Camera;

    Start() {
        // SpawnInfoの新しいインスタンスを作成し、オブジェクトのトランスフォームに基づいて位置と回転を設定
        const spawnInfo = new SpawnInfo();
        spawnInfo.position = this.transform.position;
        spawnInfo.rotation = this.transform.rotation;

        // ZepetoCharacterCreatorを使用してZEPETO IDで新しいキャラクターを作成し、_npc変数に割り当て
        ZepetoCharacterCreator.CreateByZepetoId(this.zepetoId, spawnInfo, (character: ZepetoCharacter) => {
            this._npc = character;

            // 名札を設定
            this.SetNameTag();
        })
    }

    // 名札を設定
    SetNameTag() {
        // 名札キャンバスゲームオブジェクトを動的に作成
        this._npcNameTagObject = Object.Instantiate(this.nameTagPrefab) as GameObject;
        
        // 名札キャンバスゲームオブジェクトの親をNPCのトランスフォームに設定
        this._npcNameTagObject.transform.SetParent(this._npc.transform);
        
        // NPCの頭の上に名札キャンバスゲームオブジェクトの位置を設定
        this._npcNameTagObject.transform.position = Vector3.op_Addition(this._npc.GetSocket(KnowSockets.HEAD_UPPER).position, new Vector3(0, this.nameTagYOffset,0));

        // 名札内のテキストを設定
        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();
        }
    }

    // 名札キャンバスの回転をカメラに向けて更新
    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 {

    // NPCのZEPETO ID
    public zepetoId: string;
    // 名札に表示される名前 
    public nameTag: string;
    // 名札キャンバスゲームオブジェクトのプレハブ
    public nameTagPrefab: GameObject;
    // 名札キャンバスゲームオブジェクトのY軸オフセット値
    public nameTagYOffset: number;

    // NPCキャラクターオブジェクト
    private _npc: ZepetoCharacter;
    // 名札キャンバスゲームオブジェクト
    private _npcNameTagObject: GameObject;
    // 名札キャンバスゲームオブジェクト内のテキスト
    private _npcNameTagText: Text;
    // 名札キャンバス
    private _canvas: Canvas;
    // ワールドカメラ
    private _cachedWorldCamera: Camera;

    Start() {
        // SpawnInfoの新しいインスタンスを作成し、オブジェクトのトランスフォームに基づいて位置と回転を設定
        const spawnInfo = new SpawnInfo();
        spawnInfo.position = this.transform.position;
        spawnInfo.rotation = this.transform.rotation;

        // ZepetoCharacterCreatorを使用してZEPETO IDで新しいキャラクターを作成し、_npc変数に割り当て
        ZepetoCharacterCreator.CreateByZepetoId(this.zepetoId, spawnInfo, (character: ZepetoCharacter) => {
            this._npc = character;

            // 名札を設定
            this.SetNameTag();
        })
    }

    // 名札を設定
    SetNameTag() {
        // 名札キャンバスゲームオブジェクトを動的に作成
        this._npcNameTagObject = Object.Instantiate(this.nameTagPrefab) as GameObject;
        
        // 名札キャンバスゲームオブジェクトの親をNPCのトランスフォームに設定
        this._npcNameTagObject.transform.SetParent(this._npc.transform);
        
        // NPCの頭の上に名札キャンバスゲームオブジェクトの位置を設定
        this._npcNameTagObject.transform.position = Vector3.op_Addition(this._npc.GetSocket(KnowSockets.HEAD_UPPER).position, new Vector3(0, this.nameTagYOffset,0));

        // 名札内のテキストを設定
        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();
        }
    }

    // 名札キャンバスの回転をカメラに向けて更新
    private UpdateCanvasRotation() {
        this._canvas.transform.LookAt(this._cachedWorldCamera.transform);
        this._canvas.transform.Rotate(0, 180, 0);
    }

}
﻿
﻿
スクリプトの流れは次のとおりです：
開始する()
SetNameTag() カスタム関数を呼び出します。
SetNameTag()
NPCのために動的に名前タグを生成し、生成された名前タグをNPCの頭上に調整します。
名前タグの中のテキストを設定します。
更新する()
UpdateCanvasRotation() カスタム関数を呼び出して、カメラに合わせてキャンバスを回転させます。
﻿
3) スクリプトの記述が完了したら、NPCオブジェクトに追加します。
4) インスペクターで、Zepeto Id、名前タグ、名前タグプレハブ、および名前タグYオフセットを割り当てます。
名前タグ: NPCの名前タグに表示される名前。
名前タグプレハブ: 名前タグキャンバスのプレハブ。
名前タグYオフセット: 名前タグキャンバスオブジェクトのy軸オフセット値を格納する変数。キャラクターの頭上に名前タグを配置する際に、キャラクターと名前タグの間の距離を調整できます。
スクリプト設定画面の例
﻿
﻿
5) 再生ボタンを押して実行すると、名前タグを持つNPCが作成されます。
﻿
﻿
NPCの行動を制御する
﻿
NPCの行動を制御できます。
﻿
ジャンプ
﻿
﻿
﻿
ZEPETOキャラクターAPIを使用してNPCをジャンプさせます。
ZEPETOキャラクターAPIを使用して、より広範な動作を実装できます。
📘 以下のガイドを参照してください。[ZEPETOキャラクター﻿]
﻿
NPCジャンプスクリプトの作成
1) プロジェクト > 作成 > 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 {

    // NPCのZEPETO ID
    public zepetoId: string;
    // NPCキャラクターオブジェクト
    private _npc: ZepetoCharacter;

    Start() {
        // SpawnInfoの新しいインスタンスを作成し、オブジェクトのトランスフォームに基づいて位置と回転を設定します
        const spawnInfo = new SpawnInfo();
        spawnInfo.position = this.transform.position;
        spawnInfo.rotation = this.transform.rotation;

        // ZepetoCharacterCreatorを使用してZEPETO IDで新しいキャラクターを作成し、_npc変数に割り当てます
        ZepetoCharacterCreator.CreateByZepetoId(this.zepetoId, spawnInfo, (character: ZepetoCharacter) => {
            this._npc = character;
            
            this.StartCoroutine(this.JumpCoroutine());
        });
    }

    *JumpCoroutine() {
        // 無限ループで継続的に
        while (true) {
            // ZepetoCharacterのJump()メソッドを呼び出してジャンプさせます
            this._npc.Jump();

            // 5秒待機
            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 {

    // NPCのZEPETO ID
    public zepetoId: string;
    // NPCキャラクターオブジェクト
    private _npc: ZepetoCharacter;

    Start() {
        // SpawnInfoの新しいインスタンスを作成し、オブジェクトのトランスフォームに基づいて位置と回転を設定します
        const spawnInfo = new SpawnInfo();
        spawnInfo.position = this.transform.position;
        spawnInfo.rotation = this.transform.rotation;

        // ZepetoCharacterCreatorを使用してZEPETO IDで新しいキャラクターを作成し、_npc変数に割り当てます
        ZepetoCharacterCreator.CreateByZepetoId(this.zepetoId, spawnInfo, (character: ZepetoCharacter) => {
            this._npc = character;
            
            this.StartCoroutine(this.JumpCoroutine());
        });
    }

    *JumpCoroutine() {
        // 無限ループで継続的に
        while (true) {
            // ZepetoCharacterのJump()メソッドを呼び出してジャンプさせます
            this._npc.Jump();

            // 5秒待機
            yield new WaitForSeconds(5);
        }
    }
}
﻿
スクリプトの流れは次のとおりです：
開始()
JumpCoroutine()コルーチンを呼び出します。
JumpCoroutine()
NPCキャラクターが5秒ごとにジャンプするようにJump()メソッドを呼び出します。
﻿
3) スクリプトの記述が完了したら、スクリプトをNPCオブジェクトに追加します。
4) 再生ボタンを押すと、NPCがジャンプします。
﻿
ジェスチャー
﻿
﻿
﻿
NPCのためにジェスチャーを実装するには、アニメーターコントローラーを使用します。
アニメーターコントローラーを使用すると、より多様な動作を実装できます。
📘 Unityアニメーターコントローラー
https://docs.unity3d.com/Manual/class-AnimatorController.html﻿
﻿
アニメーションクリップの準備
﻿
以下のガイドを使用して、NPCが実行するためのジェスチャーアニメーションクリップを準備します。
📘 以下のガイドを参照してください。
[ZEPETOキャラクターアニメーションの使用﻿]
[カスタムアニメーションを適用する方法﻿]
﻿
アニメーターの作成
﻿
1) プロジェクト > 作成 > アニメーターコントローラーを作成し、NPCAnimatorControllerに名前を変更します。
﻿
﻿
2) アニメータータブで、状態を作成 > 空の状態。
﻿
﻿
3) インスペクターで適切に名前を変更し、アニメーションクリップをモーションに割り当てます。
﻿
﻿
NPCジェスチャースクリプトの作成
﻿
1) プロジェクトを作成 > 作成 > 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 {

    // NPCのZEPETO ID
    public zepetoId: string;
    // NPCのAnimator Controller
    public npcAnimator: RuntimeAnimatorController;

    // NPCキャラクターオブジェクト
    private _npc: ZepetoCharacter;

    Start() {

        // SpawnInfoの新しいインスタンスを作成し、オブジェクトのトランスフォームに基づいて位置と回転を設定します
        const spawnInfo = new SpawnInfo();
        spawnInfo.position = this.transform.position;
        spawnInfo.rotation = this.transform.rotation;

        // ZepetoCharacterCreatorを使用してZEPETO IDによって新しいキャラクターを作成し、_npc変数に割り当てます
        ZepetoCharacterCreator.CreateByZepetoId(this.zepetoId, spawnInfo, (character: ZepetoCharacter) => {
            this._npc = character;

            // NPCキャラクターからAnimatorコンポーネントを取得し、そのruntimeAnimatorControllerを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 {

    // NPCのZEPETO ID
    public zepetoId: string;
    // NPCのAnimator Controller
    public npcAnimator: RuntimeAnimatorController;

    // NPCキャラクターオブジェクト
    private _npc: ZepetoCharacter;

    Start() {

        // SpawnInfoの新しいインスタンスを作成し、オブジェクトのトランスフォームに基づいて位置と回転を設定します
        const spawnInfo = new SpawnInfo();
        spawnInfo.position = this.transform.position;
        spawnInfo.rotation = this.transform.rotation;

        // ZepetoCharacterCreatorを使用してZEPETO IDによって新しいキャラクターを作成し、_npc変数に割り当てます
        ZepetoCharacterCreator.CreateByZepetoId(this.zepetoId, spawnInfo, (character: ZepetoCharacter) => {
            this._npc = character;

            // NPCキャラクターからAnimatorコンポーネントを取得し、そのruntimeAnimatorControllerをnpcAnimatorに設定します
            this._npc.GetComponentInChildren<Animator>().runtimeAnimatorController = this.npcAnimator;
        });
    }
}
﻿
﻿
スクリプトの流れは次のとおりです：
Start()
NPCオブジェクトのAnimatorコンポーネントを取得し、npcAnimator変数で指定されたAnimator Controllerに設定します。
﻿
3) スクリプトの記述が終わったら、NPCが作成されるLocationオブジェクトに追加します。
4) インスペクターで、Zepeto Id、Npc Animatorを割り当てます。
Npc Animator: NPCのアニメーションコントローラー。
﻿
﻿
5) 再生ボタンを押して実行すると、NPCがジェスチャーをするのが見えます。
6) ジェスチャーやジャンプ以外のアクションを行うNPCを作成するためにこれを適用できます。
﻿
NPCの上の吹き出し
﻿
NPCの頭の上にキャンバスを作成し、画像やテキストを表示してバブルにすることができます。
﻿
﻿
吹き出しキャンバスプレハブの作成
1) 階層 > UI > キャンバスを作成し、名前をPrefSpeechBubbleCanvasに変更します。
レンダーモードをワールドスペースに設定します。
﻿
﻿
2) PrefSpeechBubbleCanvasの子として階層 > UI > 画像を作成し、名前をSpeechBubbleImageに変更します。
これはスピーチバブルの背景となる画像です。
画像設定の例
﻿
﻿
3) 階層を作成 > UI > SpeeachBubbleImageの子としてテキストを作成し、名前をSpeeachBubbleTextに変更します。
これはスピーチバブルの中のテキストです。
テキストのサイズを適切にするために、Content Size Fitterコンポーネントを追加します。
テキスト設定の例
﻿
﻿
4) 完了したら、プロジェクトウィンドウにドラッグしてPrefabにし、ハイライトにまだ残っているPrefSpeechBubbleCanvasを削除します。
Prefab設定の例
﻿
﻿
NPCスピーチバブルスクリプトの作成
﻿
1) プロジェクトを作成 > 作成 > 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 {

    // NPCのZEPETO ID
    public zepetoId: string;
    // スピーチバブルに表示されるダイアログ内容
    public speechBubbleText: string;
    // スピーチバブルキャンバスゲームオブジェクトのプレハブ
    public speechBubblePrefab: GameObject;
    // スピーチバブルキャンバスゲームオブジェクトのY軸オフセット値
    public speechBubbleYOffset: number;

    // NPCキャラクターオブジェクト
    private _npc: ZepetoCharacter;
    // スピーチバブルキャンバスゲームオブジェクト
    private _speechBubbleObject: GameObject;
    // スピーチバブルキャンバスゲームオブジェクト内のテキスト
    private _speechBubbleText: Text;
    // スピーチバブルキャンバス
    private _canvas: Canvas;
    // ワールドカメラ
    private _cachedWorldCamera: Camera;
    
    Start() {
        // SpawnInfoの新しいインスタンスを作成し、オブジェクトのトランスフォームに基づいてその位置と回転を設定
        const spawnInfo = new SpawnInfo();
        spawnInfo.position = this.transform.position;
        spawnInfo.rotation = this.transform.rotation;

        // ZepetoCharacterCreatorを使用してZEPETO IDによって新しいキャラクターを作成し、_npc変数に割り当て
        ZepetoCharacterCreator.CreateByZepetoId(this.zepetoId, spawnInfo, (character: ZepetoCharacter) => {
            this._npc = character;
            
            // スピーチバブルを設定
            this.SetBubble();
        })
    }

    // スピーチバブルを設定
    SetBubble() {
        // スピーチバブルキャンバスゲームオブジェクトを動的に作成
        this._speechBubbleObject = Object.Instantiate(this.speechBubblePrefab) as GameObject;

        // スピーチバブルキャンバスゲームオブジェクトの親をNPCのトランスフォームに設定
        this._speechBubbleObject.transform.SetParent(this._npc.transform);
        
        // NPCの頭の上にスピーチバブルキャンバスゲームオブジェクトの位置を設定
        this._speechBubbleObject.transform.position = Vector3.op_Addition(this._npc.GetSocket(KnowSockets.HEAD_UPPER).position, new Vector3(0, this.speechBubbleYOffset,0));

        // スピーチバブル内のテキストを設定
        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;
    }

    // スピーチバブルキャンバスを開き、テキストを設定
    SetBubbleText(bubbleText: string) {
        this._speechBubbleObject.SetActive(true);
        this._speechBubbleText.text = bubbleText;
    }

    private Update() {
        if (this._canvas != null) {
            this.UpdateCanvasRotation();
        }
    }

    // スピーチバブルキャンバスの回転をカメラに向けて更新
    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 {

    // NPCのZEPETO ID
    public zepetoId: string;
    // スピーチバブルに表示されるダイアログ内容
    public speechBubbleText: string;
    // スピーチバブルキャンバスゲームオブジェクトのプレハブ
    public speechBubblePrefab: GameObject;
    // スピーチバブルキャンバスゲームオブジェクトのY軸オフセット値
    public speechBubbleYOffset: number;

    // NPCキャラクターオブジェクト
    private _npc: ZepetoCharacter;
    // スピーチバブルキャンバスゲームオブジェクト
    private _speechBubbleObject: GameObject;
    // スピーチバブルキャンバスゲームオブジェクト内のテキスト
    private _speechBubbleText: Text;
    // スピーチバブルキャンバス
    private _canvas: Canvas;
    // ワールドカメラ
    private _cachedWorldCamera: Camera;
    
    Start() {
        // SpawnInfoの新しいインスタンスを作成し、オブジェクトのトランスフォームに基づいてその位置と回転を設定
        const spawnInfo = new SpawnInfo();
        spawnInfo.position = this.transform.position;
        spawnInfo.rotation = this.transform.rotation;

        // ZepetoCharacterCreatorを使用してZEPETO IDによって新しいキャラクターを作成し、_npc変数に割り当て
        ZepetoCharacterCreator.CreateByZepetoId(this.zepetoId, spawnInfo, (character: ZepetoCharacter) => {
            this._npc = character;
            
            // スピーチバブルを設定
            this.SetBubble();
        })
    }

    // スピーチバブルを設定
    SetBubble() {
        // スピーチバブルキャンバスゲームオブジェクトを動的に作成
        this._speechBubbleObject = Object.Instantiate(this.speechBubblePrefab) as GameObject;

        // スピーチバブルキャンバスゲームオブジェクトの親をNPCのトランスフォームに設定
        this._speechBubbleObject.transform.SetParent(this._npc.transform);
        
        // NPCの頭の上にスピーチバブルキャンバスゲームオブジェクトの位置を設定
        this._speechBubbleObject.transform.position = Vector3.op_Addition(this._npc.GetSocket(KnowSockets.HEAD_UPPER).position, new Vector3(0, this.speechBubbleYOffset,0));

        // スピーチバブル内のテキストを設定
        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;
    }

    // スピーチバブルキャンバスを開き、テキストを設定
    SetBubbleText(bubbleText: string) {
        this._speechBubbleObject.SetActive(true);
        this._speechBubbleText.text = bubbleText;
    }

    private Update() {
        if (this._canvas != null) {
            this.UpdateCanvasRotation();
        }
    }

    // スピーチバブルキャンバスの回転をカメラに向けて更新
    private UpdateCanvasRotation() {
        this._canvas.transform.LookAt(this._cachedWorldCamera.transform);
        this._canvas.transform.Rotate(0, 180, 0);
    }

}
﻿
﻿
スクリプトの流れは次のとおりです：
開始()
SetBubble() カスタム関数を呼び出します。
SetBubble()
スピーチバブルキャンバス (speechBubblePrefab) を作成し、作成したスピーチバブルをNPCの頭の上に配置します。
SetBubbleText() カスタム関数を呼び出して、スピーチバブル内のテキストを設定します。
SetBubbleText()
NPCのスピーチバブルキャンバス (_speechBubbleObject) をアクティブにします。
スピーチバブル内にパラメータとして与えられた文字列 (bubbleText) を表示します。
更新()
UpdateCanvasRotation() カスタム関数を呼び出して、キャンバスをカメラに合わせて回転させます。
﻿
3) スクリプトの記述が完了したら、NPCが作成される場所のオブジェクトに追加します。
4) インスペクターで、Zepeto Id、スピーチバブルテキスト、スピーチバブルプレハブ、スピーチバブルYオフセットを割り当てます。
スピーチバブルテキスト: この変数は、NPCキャラクターがスピーチバブルで言うダイアログを保存します。私たちの例では、次のダイアログを保存します: "こんにちは世界"。
スピーチバブルプレハブ: この変数は、スピーチバブルキャンバスゲームオブジェクトのプレハブを保存します。
スピーチバブルYオフセット: この変数は、スピーチバブルキャンバスゲームオブジェクトのY軸オフセット値を保存します。これにより、キャラクターの頭上にスピーチバブルを配置する際に、キャラクターとスピーチバブルの間の距離を調整できます。
例のスクリプト設定画面
﻿
5) 再生ボタンを押して実行すると、NPCの頭上にスピーチバブルが浮かんでいるのが見えます。
﻿
NPCとのインタラクション
﻿
NPCと対話することで、たくさんの楽しいコンテンツを実装できます。
このガイドでは、NPCに近づくと変化する吹き出しを実装する例を使用します。
﻿
﻿
コライダーの設定
﻿
1) NPCと対話するためにオブジェクトにコライダーコンポーネントを追加し、isTriggerを確認します。
﻿
﻿
2) プレイヤーがNPCと対話できる範囲にコライダーをリサイズします。
﻿
﻿
NPCインタラクションスクリプトの作成
﻿
1) プロジェクトを作成 > 作成 > 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 {

    // NPCのZEPETO ID
    public zepetoId: string;
    // スピーチバブルに表示されるダイアログ内容
    public speechBubbleText: string;

    public changedSpeechBubbleText: string;
    // スピーチバブルキャンバスゲームオブジェクトのプレハブ
    public speechBubblePrefab: GameObject;
    // スピーチバブルキャンバスゲームオブジェクトのy軸オフセット値
    public speechBubbleYOffset: number;

    // ローカルキャラクターオブジェクト
    private _zepetoCharacter: ZepetoCharacter;
    // NPCキャラクターオブジェクト
    private _npc: ZepetoCharacter;
    // スピーチバブルキャンバスゲームオブジェクト
    private _speechBubbleObject: GameObject;
    // スピーチバブルキャンバスゲームオブジェクト内のテキスト
    private _speechBubbleText: Text;
    // スピーチバブルキャンバス
    private _canvas: Canvas;
    // ワールドカメラ
    private _cachedWorldCamera: Camera;
    
    Start() {
        // SpawnInfoの新しいインスタンスを作成し、オブジェクトのトランスフォームに基づいて位置と回転を設定
        const spawnInfo = new SpawnInfo();
        spawnInfo.position = this.transform.position;
        spawnInfo.rotation = this.transform.rotation;

        // ZepetoCharacterCreatorを使用してZEPETO IDによって新しいキャラクターを作成し、_npc変数に割り当て
        ZepetoCharacterCreator.CreateByZepetoId(this.zepetoId, spawnInfo, (character: ZepetoCharacter) => {
            this._npc = character;
            
            // スピーチバブルを設定
            this.SetBubble();
        })

        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
        });
    }

    // プレイヤーキャラクターがコライダーに入ったか確認
    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);
    }


    // スピーチバブルを設定
    SetBubble() {
        // スピーチバブルキャンバスゲームオブジェクトを動的に作成
        this._speechBubbleObject = Object.Instantiate(this.speechBubblePrefab) as GameObject;

        // スピーチバブルキャンバスゲームオブジェクトの親をNPCのトランスフォームに設定
        this._speechBubbleObject.transform.SetParent(this._npc.transform);
        
        // NPCの頭の上にスピーチバブルキャンバスゲームオブジェクトの位置を設定
        this._speechBubbleObject.transform.position = Vector3.op_Addition(this._npc.GetSocket(KnowSockets.HEAD_UPPER).position, new Vector3(0, this.speechBubbleYOffset,0));

        // スピーチバブル内のテキストを設定
        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;
    }

    // スピーチバブルキャンバスを開き、テキストを設定
    SetBubbleText(bubbleText: string) {
        this._speechBubbleObject.SetActive(true);
        this._speechBubbleText.text = bubbleText;
    }

    private Update() {
        if (this._canvas != null) {
            this.UpdateCanvasRotation();
        }
    }

    // スピーチバブルキャンバスの回転をカメラに向けて更新
    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 {

    // NPCのZEPETO ID
    public zepetoId: string;
    // スピーチバブルに表示されるダイアログ内容
    public speechBubbleText: string;

    public changedSpeechBubbleText: string;
    // スピーチバブルキャンバスゲームオブジェクトのプレハブ
    public speechBubblePrefab: GameObject;
    // スピーチバブルキャンバスゲームオブジェクトのy軸オフセット値
    public speechBubbleYOffset: number;

    // ローカルキャラクターオブジェクト
    private _zepetoCharacter: ZepetoCharacter;
    // NPCキャラクターオブジェクト
    private _npc: ZepetoCharacter;
    // スピーチバブルキャンバスゲームオブジェクト
    private _speechBubbleObject: GameObject;
    // スピーチバブルキャンバスゲームオブジェクト内のテキスト
    private _speechBubbleText: Text;
    // スピーチバブルキャンバス
    private _canvas: Canvas;
    // ワールドカメラ
    private _cachedWorldCamera: Camera;
    
    Start() {
        // SpawnInfoの新しいインスタンスを作成し、オブジェクトのトランスフォームに基づいて位置と回転を設定
        const spawnInfo = new SpawnInfo();
        spawnInfo.position = this.transform.position;
        spawnInfo.rotation = this.transform.rotation;

        // ZepetoCharacterCreatorを使用してZEPETO IDによって新しいキャラクターを作成し、_npc変数に割り当て
        ZepetoCharacterCreator.CreateByZepetoId(this.zepetoId, spawnInfo, (character: ZepetoCharacter) => {
            this._npc = character;
            
            // スピーチバブルを設定
            this.SetBubble();
        })

        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            this._zepetoCharacter = ZepetoPlayers.instance.LocalPlayer.zepetoPlayer.character;
        });
    }

    // プレイヤーキャラクターがコライダーに入ったか確認
    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);
    }


    // スピーチバブルを設定
    SetBubble() {
        // スピーチバブルキャンバスゲームオブジェクトを動的に作成
        this._speechBubbleObject = Object.Instantiate(this.speechBubblePrefab) as GameObject;

        // スピーチバブルキャンバスゲームオブジェクトの親をNPCのトランスフォームに設定
        this._speechBubbleObject.transform.SetParent(this._npc.transform);
        
        // NPCの頭の上にスピーチバブルキャンバスゲームオブジェクトの位置を設定
        this._speechBubbleObject.transform.position = Vector3.op_Addition(this._npc.GetSocket(KnowSockets.HEAD_UPPER).position, new Vector3(0, this.speechBubbleYOffset,0));

        // スピーチバブル内のテキストを設定
        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;
    }

    // スピーチバブルキャンバスを開き、テキストを設定
    SetBubbleText(bubbleText: string) {
        this._speechBubbleObject.SetActive(true);
        this._speechBubbleText.text = bubbleText;
    }

    private Update() {
        if (this._canvas != null) {
            this.UpdateCanvasRotation();
        }
    }

    // スピーチバブルキャンバスの回転をカメラに向けて更新
    private UpdateCanvasRotation() {
        this._canvas.transform.LookAt(this._cachedWorldCamera.transform);
        this._canvas.transform.Rotate(0, 180, 0);
    }
    
}
﻿
﻿
スクリプトの流れは次のとおりです：
OnTriggerEnter(), OnTriggerExit()
トリガーがコライダーエリアに入ると検出されたとき、SetBubbleText()カスタム関数を呼び出して、スピーチバブル内のテキストをchangedSpeechBubbleTextに設定します。
コライダーエリアを離れると、SetBubbleText()カスタム関数を呼び出して、スピーチバブル内のテキストをspeechBubbleTextに設定します。
﻿
3) スクリプトの記述が完了したら、NPCが作成されるLocationオブジェクトに追加します。
4) インスペクターで、Zepeto Id、スピーチバブルテキスト、スピーチバブルプレハブ、スピーチバブルYオフセット、および変更されたスピーチバブルを割り当てます。
スピーチバブルテキスト: この変数は、NPCキャラクターがスピーチバブルで言うダイアログを格納します。私たちの例では、次のダイアログを格納します: "こんにちは世界"。
スピーチバブルプレハブ: この変数は、スピーチバブルキャンバスGameObjectのプレハブを格納します。
スピーチバブルYオフセット: この変数は、スピーチバブルキャンバスGameObjectのy軸オフセット値を格納します。これにより、キャラクターの頭上にスピーチバブルを配置する際に、キャラクターとスピーチバブルの間の距離を調整できます。
変更されたスピーチバブル: プレイヤーがNPCのコライダーに入ると、NPCのスピーチバブルに表示されるダイアログを格納します。
スクリプト設定画面の例
﻿
﻿
5) プレイを押して実行し、プレイヤーがNPCに近づくと、吹き出しのテキストが変わります。
﻿
NPCインタラクションの適用
﻿
ダイアログ形式を作成するには、パネルを使用してUIを作成します。
以下は、パネルとボタンで構成されたシンプルなダイアログの例です。
﻿
﻿
これは、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;
        });
        
        // ダイアログ - はいを選択
        this.yesButton.onClick.AddListener(() => {
            console.log("はい")
            this.npcDialogCanvas.SetActive(false);
        });

        // ダイアログ - いいえを選択
        this.noButton.onClick.AddListener(() => {
            console.log("いいえ")
            this.npcDialogCanvas.SetActive(false);
        });

    }

    // プレイヤーキャラクターがコライダーに入ったか確認
    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;
        });
        
        // ダイアログ - はいを選択
        this.yesButton.onClick.AddListener(() => {
            console.log("はい")
            this.npcDialogCanvas.SetActive(false);
        });

        // ダイアログ - いいえを選択
        this.noButton.onClick.AddListener(() => {
            console.log("いいえ")
            this.npcDialogCanvas.SetActive(false);
        });

    }

    // プレイヤーキャラクターがコライダーに入ったか確認
    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);
    }

}
﻿
﻿