STYLY Mobile ARコンテンツ制作で使えるPlayMaker Tips

はじめに

こんにちは。
ARコンテンツの制作が好きな @koyoarai_です。

ARコンテンツ制作のプラットフォームは2020年現在、Instagram ARフィルターのSparkARや、SnapChatのLens Studioなど数多くあり、その中の一つにSTYLY Mobileがあります。STYLY MobileのARコンテンツ制作はUnityのPlayMakerで実装を行います。

今回、STYLY Mobile ARプラットフォームで1つ作品をつくりました。
そこでこちらでは制作に用いたPlayMaker Tipsを紹介します。

TrompEX (トロンペクス)というARの作品をつくりました。
歪み・ズレ・揺らぎによって、空間の捉え方を拡張させ、偶然生まれた違和感や、溶け込み具合を楽しむことができます。
STYLY Mobileアプリから体験できるので、ぜひ！！#NEWVIEW #STYLY pic.twitter.com/kVraxZJTel

— koyo arai (@koyoarai_) November 9, 2020

※ STYLY MobileについてはSTYLY公式のこちらのブログが参考になります。

環境

• Unity 2019.3.6f1
• Unity Plugin for STYLY 1.1.4
• PlayMaker 1.9.0.p21

注意) Unity Plugin for STYLYやPlayMakerの更新によってこちらの情報が古くなることがあります。上記バージョンと異なる場合、公式から最新の情報のご確認をお願いします。

1. カメラの取得

STYLY Mobile上とUnityEditor上で動作するように、[GameObject is Null]によって2つの処理を切り分けられるようにしています。カメラを取得した後の処理は、state以降に追加するとわかりやすいです。

参考 : 【Unity/Playmaker】カメラの取得とカメラを使ったインタラクションの実装方法

2. Post-processing Stack v1の追加

STYLY Mobileでは2020年12月現在、Post-Processing Stack v1に対応しています。(v2は非対応)
Unity-Technologies/PostProcessingのv1ブランチからDLし、下記のPlayMakerを追加します。

VariablesのタブからPost Processing ProfileのInspectorにチェックを付け、PlayMakerFSMコンポーネントのControls→Post Processing Profileに設定したいProfileをアタッチします。

参考 : STYLYでPost-Processing Stackを使う

3. デバイスの向きを取得する

Device Prientation Eventで向き一つずつの処理を追加します。
今回は、Left, Right, Portraitを取得したかったので、その他はNoneに設定しています。

各stateに追加したい処理を記述します。

4. オブジェクトをカメラに追従させる (親オブジェクトをカメラにする)

親オブジェクトをカメラ(BackgroundPlane)にすることにより、オブジェクトをカメラに追従させることができます。

5. オーディオリアクティブ

PlayMaker 【Unity/Playmaker】オーディオビジュアライザの作り方の記事をそのまま参考にしました。

6. AR空間のカメラ映像の取得

Unity Plugin for STYLY 1.1.4ではいくつかPlayMakerのカスタムアクションが利用でき、その中にAR空間のカメラ映像の取得できる[Get AR Camera Image]と[Set Projection Texture Mapping]の2つのアクションが含まれていました。

Get AR Camera Imageでは、Textureに保存できるため自身のマテリアルのテクスチャに適用しています。

Set Projection Texture Mappingでは、マテリアルを直接指定する必要があります。

7. (おまけ) PlayMakerのテンプレート化

PlayMakerを右クリック→Save templateでテンプレート化することができます。テンプレート化されたPlayMakerはPaste Templateから呼び出すことができます。基本的に上記のようないくつかの場面で使えそうな機能はテンプレート化するのがおすすめです。

おわりに

以上、STYLY Mobile ARコンテンツ制作で使えるPlayMaker Tipsでした。
私はSTYLY Mobileでの制作で詰まった際、FacebookグループのSTYLY助け合い所さんに投稿しSTYLYの運営のみなさまに助言をいただく機会がありました。STYLY Mobileでの制作を行う場合、こちらへの参加もお勧めします。

PlayMakerを使ったSTYLY Mobileの実装で詰まった部分があって、STYLY助け合い所に投稿したていねいに中の人が回答してくれた..
(しかもunity package付き)

とても嬉しい#STYLY

— koyo arai (@koyoarai_) July 16, 2020

STYLY Mobileは2020年6月にARコンテンツ制作が行えるようになったばかりなので、今後のアップデートにも期待したいです。