STYLYのインタラクションを遊び始めようとしているあなたへ

# インタラクションは沼
STYLYのインタラクションを遊び始めたときの私の感想です。
STYLYでは多数のデモの記事が投稿されていますが、リファレンスという形では纏っていません。また、デバイス毎に動きが違うということがざらにあります。

というわけでインタラクションのリファレンスをまとめました。
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/STYLY?src=hash&amp;ref_src=twsrc%5Etfw">#STYLY</a> のインタラクションが沼だったので、1枚で完全に理解できるようにしました。<br>まだ描き途中ですがちょっと議論したいのでだしてしまいます。<br>落ち着いたところでQiitaで解説するます。 <a href="https://t.co/RxNvzR9mdc">pic.twitter.com/RxNvzR9mdc</a></p>&mdash; noria (@noria901) <a href="https://twitter.com/noria901/status/1124128071756292096?ref_src=twsrc%5Etfw">2019年5月3日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ここでは"完全に理解した”程度を目標に、インタラクションの基本とポリシー、リファレンス、STYLYのUpdate予定を紹介します。
ちなみに、STYLYなんぞという方は[こちら](https://qiita.com/noria901/items/a8239be64daba97578b2)から見て頂くと分かりやすいです。

# インタラクションの基本
インタラクションの一般的な処理フローは、Userによるインプットに始まり、各Deviceのインプットを取り扱うInput Systemにより数値化され、Simulation System内でInputに対する動きをまとめたLogicにより各オブジェクトの状態が変わり、オブジェクトをレンダリングした結果がOutput Systemを通してUserに届きます。
![styly_rikaisita_interaction_basic.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/26e56ad4-902c-5cf9-236d-b744655596bd.png)

ここで言うSimulation SystemとはSTYLYのことですが、STYLYでインタラクションを実現することを考えると、取り扱えるInputとLogicを理解するとよさそうです。

現状STYLYが取り扱うInputは2種類あると考えられます[^1]

1. From input system  
  Input System由来のものです。マウスやキーボードといったLegacy Inputもそうですし、HMDやコントローラの角度情報等も取れます。  
2. From other game objects  
  シーン上の他Objectの動作がInputになることがあります。例えば、[Userが投げたボールが等速運動で転がり何かにぶつかる時に、ユーザに何か提示する](https://gallery.styly.cc/mizkun/45a885b7-39a1-11e9-b34d-4783bb2170d0)ことを考えると分かりやすいでしょう。

これらのInputを取り扱うLogicもこれまた2種類あります[^2]

1. STYLY preset game objects  
  STYLYでは起動時に配置されるObjectがあります。具体的にはUserをモデル化した、Main CameraとControllerがそれにあたります。これらのObjectはデフォルトでキーアサインされており、視点変更や移動といったVRにおいて一般的なインタラクションを実現してくれます。
2. User uploaded assets  
  STYLYデフォルトのインタラクションだけでは物足りない場合は、自身で実装することができます。基本的にはUnity上でprefabなどにPlayMakerでインタラクションを実装したものを、STYLY Unity Pluginを用いてUploadします。UploadするとAssetとして自由に配置することができ、配置した瞬間にPlayMakerのFSMが動き出します。

これらの詳細がどのようになっているかは[リファレンス](#リファレンス)の章で説明するとして、残る疑問はSTYLYのインタラクションに対するポリシーでしょう。以降は私なりの解釈になりますので、興味がない方は[リファレンス](#リファレンス)まですっ飛んでください。

# STYLYのインタラクションに対するポリシー
STYLYのインタラクションに対するポリシーを一言で言うと、**クリエイターの皆さんはコンテンツのクオリティコントロールをする責務を負っている**、です。
このポリシーを読み解くには、STYLYの特徴を理解する必要があります。私が思うに、STYLYには2つの大きな特徴があります。

* マルチデバイス性  
  複数のデバイスで視聴できる環境が提供されることで、様々なユーザが触れられる機会を得られます。
* 簡単に作れて即時配信  
  Web Editorという強力なシーンエディタ上で作れるのはもとより、数クリックで作品を公開できてしまう戸門の広さはクリエイターに表現の自由を与えてくれます。

こう考えてみると、ユーザとクリエイターを直接繋ぎ加速することこそが、STYLYの正体なのかもしれません。この前提で、STYLYのインタラクションを振り返ると、**インタラクションに関して、すべての領域でマルチデバイス性を保証できるわけではない**という事実が横たわります。環境によって異なるデバイスのInput System差分を吸収し切れていません。クリエイターはこの状況を考慮したうえで作成するわけですが、すべてのデバイスに平等なインタラクションを提供するコストは膨大です。そもそもデバイス自体の特性により正しく表現できないことの方が多いでしょう。ともあれインタラクションを実現すると対応デバイスが絞られるので、クリエイターはどのようなエンドユーザに見てもらいたいか、そのエンドユーザの体験環境を想定して実現する必要があります。これが、クリエイターがクオリティコントロールをする責務を負うことの根拠となってます。

次章でリファレンスを紹介しますが、STYLYのマルチデバイス性を保証できる領域と、クリエイターがクオリティコントロールすべき領域に分かれているという前提を心に留め置いてご覧ください。[^3]
![D5oFSKvUUAIT6Jb.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/86e7ac5a-dd26-3e6b-26a3-ceab15f12925.jpeg)

[^1]: MR対応することを考えると、ここは増えるんじゃないかな。だって、現実と混ざるんだから。
[^2]: 将来的に3種類目のLab機能が提供される。
[^3]: 図中ではデフォルトキーアサインをマルチデバイス性保証できてるとしているが、こんなバラバラな状態で保証していると断言するのは心苦しい。

# リファレンス
PlayMakerで実装するのに必要な要素を1枚にまとめました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/bccb2257-2cba-a44b-c546-fb714c8447f4.png)

これではあまりにあまりなので、それぞれについて読み方を紹介します。

## Default key assign
デフォルトキーアサインされているインタラクションは以下の通り。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/f2288182-7de9-7043-c1dd-378dad8e66ed.png)
こうしてみると、対応関係にDesktop、PCVR、6Dof Stand alone、3DoF Stand aloneの違いがよく出てますね。
詳細は以下の通り

* Gaze : 視線の変更
* Walk,Up/Down : 歩行と上下の移動
* Transport : トランスポートはVRでの一般的な移動表現。
* Rotate : その場で回転
* Back to menu : STYLYのメニュー画面に戻る
* Screen plane move : 描画面を水平に移動する
* Zoom In/Out : Main Cameraの一時的なズーム
* Other Assign : その他特殊な機能等の備考
    * PCVR : 右トラックパッドクリックでカメラ機能
    * Oculus Go : TriggerでMouse Click[^4]

[^4]: これは別にSTYLYが、というよりOculus SDK標準動作なのかな。

## Events
ここでいうEventとは、[PlayMakerのEvent](https://hutonggames.fogbugz.com/default.asp?W128)のこと。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/41919068-1e95-cc41-acb0-8a7af02b3ff3.png)

* Actions  
  [PlayMakerのAction](https://hutonggames.fogbugz.com/default.asp?W2)には、Inputの状態を取得したり、Eventを待ち受けるものがある。と言ってもLegacy Input分しか用意されてないので、Desktop Support向けに利用するといいだろう。  
  * [Input Actions](https://hutonggames.fogbugz.com/default.asp?W60)
  * [Device Actions](https://hutonggames.fogbugz.com/default.asp?W490)
* Events  
  [PlayMakerのEventの仕様](https://hutonggames.fogbugz.com/default.asp?W128)にあるEventは一通り使える。  
  さらに追加でSTYLYがPCVRのコントローラ向けにCustom Eventを用意している。  
  これでトリガーボタンとグリップボタンをHandleできるようになる。

|Custom Events|Left hand|Right hand|
|:---------------|:------------------------------:|:---------------------:|
|Trigger Down|Global_TriggerPressDown_L|Global_TriggerPressDown_R|
|Trigger Up|Global_TriggerPressUp_L|Global_TriggerPressUp_R|
|Grip Down|Global_GripPressDown_L|Global_GripPressDown_R|
|Grip Up|Global_GripPressUp_L|Global_GripPressUp_R| 

## Game Objects
インタラクションする対象となるObjectが、自身が作成しているAssetsに収まってるなら内部で参照するだけ。では、Object間の連携をしたい場合はどうしましょう。一部を除き、基本的にはPlayMakerのActionである[Find Game Object](https://hutonggames.fogbugz.com/default.asp?W51)を使って探すことになりますが、そこで必要になるのがObject nameです。STYLYが提供しているものと、クリエイター自身が用意する2種類あります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/3390d9f0-50cc-b460-d3ff-0dc02d1ddc0a.png)

* Preset Game Objects  
  STYLYは起動するとデバイスに合わせていくつかのObjectを生成します。  
  その[Object名が公開されている](https://styly.cc/ja/tips/playmaker_summary/#i-2)ので、これを使えば参照できるようになります。  
  例外として、MainCameraだけはActionである[Get Main Camera](https://hutonggames.fogbugz.com/default.asp?W569)を使えば、全ての環境で利用することができます。

|Object Name|memo|
|:---------------|:------------------------------:|
|Main Camera|Web Player、Desktop以外はサポート外。[Get Main Camera](https://hutonggames.fogbugz.com/default.asp?W569)つかうよろし。|
|Controller (right)|PCVRコントローラの右手。PCVR以外はサポート外。|
|Controller (left)|PCVRコントローラの左手。PCVR以外はサポート外。|

* User Uploaded Assets  
  自身でアップロードしたAssetsを参照したい場合で思いついたのはこの2つ。
  * Bundle assets into prefab  
    そもそもAsset分ける必要ないならひとまとまりにするのが案外幸せですよ、という忠告。  
    Prefabの子として存在するなら[Find Child](https://hutonggames.fogbugz.com/default.asp?W64)で参照できて楽です。
  * Refer uploaded assets  
    アップロード済みのアセットをシーンに配置したなら、Asset名で参照できる。ただし、prefab名ではない。  
    [ここで具体的な方法](https://styly.cc/ja/tips/warpsystem01/#Object_Name)が書かれてるが、UploadしたAssetのユニークIDで指定する必要がある。[^5]

Game Objectの参照が取れたら、あとは[Send Event](https://hutonggames.fogbugz.com/default.asp?W34)なりで連携するだけです。
Object nameわからないなら、最悪Bloadcastしてしまうという方法も。場合によってはその方が効率がいいこともありましょう。

[^5]: ユニークIDをハードコーディングする必要があるとか正気の沙汰とは思えないのだが、私だけだろうか。

## デバイスとの対応関係
ここまで紹介してきたリファレンスですが、ざっくり各デバイスとの対応関係を示すと以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/8604ad00-2440-8653-abe9-1333ec9a82d5.png)
一部補足すると、

* 先述した通り、OculusGoのコントローラトリガーボタンはMouse系で取得できる
* PCVRのアプリは実は一部のLegacy Inputを受け付けることができる。  
  これはつまり、HMDを被った人、Desktop画面で操作する人の2P Playができるということだ！

実際にこれらのEventが発火する様子を見れるようにしたデモシーンを作りました。
[Interaction Test](https://gallery.styly.cc/noria901/375e4842-6ccd-11e9-b34d-4783bb2170d0)
こちらをつつきながら図を見比べると分かりやすいかと思いますが諸注意など。

* Eventに関しては、対応するものが発火すると回ります。止まりません。
* Game Objectsに関しては、STYLYさんが用意しているものについてRotateをそのまま反映してあります。見つからなかったらNot foundと表示されます。

# STYLYのUpdate予定
インタラクションに関して、私の知っている限り2つのUpdate予定があります。[^6]

1. Labs
Labsについては[すでに公開されて](https://styly.cc/ja/feature/studio_lab/)いますが、ある程度の定型アクションはLabsのAssetsとして公開されるようです。

2. FSM Templateの配布
PlayMakerのFSMはTemplateとして保存できるのですが、STYLYでよく使うものはTemplate化して配布するようです。  

[^6]: 代表の山口さんが[ここ](https://twitter.com/from2001vr/status/1124491829519441921)とか[ここ](https://twitter.com/from2001vr/status/1124504739180269573)で教えてくださった。

# おわりに
ここまで読んだあなたは**STYLYのインタラクション完全に理解した**:wink::v:と言っても過言ではないでしょう。

これでインタラクションを実装できるとはいえ、STYLYはまだ発展途上ですし、あなたの表現したいことが表現できないこともあると思います。
そんな時は、ぜひSTYLYさんに要望を出してください。あの人たちは**ツイ廃**なので、気軽につぶやくといいですよ

* Twitter
    * [#STYLY](https://twitter.com/search?q=%EF%BC%83STYLY)でつぶやくと大体拾ってくれます
    * [STYLY公式アカウント](https://twitter.com/STYLY_VR)もある
* Facebook
    * 日本語：[STYLY助け合い所](https://www.facebook.com/groups/stylyusers/)
    * 英語：[STYLY user group](https://www.facebook.com/groups/STYLY.VR/)