[STYLY]TimelineとPlayMakerの使い所

こちらは[【STYLY主催】XR Advent Calendar 2022の9日目](https://qiita.com/advent-calendar/2022/styly)の記事です。

# 初めに
今年も無事NEWVIEW School 2022が終わりました。
NEWVIEW SchoolとはSTYLYを使ってVR/AR作品の考え方や作り方について学べる場所で、
私はテクニカルスタッフとしてJoinさせていただきました。
今年で4年目になりますが、毎年パラパラと同じような質問がやってきます。

それは**TimelineとPlayMakerの使い所**です。

初めてのXR作品作る際に、
何を使えば何ができるのか知りたいのがクリエイターの性です。
ルックに関しては別のところでおまかせするとして、
ここでは動きのある作品を作るときによく使うものをまとめてみました。

# 結論
**いかにしてPlayMakerを使わないかを考えることが重要です。**
PlayMakerを使えば大概のインタラクションが実現できますが、
他の方法に比べ学習コストが高めです。

一方で次に示すモノは学習コストが低く、すぐ使えるのでおすすめです。
1. STYLY Studio
1. Timeline
1. InteractionSDK

上記で示したものはWebだけで済む方法や、Unityがあればすぐに活用できる強力なツールです。
これらを試した上で、いまいちだなーと思ったときが初めてPlayMakerを触るべきタイミングだと思います。

# STYLY Studioの使い所
皆さんご存知[STYLY Studio](https://gallery.styly.cc/studio)。
STYLYで作品を公開する際に絶対使うWebエディターですが、実はできることが多いです。
作品のイメージを固める際のプロトタイプにはあまり労力はかけたくないものです。
そういった際はSTYLY Studioだけ使ってサクッと終わらせましょう。
ここでは3つの使い所をご紹介します。

## 使い所① ユーザー導入/導線をつける
作品が始まると、
1. 全画面スプラッシュでタイトル表示
1. チュートリアルなどのダイアログ表示
1. (コンテンツのメイン体験)
1. 体験をSNSで共有

といったユーザー導入/導線をつけたくなります。
これらの機能がSTYLY Studio標準で用意されているのです。
それが、[2DUI Set](https://styly.cc/ja/manual/styly-manual-2duiset/)
お手元で普段どおり画像を制作し設定するだけで使えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/435e7f53-057f-8fa7-8c41-9792cae99873.png)

## 使い所②　画像や動画を空間内で表示する
お手元で用意した画像や動画をシンプルに空間内で表示する際、見たときにだけ動画が再生されたり、スライドショーを配置したくなりますが、これもSTYLY Studio標準でできる機能があります。
それが、[Media Player Set](https://styly.cc/ja/manual/styly-mediaplayer-set/)です。

[VR京急油壷マリンパーク](https://rojohaku.com/vraburatsubo/)の水槽はすべてこのアセットを使って展示しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/64fc10dd-910f-97c6-818b-385398fbc01e.png)

余談ですが、空間内に配置する普通の動画は720p 30fpsでエンコードしたmp4を利用するのがベストです。全天球の場合秒数を減らすなどしてファイルサイズを減らすと、体験が良くなります。
画像を利用する際もいかにファイルサイズを減らすかが体験のカギです。ここはめんどくさがらず先に調整しておくと後が楽です。
変換は[検索すると](https://www.google.com/search?q=%E5%8B%95%E7%94%BB+%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89+%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6&oq=%E5%8B%95%E7%94%BB+%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%89+&aqs=chrome.1.69i57j35i39j0i512l8.5376j1j1&sourceid=chrome&ie=UTF-8)いろいろ出てくるのでお試しください。

## 使い所③　掴んだり、動かしたり、色を変えたり
空間内で3Dモデルを掴んだり、動かしたり、色を変えたりといったことをしたい場合、普通はUnity上で作り込まないとできません。
ところがどっこいSTYLY Studio標準でもできる機能があります。
それが、[Modifier](https://styly.cc/ja/manual/modifier-starter-guide/)です。

コントローラーで掴んだり動かしたりが出来るということは、ちょっとしたゲーム要素を作れるということです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/038dd73d-6f5d-64ec-d36a-a69912b7b1ca.png)

また、本来はShaderを変えないとできないような見た目に変更できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/0cd3721f-b454-78a8-5e76-c302930aa8aa.png)

STYLY Studioではこれら以外でも様々なものが取り扱えるので、こちらの記事など一度ご覧ください。
[STYLY Magazine 取り込めるアセットを理解しよう](https://styly.cc/ja/manual/asset-type-introduction/)

# Timelineの使い所
ここからはUnity上で実装するものになります。
TimelineはUnityの機能の一つで、シーケンシャルなアニメーションを作る際に強力な機能です。
Adobe Premire Proみたいな感じでタイムラインで表示の管理や動かしたりできます。
[Unity公式の説明](https://docs.unity3d.com/ja/2018.4/Manual/TimelineOverview.html)
[STYLY Magazine/タイムラインの基礎を理解する【Unity】](https://styly.cc/ja/tips/timeline_unity_kaki/)

## 使い所①：一本道なシナリオのある作品
流れが決まっている作品はTimelineで作るのが一番ラクです。
アニメーションの流れがタイムライン上で管理できるので、修正もしやすいので作業が捗ります。

たとえば[VR京急油壷マリンパーク](https://rojohaku.com/vraburatsubo/)のオープニングはTimelineです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/3dbc7da6-9159-7e02-0415-0bfc20c8d0c7.png)


## 使い所②:シーンを大きく切り替える
ふつうのUnityでは大きく場面を切り替える場合は複数のSceneを切り替えて行くわけですが、
STYLYでは1つのScene上で管理する必要性があります。
UnityのHierarchy上でGameObjectをまとめてActive/非Activeにして表現したり、内容を初期化する際は新たにPrefabをControlTrackで設置したほうが早いことがあります。

たとえば[VR京急油壷マリンパーク](https://rojohaku.com/vraburatsubo/)のオープニングはTimelineの例で言えば、1つのTimelineでアニメーションとステージ表示をActive/非Activeで制御してたりします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/7a5a6b01-afa7-f1e8-153b-ddcb490df4b9.png)

# InteractionSDKの使い所
Unity上でインタラクティブなコンテンツを作る際にぜひ見ていただきたい実装方法です。
STYLYはマルチプラットフォーム対応なため、気をつけて実装しないと特定のデバイスでしか動かないということが多々ありますが、InteractionSDKはマルチプラットフォームで動作することが保証されているので便利です。
先述のSTYLY StudioのModifierでも一部のInteractionSDKの機能が使えるので、簡単なお試しはStudio上で済ませて、事細かな実装をする際にUnity上で実装するようにしましょう。

[STYLY インタラクションSDK マニュアル](https://styly.cc/ja/manual/interaction_sdk_manual/)

## 使い所①:コントローラやタッチ操作を起点とするゲーム作品
手に持ってXXXなど、そういったことをしたくなったら、InteractionSDK1択と言ってもいいです。
サンプルとしてはこちらのシーンがわかりやすいので、ぜひ体験して下さい。
[Interaction SDK Sample1](https://gallery.styly.cc/scene/c04122f0-aefc-4e61-9202-2389cc1553a9)
[Interaction SDK Sample2](https://gallery.styly.cc/scene/52fa01b6-7002-4ba4-a90e-c3a694c311c3)

## Tips：選択インタラクションにはuGUI/Buttonコンポーネントも便利
適当な3Dモデルをボタンにすることを考えると、たとえばVR HMDの際にコントローラからRayが出たほうがわかりやすいなど、こまかいUI/UXで困ることがあります。
そういった困りごとをすべて解決してくれるのがuUGI/Buttonコンポーネントです。
本来はuGUIで使うコンポーネントですが、STYLYでは適当なColliderを持つObjectにつけて使うと、勝手にマルチプラットフォーム対応した選択インタラクションが実現できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/0e391543-f504-ab3b-d565-a16e320e3c5d.png)

# PlayMakerの使い所
ここまでの内容で作れないインタラクションをお考えでしたら、その時こそPlayMakerの出番です。

## 一般的な使い方
PlayMakerからでないと動的な変更ができない事が多々あります。例えばSkyboxの変更。これにはSet SkyboxというPlayMakerのActionを呼び出して変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/9317df98-e5c6-a4ff-6d9c-982222d25095.png)

また、ユーザーとオブジェクトの距離に応じてインタラクトする場合もPlayMakerが必要です。Get DistanceでMainCameraとの距離を取得して指定距離以下か比較するといった実装はよくあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/ec9d0536-0c91-178c-61f6-bb675408c9b8.png)

こういった使い方については[STYLY Magazineに様々な使い方](https://styly.cc/ja/tips/playmaker_summary/)がまとめられてます。

STYLY Magazineがすべてを網羅しているわけではないので、ここからはちょっとしたTipsをご紹介です。

## PlayMakerでTimelineを制御する
Timelineの不便な点は、ユーザーインタラクションによって再生/停止を制御できないことです。
ところがPlayMakerと組み合わせることでこれが実現できます。

PlayMakerのCallMethod Actionを利用し、TimelineコンポーネントのPause/Playができるのでこれを活用して実装します。
1. PlayMakerでActiveになったらCallMethodでTimelineをPauseする実装をする
1. ユーザーが操作したら次のStateに映るように実装し、TimelineをPlayする
1. Timelineから上記PlayMakerを実装したGameObjectをActiveにする実装をする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/2362d8c2-b852-d07a-311e-dc72dad5fb97.png)

この実装を使ってるのが[VR京急油壷マリンパーク](https://rojohaku.com/vraburatsubo/)のオープニングがおわり表示されるポータルです。
ユーザーがポータルに近づいたらTimelineを再生し、Timelineにより空間を切り替えています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197699/9af1d471-bd90-8309-0142-351b3fdbc627.png)

## 究極奥義Get/Set PropertyとCall Method
PlayMakerには多数のアクションが用意されています。
[PlayMaker/Action Reference](https://hutonggames.fogbugz.com/default.asp?W2)
[【PlayMakerリファレンス】Action逆引き一覧表](https://styly.cc/ja/tips/playmaker_action_reference/)

上記のActionはUnityのGameObjectのInspectorに存在する項目が大体制御できるようになっています。
が、たまにActoinが足りないことがあります。
そんなときに使うのが究極奥義[Get Property](https://hutonggames.fogbugz.com/default.asp?W695)/[Set Property](https://hutonggames.fogbugz.com/default.asp?W696)です。

UnityのC#スクリプトからでないと使えない関数を呼び出せるのが[Call Method](https://hutonggames.fogbugz.com/default.asp?W1139)です。Timelineを制御する際に使ったのはこちらですね。

たまに実装したのにUnity上では動くもののSTYLY上では動かないといったことがあります。これ、STYLYプラットフォーム側次第なところもあるので、これ使いたいけど動かないというときは、その関数名やProperty名、スクショなどを[STYLY Forum](https://jp.forum.styly.cc/support/discussions)に投稿ください。たまに使えるようになります‥!


# さいごに
まだまだ細かいお話はありますが、
今年のNEWVIEW Schoolで何度も聞かれたことはこれで一通りです。
試してみてわからないことなどありましたら[STYLY FORUM JP](https://jp.forum.styly.cc/support/discussions)にお問い合わせ下さい。

ここまでに紹介したことは私もかかわった[VR京急油壷マリンパーク](https://rojohaku.com/vraburatsubo/)で実装されているので、ぜひご観覧いただけると幸いです。