Unityに自分のZEPETOのアバターをいれてみる

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/1900da01-785c-ac05-cd50-3eb41e04ce44.png)

ZEPETOを始めてみて、ワールド作成などでUnityも触るしかなくなってしまった人向けに、今回は(私の様な)Unity初心者でも解り易い「Unity導入からアバターを動かす所まで」を解説していく。  
※前提としてZEPETOアカウントを持ち、ZEPETO STUDIOに登録した人向け  
※MacOSでの作業想定

## Unityの準備

### Unityとは

ざっくりUnityとは2Dや3Dのグラフィックの作成や、動きやルールなどを設定出来るプラットフォームで、ゲームの開発などに使用される。また、Unity Personalは、年間売り上げが10万を超えるまでは無料で使用する事が出来る。

### Unityの導入

利用するには"Unity Hub"という、Unityを管理するアプリを使用し、実際に作品を作成するエディタ"Unity"をインストールしていく。

まずUnityのサイトの[Unity Hubダウンロードページ](https://unity3d.com/get-unity/download)に遷移し、ダウンロードボタンを押下。Unity Hubを開き、早速使用するエディタ(Unity)をダウンロードしていく訳だが、2024年7月現在、ZEPETOと互換性のあるUnityのバージョンは「Unity 2020.3.9f1」であるため、これをインストールする。  
※コードエディタが無い人はMicrosoft Visual Studioなど用意してください
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/fde7f499-719b-75dc-d4b8-4b089870d14c.png)
![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/42a7d199-39a9-b3e1-adfb-b413e880d00a.png)


手順はとしては、まずUnity Hubの右上の「エディターをインストール」を押下し、次の画面で「アーカイブ」を選択し、その下のテキストリンクの「[ダウンロードアーカイブ](https://unity.com/ja/releases/editor/archive)」を選択する。
![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/908e1999-d586-c240-e22c-5ccae22f6136.png)


するとブラウザが開かれ、上図の様な画面になるので”Unity 2020.3.9f1”を見つけて「INSTALL」を押すと、指定したUnityの利用が可能になる。

## テンプレートの適用

次はZEPETOのワールドを作成するための、テンプレートを適用させていく。  
[こちらのサイト](https://docs.zepeto.me/studio/lang-ja_JP/reference/installation_and_settings)のZEPETO World Template Installer Download"にあるリンクを押下し、ダウンロード開始。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/57b21801-f23f-ca0f-1174-578308e483ae.png)


Unity Hubの右上の”新しいプロジェクト”を開き、Unityを起動。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/72e35dfb-4f90-a3ce-1e45-72997b5dc70a.png)


Unityの画面上メニューから「Assets」＞「Import Package」＞「Custom Package」を選び、先ほどダウンロードした”ZEPETO.World.unitypackage”を選択。

![7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/6873c06d-b79f-3240-4503-bf91eb95c021.png)


今度はUnity Hubを開き、新しいプロジェクトを作成しようとすると、上図の様なZEPETOのテンプレートが、反映されているはずなので。こちらを選択して新しいプロジェクトを作成する。

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/c0e75ae7-36d6-95c7-efe6-e8eb4bc3d0fc.png)

途中で上図のウィンドウが出てきた場合は、図の通り選択して進んだ。

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/0cf691de-9bfe-da85-7dc0-98e77c1af5f5.png)

暫くするとUnityが起動するので、上図1を選択し再生ボタンを押下すると、正常であれば、画面に表示されているキューブが回転し始める。  
これで第一関門クリアだ。

## ZEPETOとの紐づけ
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/265038c7-4292-7cc6-cbc9-ad5a53101faa.png)
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/b9d86555-83b0-08a0-0d85-7320af2e90ad.png)


停止ボタンを押した後、画面上部の▼ボタンを押し、Loginを選択するとログインウィンドウが出てくるので、自分の情報を入れてログイン。ZEPETO STUDIOで登録したワールドを選択すると、"Login"が自分のユーザー名に変化する。

## 新しいデータ(Scene)作成
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/0ea94625-77dd-fe4a-3516-268ea35175d3.png)

それではサンプルではなく、新しくプロジェクトのデータを作成していく。画面上の「File」＞「Save As」を選択し、出てきたウィンドウで任意の名前を付けて、新しいデータ(Scene)を保存する。

## 床作り
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/a24e1112-df86-644d-d093-a444aa8bbcb2.png)


それではアカウントをインポートした時に歩けるように、床だけ作ってく。画面左のHierarchyから「+」＞「3D Object」＞「Plane」を選択。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/856d8703-7375-b2cd-605b-beaa0ea174e9.png)


床が出てくるので、InspectorのTransformから"Scale"をX10、Y1、Z10くらいに広くしておく。

## アカウントのロード

ここからが最後の大仕事。

### 素材の準備
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/03041b6f-9525-9758-56d3-ca22ddcfd40d.png)

画面左のHierarchyから「+」＞「Create Empty」でGameObjectが出来上がるが”CharacterController”にリネームする。  
続いて「+」＞「ZEPETO」＞「ZepetPlayers」を選択。  
画面左下のProjectから「+」＞「ZEPETO」＞「TypeScript」で新しいファイルが出来上がるが”CharacterController”にリネームする。

### 素材のアタッチ
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/e8c5934f-a2ea-c84a-1ba3-54eb6c5af4ca.png)

画面左のHierarchyの”CharacterController”を選択し、スクリプトの”CharacterController”を上図の位置にドラッグで、オブジェクトとスクリプトが連動(アタッチ)する。

CharacterControlleスクリプトをクリックしてコードエディタで開き、下記のコードを入力する。（コードの途中には自分のZEPETOを入力）

```typescript
// CharacterLoader.ts
import { ZepetoScriptBehaviour } from 'ZEPETO.Script';
import { SpawnInfo, ZepetoPlayers, LocalPlayer } from 'ZEPETO.Character.Controller';
import { Vector3, Debug } from 'UnityEngine';

export default class CharacterLoader extends ZepetoScriptBehaviour {

    Start() {
        // デバッグログを追加
        Debug.Log("Start method called");

        // プレイヤーキャラクターを生成
        ZepetoPlayers.instance.CreatePlayerWithZepetoId("", "「ZEPETO_ID」", new SpawnInfo(), true);

        // ローカルプレイヤーが追加されたときのイベントリスナー
        ZepetoPlayers.instance.OnAddedLocalPlayer.AddListener(() => {
            const player: LocalPlayer = ZepetoPlayers.instance.LocalPlayer;

            // ローカルプレイヤーの情報をデバッグログに出力
            Debug.Log("Local player added: ", player);

            // 初期位置を設定（必要に応じて変更）
            player.transform.position = new Vector3(0, 0, 0);
        });
    }
}
```

引用：[ZEPETO STUDIO](https://docs.zepeto.me/studio/lang-ja_JP/reference/create_a_zepeto_character)


![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3828655/2a03e293-4f8f-ac32-8714-d06faf080f68.png)

再生ボタンを押下すると、これで無事自分のアバターをUnityにロードする事が出来、キーボードで動かす事も出来る。