---
title: Zepetoキャラクターを作成する
slug: world-sdk-guide-ja/X3HP-zepeto
docTags: 
createdAt: 2024-09-02T08:34:13.136Z
---

## ステップ 1 : シーンにベースを追加する

- 階層ウィンドウで、3Dオブジェクト → プレーンをクリックします。

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

- プレーンの位置をX: 0, Y: 0, Z: 0に設定し、サイズをX: 10, Y: 1, Z: 10になるように大きく設定します。

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

:::hint{type="success"}
**👍 ヒント**

- プレーンはテスト目的のための最も基本的な床です。
- コライダーを持つオブジェクトであれば、何を使っても構いません。
- ワールド作成に慣れてくると、床を置き換えるクールなマップを作成できます。
- プラットフォームがないと、キャラクターは作成されるとすぐに落下し、表示されなくなります。
:::



## ステップ 2 : ZEPETOプレイヤーコンポーネントを追加する

階層ウィンドウで、ZEPETO → ZepetoPlayersタブを選択します。

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

ZepetoPlayersというオブジェクトが自動的に作成されます。  

ZepetoPlayersは、World内のキャラクターコントローラーモジュールを管理するコンポーネントです。

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



キャラクター制御と関連機能の値は、インスペクタウィンドウで設定できます。

- 通常、ZEPETOカメラ設定、キャラクター移動速度、ジャンプ高さなどを設定できます。
- この例では、デフォルト値を使用します。

:::hint{type="info"}
**📘 **詳細な設定については、ZEPETOキャラクターコントローラーガイドを参照してください。[ZEPETOキャラクターコントローラー](docId\:gQGgZ4BlgyMvvK-41ZcWM) 
:::



## ステップ 3：キャラクターをロードする

キャラクターをロードするには、新しいZEPETOScriptファイルを作成する必要があります。

1\) \[プロジェクト]パネルで、左上隅の\[+]メニューを選択するか、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 ウィンドウでZepetoScript コンポーネントを追加してください。

![](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\) AttachZepetoScriptウィンドウで先に作成したCharacterLoaderZEPETOScriptファイルを選択してください。

![](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 は、シーン内の GameObject にコンポーネントとして追加されない限り実行されません。
:::



10） 次は、自分のzepetoidを入力してキャラクターをSceneにロードしてみましょう。
CharacterLoader ZEPETOScriptファイルをオープンし、スクリプトエディタプログラムを実行させます。
次に、以下の例題スクリプトを適用してください。

- \[ZEPETO\_ID] と書かれているところに ZEPETO ID を入力してください。
- もしあなたの ZEPETO ID が 'abcd' であれば、次のように入力する必要があります。`ZepetoPlayers.instance.CreatePlayerWithZepetoId("", "abcd", new SpawnInfo(), true)`



### 特定の ZEPETO ID で ZEPETO キャラクターを読み込むためのスクリプト

:::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\) スクリプトを保存した後、Unityエディタに戻ってください。

- ステップ 4の実行に進んでください。

:::hint{type="danger"}
* このコードを使用すると、特定のZEPETO IDのアバターでのみプレイします。
* あなたのワールドを起動するときは、コードに入力したZEPETO IDではなく、あなたのワールドにアクセスしたユーザーのZEPETO IDに基づいてコードを修正する必要があります。以下のスクリプトを使用してください。
:::



### ログインしたIDのキャラクターを読み込むためのスクリプト

:::CodeblockTabs
ログインしたIDのキャラクターを読み込むためのスクリプト

```typescript
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { SpawnInfo, ZepetoPlayers, LocalPlayer, ZepetoCharacter } from 'ZEPETO.Character.Controller';
import { WorldService } from 'ZEPETO.World'; 
 
export default class CharacterLoader extends ZepetoScriptBehaviour {   
 
    Start() {       
        // エディタを通じてZEPETOにログインした際に指定されたユーザーIDを取得します。
        ZepetoPlayers.instance.CreatePlayerWithUserId(WorldService.userId, new SpawnInfo(), true);            
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {           
            const player: LocalPlayer = ZepetoPlayers.instance.LocalPlayer;       
        });   
    }
}
```
:::

- このスクリプトは、ログインしたIDに基づいてZEPETOキャラクターを作成し、特定のZEPETO IDを受け付けないため、テストする前にUnityエディタにログインしてください。
- スクリプトを保存した後、Unityエディタに戻ってください。
- ステップ 4の実行に進んでください。

:::hint{type="danger"}
* クライアントスクリプトにローカルプレイヤー作成コードが1つだけあることを確認してください。
* 同じプレイヤーが複数作成される場合、CreatePlayerWithUserId()スクリプトが他の場所で呼び出されている可能性があります。
* 一般的な間違いは、キャラクター作成コードをこのガイドに残したままマルチプレイヤーの例コードを適用することで、キャラクターが2回作成されることです。片方をコメントアウトして管理してください。
:::



## ステップ 4 : 実行

画面の中央にある\[▶︎(再生)]ボタンを使用して、CharacterLoaderが正常に動作していることを確認してください。

読み込まれたキャラクターはローカルプレイヤーのキャラクターと呼ばれ、これはユーザーが自分のデバイスで直接操作できるZEPETOキャラクターを意味します。

CharacterLoaderは、デバイス（PC/Mobile）に対応する各入力イベントのための共通のキャラクター制御キー割り当てを持っています。したがって、読み込まれたキャラクターはプラットフォームに関係なくシーン内で操作できます。

PCでは、キャラクターとカメラはマウスで操作できます。モバイルデバイスでは、以下のスクリーンショットに示されているように、バーチャルパッドでキャラクターとカメラを操作できます。

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

:::hint{type="success"}
**👍 次の入力インターフェースがキャラクター操作に対応しています：**
**PC**

- 移動：キーボードの矢印、WASD
- ジャンプ：スペース
- ダブルジャンプ：（左）シフト
- ズーム：マウスホイール
- 回転：画面ドラッグ

**モバイル**

- 移動：（画面左下）バーチャルパッド
- ジャンプ：（画面右下）バーチャルパッドボタン
- ズーム：（二本の指）画面ドラッグ
- 回転：（一本の指）画面ドラッグ
:::



ZEPETOキャラクター作成が正常に機能しない場合は、次に進んでください：`Unityメニュー > プロジェクト設定 > エディタ > プレイモード設定を入力`。

- 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オブジェクト>キューブを事前に配置しました。

キャラクターのスポーン位置値を次のように変更すると、キューブの上にスポーンします。

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



画面の中央にある再生ボタンを使用して、キャラクターの作成を確認します。

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



位置と向きの値を変更すると、このように横たわっているキャラクターを作成することもできます。

:::CodeblockTabs
SpawnInfo Sample

```typescript
// キャラクターのスポーン位置を設定
const spawnInfo = new SpawnInfo();
spawnInfo.position = new Vector3(2,1,2);
// キャラクターのスポーン回転を設定
spawnInfo.rotation = Quaternion.Euler(90,0,0);
```
:::

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