NEWVIEW FEST 2021

2022.01.21(Fri.)~01.31(Sun.)
@SHIBUYA PARCO & VIRTUAL VENUE

XR作品体験、ライブ、トーク、ポップアップetc.XRカルチャーの最前線を発信
3次元空間での表現と体験のデザインを開拓するNEWVIEW初の複合型イベント

【Unity / PlayMaker】カスタムアクション「Set Image Effect」の使い方

この記事では、STYLY Mobile ARシーンのカメラにポストエフェクトを適用する方法を紹介します。
UnityのPlayMakerのカスタムアクション「Set Image Effect」を使用することで、エフェクトを利用することができます。
エフェクトを適切に設定することで、与える印象を演出できます。

STYLY Mobileをインストール

アップロードした作品を体験するにはSTYLY Mobileが必要です。

サンプルシーン

この記事で紹介する内容を反映して制作したサンプルシーンになります。

エフェクトが適用されている様子


シーン公開後のSTYLY Mobile App Marker

サンプルシーンはこちら ※スマートフォンを使用してSTYLY Mobileでご確認ください。

動作プラットフォーム

「Set Image Effect」はSTYLY Mobileでのみ動作いたします。

プラットフォーム 動作
VR ×
Web ×
Mobile

カスタムアクションを利用する準備

Set Image Effectを利用するためには、UnityのPlayMakerを使用する必要があります。

Unity Plugin for STYLYに格納されているPlayMakerのカスタムアクションである「Set Image Effect」を使用します。ダウンロードしていない場合は、あらかじめダウンロードしておきましょう。

Set Image Effectについて

PlayMakerのActionウィンドウの「STYLY」の欄にカスタムアクションが格納されています。

PlayMakerのActionウィンドウ

このアクションは、STYLY Mobileのカメラにポストエフェクトを適用する機能です。
このアクションに設定したマテリアルのシェーダーが適用されます。

カメラエフェクトの作成

マテリアルを作成

ProjectWindow上で、右クリックし、「Create > Material」から、新規でMaterialを作成します。

新規Materialを作成

ProjectWindows上で先ほど作成したMaterialを選択します。そして、InspectorWindowsのAlbedoと書かれている部分の右のUIをクリックし、色を設定します。ここでは、色を赤(R:255,G:0,B:0)に設定します。

Albedoを赤(R:255,G:0,B:0)に設定

GameObjectを準備

HierarchyWindow上で、右クリックし、「Create Empty」でGameObjectを作成します。

GameObjectを作成

PlayMakerを設定

HierarchyWindowからGameObjectを選択します。その次にPlayMakerWindowで右クリックし、「Add FSM」を選択します。

Add FSMを追加

アクションを設定

「Action Browser」から「Set Image Effect」を検索し、Stateに追加します。その後、Materialの属性に、先ほど作成したMaterialを設定します。

Materialを設定

これで、サンプルで示したような画面が赤くなるポストエフェクトが完成です。

まとめ

今回は、Set Image Effectのカスタムアクションについて説明しました。
上記のように、STYLY Mobile ARシーンのカメラにポストエフェクトを適用することができます。

今回は、単純な色を変えるだけのサンプルでしたが、自分でシェーダーを書いたり、配布されている既存のシェーダーと組み合わせることで、表現の幅が広がると思います。

STYLYへアップロード

実際にSTYLYへアップロードして使用しましょう。
今回はUnityのシーンをそのままSTYLYにアップロードするので、こちらをご参照ください。
※注意点としてシーンに「Skybox」を配置すると現実の風景が見えなくなります。Unity上で「Skybox」を外してアップロードしてください。

STYLYアカウントを作成する

アカウント作成方法

newbview popup