本記事では、STYLY plugin for Unity v1.8.0で追加されたPlayMakerのカスタムアクション「GetARCameraTexture」の使用例を解説します。
本記事は具体的な使用例の解説となっていますので、GetARCameraTextureの概要については下記のマニュアルに詳しい解説が記載されています。
前提としてSTYLY plugin、PlayMakerの導入が必須となります。
GetARCameraTextureはスマートフォンのカメラの情報をリアルタイムにテクスチャに写すことができます。
サンプルシーン
https://gallery.styly.cc/scene/70b9dd33-b19c-4546-85f7-bca39cbc3241
Sample Scene
GetARCameraTextureの使用方法
まず始めにGameウィンドウで画面の比率をスマートフォンの画面サイズの9:16に変更しておきます。
Display1の隣をクリックし、一番下の＋マークから新たにDisplay Sizeを指定します。
9:16
9:16
マテリアルの作成
マテリアルの作成はGetARCameraTextureのマニュアルで解説していますので、こちらを参照してください。
メインシステムの作成
次にメインとなるFSMを作成します。ヒエラルキーで右クリックしてGameObjectを追加し、PlayMaker editorでFSMを追加します。GameObjectの名前は分かりやすいようにFSMと変更しておきます。
GameObject→PlayMaker editor→FSM
今回はカメラで撮った静止画をテクスチャにする場合とリアルタイムの映像をテクスチャにする2通りを実装したいので、静止画のイベントを「One Shot」、映像のイベントを「Every Frame」という名前にします。
EventのAdd Eventに「One Shot」、「Every Frame」とそれぞれ入力してイベントを作成します。
One Shot、Every Frame
イベントを作成したらエディターで右クリックしてAdd Global TransitionからOne ShotとEvery Frameを追加します。
Add One Shot and Every Frame
追加できたらアクションを追加します。状態１を選択し、Action BrowserでGet ARと検索してGet AR Camera Textureを追加します。
Get AR Camera Texture
RenderTextureにある2本線のアイコンをクリックして新たに「RenderTexture」という変数を作成します。Error Eventの箇所にも「error」という変数を新規作成しておきます。
Every Frameにチェックを入れておいてください。Every Frameにチェックを入れると、毎フレームカメラの情報を表示する動作を繰り返すので、おのずとリアルタイムにカメラの映像を取得することが出来ます。
OneShot/Every Frameの両方で同じ作業をしますが、OneShotの方のEveryFrameにはチェックを入れないでください。
OneShotの方のEveryFrameにはチェックを入れない
状態１、状態２のそれぞれ両方を右クリックしてAdd Transitonから先ほど作成したerrorを追加します。
Add Transiton→error
ここまでできたら新規Stateを作成し、状態１、状態２と繋ぎます。
Add new state
静止画と動画を切り替えるためのボタンUIを作る
次に静止画と動画を切り替えるためのボタンを作成します。
ヒエラルキーで右クリックしてUI→Bottonでボタンを2つ追加します。
分かりやすいように「One Shot」、「Every Frame」と名前を変更しておきます。
CanvasにあるCanvas ScalerのUI Scale ModeをScale With Screen Sizeに変更します。
ボタンの位置は適当に調整してください。
Add new bottons
One Shotに格納されているTextを選択し、インスペクターからテキストをOne Shotに変更します。
Text→One Shot
ボタン(One Shot)を選択し、インスペクターにあるOn Clickの＋マークをクリックしてリストを追加します。
None(Object)にはシーンにあるFSMを指定します。
No Functionの箇所はPlayMakerFSM→SendEvent(String)を選択します。その下にはOne Shotと入力してください（ここのスペルはAdd Global Transitionで入力したものと完全に同じにしてください）。
PlayMakerFSM→SendEvent(String)
ここまでできたらEvery Frameの方でも同じことをしてください。
Every Frame
ボタンタップ後に映像を表示させるスクリーンを作る
次にカメラで撮影した物が分かりやすく画面上に見える仕組みを作ります。
ヒエラルキーで右クリックしてUI→Raw Imageを追加します。
サイズなどは適当に変更してください。
UI→Raw Image
インスペクターのRaw Image→Textureに先ほど作成したRenderTextureを指定します。
インスペクターの一番下にあるAdd ComponentからAspect Ratio Fitterを追加し、Aspect ModeをHeight Controls Widthに変更します。
Add Component→Aspect Ratio Fitter→Aspect Mode→Height Controls Width
そしてRaw ImageにStateを追加し、Variablesに移動し変数を追加します。
New Variablesにそれぞれh、w、ratioという名前で変数を追加します。Variable TypeはFloatにしてください。
New Variables→h、w、ratio
New Variablesにfitterと入力し、Variable TypeをObjectに変更しAddを押します。
New Variable→fitter
Object TypeをUnity Engine→UI→Aspect Ratio FItterに変更します。
Object Type→Unity Engine→UI→Aspect Ratio FItter
Action Browserから画像の通りアクションを追加して内容を変更してください。
こちらについての詳しい情報はUnity公式ドキュメントを確認してみてください。
Add actions
シーンにあるFSMのPlayMaker Editorに戻り、VariablesでGameObject、Raw Image、Render Textureの3つを設定します。
まずは既に存在するRender Textureを設定します。
VariablesのRenderTextureをクリックしInputにチェックマークをいれます。
Input
次にGameObject(Cube)を設定します。
VariablesのNew VariableにCubeと入力しVariable TypeをGameObjectに変更し、Addを押して追加します。
GameObject(Cube)
追加出来たらCubeの変数をクリックしInputにチェックマークをいれます。
最後にRaw Imageを設定します。
VariablesのNew VariableにRaw Imageと入力しVariable TypeをObjectに変更し、Addを押して追加します。
Object
追加出来たらRaw Imageの変数をクリックしInputにチェックマークをいれます。
Object TypeのObjectをクリックして、Unity Engine→UI→Raw Imageを選択します。
Unity Engine→UI→Raw Image
そうするとFSMのインスペクターにInputのリストが表示されるので、それぞれに対応した先ほど作成したアイテムを指定します。
Select items
最後に、ARシーン上でCubeのテクスチャが分かりやすいように回転のアニメーションを追加しておきます。CubeにFSMを追加し、Action Browserからrotateを追加します。
X,Y,Zの値を0.1に変更します。
Action Browser→rotate→X,Y,Z=0.1
完成したのでシーンをSTYLYにアップロードしてみましょう。
STYLYへアップロード
実際にSTYLYへアップロードして使用しましょう。
今回はUnityのシーンをそのままSTYLYにアップロードするので、こちらをご参照ください。
アカウント作成方法
