Beat Saber 1.37.0 で VRChat 対応アバターを利用する最も簡単な方法

# はじめに

この記事では、VRChat用アバターとして販売されているアバターを、Beat Saberのカスタムアバターとして利用する方法を解説します。
1.37.0で詳しく書いた記事はなかったので参考になればと思います。

# 0. Versions 

この記事で利用するバージョンを記述します。
バージョンをそろえることで、予想外の場所でのエラーを防ぐことができます。

```yaml
Beat_Saber: 1.37.0
Unity Hub: 3.8.0
Unity: 2021.3.16f1
BSManager: v1.4.8
Custom Avatars: 5.4.0
Final IK: 1.9.0
Dinamic Bone: 1.2.0
```

BSManagerを利用することで、簡単にBeat Saberの管理ができますので個人的にお勧めします

https://github.com/Zagrios/bs-manager

BSManagerをインストールしたら、Beat Saber 1.37.0 をダウンロードしておきます。 

カスタムアバターの導入には、まずゲーム側に [Custom Avatars](https://github.com/nicoco007/BeatSaberCustomAvatars) Modがインストールされている必要があります。
BSManagerのサイドバーから1.37.0を選択し、Modタブ Custom Avatarsをインストールします。

# 1. Unity Project

## 1. Project

### 1. Template Project

[Custom Avatars](https://github.com/nicoco007/BeatSaberCustomAvatars) のリポジトリに、アバター作成専用にカスタマイズされたUnityプロジェクトのアーカイブがあるので、そちらをダウンロードします。

ゲーム側に Custom Avatars 5.4.0 を導入している場合、以下のリリースから `CustomAvatar-UnityProject-v5.4.1+bs.1.37.0.zip` をダウンロードして展開します。ほかのバージョンにおいても同様に、`UnityProject`と書いているファイルをダウンロードします。

https://github.com/nicoco007/BeatSaberCustomAvatars/releases/tag/v5.4.1

### 2. DLL

このままではアバターは作成できないので、`DynamicBone.dll` `FinalIK.dll` の２つのDLLを配置します。

1. [BeatMods](https://beatmods.com/#/mods) の右上の Game Version から、`1.37.0`を選択
1. 一つ隣の検索ボックスから、`Dynamic Bone` と `Final IK` をそれぞれ探してダウンロードします
1. 展開して、`Libs` の中にある、`FinalIK.dll`, `DynamicBone.dll` を見つけてください
1. `CustomAvatar-UnityProject-v5.4.0 / Assets / Libraries` フォルダに`FinalIK.dll`, `DynamicBone.dll`の２つを配置します
1. `Assets / Libraries` の中に、`CustomAvatar.dll`, `FinalIK.dll`, `DynamicBone.dll`の３つが配置されていることを確認してください

## 2. Unity

Unity Hub で `追加` を選択し、先ほどダウンロードしたアーカイブプロジェクトのフォルダーを選択します。

このプロジェクトを開くために、`Unity 2021.3.16f1` をインストールしてプロジェクトを開きます。

`Windows Build Support` が必要です。

## 3. VRChat Avatar

ここで、VRChatアバターをインポートします。
今回は Amatousagi さんの Chiffon を利用して解説します。

[lilToon](https://lilxyzw.github.io/lilToon/#/) は Beat Saber では対応していないので、インポートする必要はありませんが、Editor 上で作業するために入れておきます。

Booth から `Chiffon_v1.00_20240102.zip` をダウンロードし、VRChatプロジェクト同様unitypackageをインポートします

# 2. Avatar

ここから、アバターをBeat Saber用に適応していきます。

## 1. Add Hierarchy

ヒエラルキーにアバターを追加します。

::: note info
アバターのFBXの RIG / アニメーションタイプ が `Humanoid` に設定されていることを確認してください
:::

以下の場所にあるオブジェクトをヒエラルキーにドラッグしてください。

```
Assets > Amatousagi > Chiffon > FBX > Chiffon_ver1.0.0.fbx
```

:::note warn
VRChat用にセットアップされたprefabには、VRC専用のスクリプトが付属しているため、FBXをインポートすることをお勧めします。
:::

:::note warn
改変後のアバターを使いたい場合は次の`Modular Avatar セットアップ済みアバターについて` を参照してください
:::
<details><summary>Modular Avatar セットアップ済みアバターについて</summary>

> Modular Avatar で衣装等をセットアップしている祭、以下の作業でオブジェクトを作成してください
>
> ### VRCアバタープロジェクト
>
> 1. ヒエラルキー上で 改変済みアバターを右クリックし、`Modular Avatar -> Manual Bake Avatar`を選択します
> 1. ヒエラルキーにクローンが作成されるので、これをプロジェクトにドラッグしてプレハブ化します
> 1. そのプレハブを右クリックして`パッケージをエクスポート`を選択します
> 1. `依存を含める`にチェックが入っていることを確認してエクスポートします
>
> ### Beat Saberアバタープロジェクト
>
> 1. 書き出したパッケージをインポートします
> 1. プレハブをヒエラルキーに移動します
> 1. アタッチされているスクリプトコンポーネントをすべて削除してください
> 1. VRC Phys Bone は、Dinamic Bone に代替できます

</details>

## 2. Material

このままではシェーダーlitToonのままなので、Beat Saber 専用のシェーダーに置き換えます。
lilToonを利用している場合は、`Beat Saber/Unlit Glow`がよさそうです

アバター内のすべてのmaterialに対して以下の操作を行ってください

1. オブジェクトを選択し、設定されているマテリアルを探します
1. マテリアルの `Shader` のプルダウンを開き、 `Beat Saber/Unlit Glow` を選択します
1. lilToon で設定されていた Texture を、Unlit Glow の Texture にも適応します
1. アバター内のすべてのマテリアルに対してこの操作を行ってください

## 3. Object Hierarchy

以下のヒエラルキー構造を、空のオブジェクトで作成してください。

`<SCENE>`は任意のシーン名です

現在はこのようになっていると思いますが、

```:Before
<SCENE>
    Main Camera
    Directional Light
    Chiffon_ver1.0.0
        ...
```

以下の構造を作成してください

`[]`で囲まれている名前が作成するオブジェクトです。
Transform はリセットしておいてください
`[Chiffon]` は任意の名前でも問題ありません

```:After
<SCENE>
    Main Camera
    Directional Light
    [Chiffon]
        Chiffon_ver1.0.0
            ...
        [Head]
            [HeadTarget]
        [Body]
        [LeftHand]
            [LeftHandTarget]
        [RightHand]
            [RightHandTarget]
```

## 4. Object Position

オブジェクトの位置調整を行います
まず、Target関係はアーマチュアの位置に置かないといけないので親子制約を加えます。

### 1. Target (Parent Constraint)

前章でのヒエラルキー構造の、`[HeadTarget]` `[LeftHandTarget]` `[RightHandTarget]`に対して作業します。

1. `[HeadTarget]` `[LeftHandTarget]` `[RightHandTarget]` の３つすべてに、`Parent Constraint`コンポーネントを追加してください
1. 追加したすべてのコンポーネントのソースを`+`を押して１行追加しておきます
1. 以下の表にある通り、アーマチュアのオブジェクトをソースのトランスフォームに追加します

    `Armature Path` は長くなるため、最初の `Chiffon/Chiffon_ver1.0.0/Armature/Hips/Spine/` は省略しています

    | Object Name     | Armature Path                                 |
    | --------------- | --------------------------------------------- |
    | HeadTarget      | Chest/Neck/Head                               |
    | LeftHandTarget  | Chest/Shoulder.L/UpperArm.L/LowerArm.L/Hand.L |
    | RightHandTarget | Chest/Shoulder.R/UpperArm.R/LowerArm.R/Hand.R |

1. Parent Constraintにソースをそれぞれ追加出来たら、`ゼロ`を押して自身の位置を同期させます

### 2. Tracking Position

Targetが設定できたら、次は`[Head]` `[LeftHand]` `[RightHand]` の位置を調整します。
以下の通り設定してください

#### 1. Position

| Object Name | Description                               |
| ----------- | ----------------------------------------- |
| Head        | View Position, VR での視点の位置を表します |
| LeftHand    | 左手のセイバーの位置を表します             |
| RightHand   | 見てのセイバーの位置を表します             |

Headに関しては、オブジェクトのかぶらないように若干前の方が好ましいです
LeftHand, RightHandに関しては最後にもう一度調整するので、大体の位置で置いておいてください

#### 2. Rotation

`LeftHand` `RightHand` については、角度の調整が必須になります。

この２つのY軸の＋方面が、手首側を向くように設定してください
<img width="300" alt="2f138c42-acc4-a5cb-b38e-2e88412ce6f2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1157461/2f138c42-acc4-a5cb-b38e-2e88412ce6f2.png"><img width="300" alt="a33e8746-8b7d-579f-42ac-b1049f60c9cb.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1157461/a33e8746-8b7d-579f-42ac-b1049f60c9cb.png">

## 5. VRIK Manager


### 1. Component

下記オブジェクトに、`VRIK Manager` コンポーネントを追加します。

```
<SCENE> / Chiffon / Chiffon_ver1.0.0
```

### 2. Attach

`<SCENE> / Chiffon / Chiffon_ver1.0.0` の `VRIK Manager` を以下の通りに設定します。

| VRIK Manager                | 割り当てるオブジェクト                             |
| --------------------------- | ------------------------------------------------- |
| Solver / Spine / HeadTarget | \<SCENE\> / Chiffon / Head / HeadTarget           |
| Solver / Left Arm / Target  | \<SCENE\> / Chiffon / LeftHand / LeftHandTarget   |
| Solver / Right Arm / Target | \<SCENE\> / Chiffon / RightHand / RightHandTarget |

## 6. Avatar Descriptor

下記オブジェクトに、`Avatar Descriptor` コンポーネントを追加します。

### 1. Info

```
<SCENE> / Chiffon
```

名前、作者、カバー画像を指定します。

カバー画像はスプライト画像を指定できます。

### 2. Position

最後にもう一度セイバーの位置を調整します。
Avatar Descriptor を追加した時点で、セイバーの位置がシーン上に表示されていると思いますので、その位置を見ながら、`LeftHand` `RightHand` の位置を調整してください。

左: AvatarDescriptor追加前
右: AvatarDescriptor追加後

<img width="300" alt="a3fe3aed-b779-71cc-ddeb-4323e3794288.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1157461/a3fe3aed-b779-71cc-ddeb-4323e3794288.png"><img width="300" alt="7493db57-00e0-9614-747e-5762136bb1e8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1157461/7493db57-00e0-9614-747e-5762136bb1e8.png">

> また、Chiffon の場合は、下記の位置でセイバーがちょうどいい位置になりました
>    ```
>    LeftHand 
>        Position
>            X        Y        Z
>            -0.4978  0.913    0.0408
>        Rotation
>            X        Y        Z
>            -5.652   -7.646   -89.242
>        Scale
>            X        Y        Z
>            1        1        1
>
>    RightHand 
>        Position
>            X        Y        Z
>            0.4978   0.913    0.0408
>        Rotation
>            X        Y        Z
>            -5.652   7.646    89.242
>        Scale
>            X        Y        Z
>            1        1        1
>    ```

# 3. Export

上部のToolStripMenuから、
`Window/Avatar Exporter` を表示させ、アバターを書き出します。


# Reference

https://bsmg.wiki/models/avatars-guide.html

https://github.com/nicoco007/BeatSaberCustomAvatars

https://beatmods.com/

https://kurotori4423.hatenablog.com/entry/2018/06/03/171758