Synced slidersに自作の機能を加える

#前提
 これは、2019年10月18日の[このツイート](https://twitter.com/Phasedragoon/status/1185207396202774528)にて公開された[@Phasedragoon](https://twitter.com/Phasedragoon)氏製作のSynced slidersに関する話です。
概要としては、自分がSliderの値を変えてもその値が他人にも反映されること（いわゆる同期状態）を可能にしたSliderです。
***

#準備
Synced slidersのUnityPackageを入れる前に以下の三つを準備してください。
- VRChatにワールドとして上げれるために準備されたUnityプロジェクト [^1]
- Standard Assetsの導入
- VRCPrefabToybox V2.1の導入（前提部分での該当ツイートのリプにあるリンク先から）
これについては、Readmeに英語で書いてあります。
***

#使用方法概要
Readmeにも書いてありますが、親オブジェクトのAnimatorにあるAnimationをSliderでいじる仕組みになっています。
![oya.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/8985bbc2-696d-e179-6659-117261701912.png)
***

#自分で作成したAnimationをスライダーに反映させる
**Animationの内部システム的にこのシステムをHierarchy内で「Ctrl+D」などの複製によって作成するのは高確率で壊れるので、使わないようにしましょう。**
***
##その0 - サンプルシーンのPrefab化
サンプルシーン[^2]内の**MultiSyncedSlider**をAssets内にドラック&ドロップしてPrefabにします。
（複製ではなく、Prefabをシーンに置くことで参照先ミスが生じなくなるためにこの作業を行っています。）

![RePrefab.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/e6f62725-bc61-7390-1a3e-d31d995151ff.png)

***
##その1 - 操作されるGameObjectを配置する
自分の作成しているワールドのシーンに戻ります。（ここではTestSceneというシーンにしました）
まず、先ほど作ったPrefabをシーンに配置して、わかりやすくなまえを変えておきます。（ここではMySliderとしました）
その後、MultiSliderAnimatorの子オブジェクト[^3]を全て消しておきます。

![ReSet.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/cc6343ea-d401-6252-8a16-8643fc955519.png)

***

次にSliderで操作したいオブジェクトをMultiSliderAnimatorの子にします。
（ここでは新たにSphereを子として作成しました）
![Resett.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/743179b2-9235-4f79-defe-3bbc7eacd04f.png)
***
##その2 - 子オブジェクトにAnimationを反映させる
まず、**Assets\Phasedragon\Animations\SliderAnimators**にある**MultiSliderAnimator.controller**を「Ctrl+D」で複製し、それを**MultiSliderAnimator**の**Controller**に反映させます。
これにより、元データの書き換えを防止します。
このControllerの名前は変えてもらっても大丈夫です。
![Recontroller.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/1164e08a-98fb-c143-813b-229210044862.png)

***

次に、**MultiSliderAnimator**のAnimatorタブを開き[^4]、三つのステートと三つのParameterを削除します。
Animatorに詳しい方は、このサンプルステートとトリガーを再利用してもらって構いませんが、何を言ってるかわからないという方はこの通りにしましょう。
![ReAnimator.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/d69a3e91-1b20-fa7e-bae4-b5ee04781dea.png)

***

その後、Animationタブを開き[^5]、Createから新たにアニメーションファイルを作成します。
（ファイル場所は、自分の管理できる場所においてください）
![Animation.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/00c812e4-5a3f-7014-29d6-8427c3846b3b.png)

そしたら、子オブジェクトに**MultiSliderAnimator**からアニメーションを加えてください。
（今回はSphereが黒から赤に変わるようなアニメーションにしました）
既に、子オブジェクトにアニメーションがある場合には、**MultiSliderAnimator**からアニメーションを作れるようにうまくコピペしてください。
**※注意※**
**必ず、0:00~1:00の間でキーフレームを設定するようにしてください。**
![CreateAnimation.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/c275ad30-79ee-80c5-a8fb-e3c623531952.png)

***
##その3 - ステートの設定
再び**MultiSliderAnimator**のAnimatorタブに移動し、Any Stateを左クリックで選択後、右クリックで「Make Transition」を選択してそれを自分の作成してあるステートに繋げます。
次に、Parameterの+からTriggerを選択し、名前を付けます。
ここではRedTriggerという名前にしました。
（後で使用するためわかりやすい名前にしてください）
![ReAllAnimator.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/dba48364-ad68-f455-b505-ecc548b3b019.png)

***

次に、自分で作成したステート（ここではRed）を選択します。
Inspectorより、**Write Defaults**のチェックを外します。
![ReRed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/fae26756-2205-b659-8682-9ec8f579f166.png)


***

その後、AnyStateから自分で作成したステートへの矢印を選択します。
**Conditions**の右下の+より、先ほど自分で作成したTrigger（ここではRedTrigger）を追加します。
そして、真ん中のグラフみたいなやつで、真ん中の青い領域を出来るだけ小さくします。
（**Settings**の**Transition Duration (s)**を0にする方法でもよいです）
![GraphBefore.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/d1e351a0-ca4d-99c1-a4fb-9b2db93773a5.png)
↓
![GraphAfter.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/7eb40904-e355-98fb-c1e4-073593cabafd.png)

***
##その4 - Sliderの設定
元々あるSlider達を書き換えて使用しても良いですが、今回は、新たにSliderを追加する方法を紹介するため、Prefabに元々あったSlider達は消去しました。
まず、Prefabs内フォルダ[^6]にある**SyncedSlider.prefab**をCanvasの子に配置します。
![RePrefabs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/3895d31c-5244-6168-31f4-68b082d33437.png)

***

次に、非Activeになっている**OutputSlider**のInspectorを開き（Activeにはしないこと）、**On Value Changed (Single)**に画像の五つを追加します。
上から二番目のSetTriggerにはステートの設定時に自分で作成したTriggerの名前を入れてください。
![ReSlider.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/5b20ca12-3223-249f-61f5-18c059c5ae1b.png)
また、上から三番目と四番目は同じ名前ですが別物のものなので注意しましょう。
![ReAnimatorr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/8761bdbb-f1cd-1aaf-1c41-c87596901df3.png)

***
##その5 - 完成！
実際にVRChatにアップロードしてみると動くはずです。
Sliderの設定は、Animationで変えれるものならおそらくほとんどいけるはずなので、色々なものの遷移に試してみてください。
下は、色々試してみた例です。
（Sliderが四角いのは、Canvasの**Reference Pixels Per Unit**を0にすると出来ます）
![ダウンロード (2).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/304630/5051d893-8c70-9b8e-e9f2-9d7c47490929.gif)
***
今回チュートリアルとして制作したものと上記gifのSliderが入ったサンプルunitypackageを[こちら](https://drive.google.com/file/d/11v0dpYnyEr8v6WLxZi-wVBxQPDno2iZN/view?usp=sharing)でダウンロードできるようにしておきます。私からはMITライセンスとして配布します。
[ここ](https://qiita.com/hatuxes/items/7be6e1ef4c5fb446512b#%E6%BA%96%E5%82%99)に書いてあるものを導入した上で使ってください。
では、良きVRChatライフを！



[^1]: そもそものワールドのアップロード方法についての説明は省きます。他のチュートリアルをご覧ください。
[^2]: サンプルシーンは**Assets\Phasedragon\Scenes\SyncedSlidersExamples.unity**にあります。
[^3]: 子オブジェクトとは、一個下の階層にあるGameObjectのことを言います。
[^4]: Animatorタブは、左上から「Window>Animator」で開けます。
[^5]: Animationタブは、左上から「Window>Animation」で開けます。
[^6]: Prefabsフォルダとは**Assets\Phasedragon\Prefabs**のことです。