【Unity / PlayMaker】TシャツやグッズにARエフェクトを表示する方法

2021年09月24日

本記事では、画面に表示されているマークとグッズに印刷されたマークを重ね合わせてボタンを押すと、グッズの周りにエフェクトが表示される機能を、PlayMakerを使って作成する方法を説明します。

完成イメージ

1 事前準備
2 実装方法
3 使用例
4 STYLYにアップロードする方法

事前準備

事前にUnityにPlayMakerをインストールしておきましょう。

【Unity入門】PlayMakerを使った初めてのゲーム作り概要とインストール

PlayMakerが初めての方は以下の記事を一読すると本記事の理解が深まります。

【Unity】ゼロからわかるPlayMaker「超」入門基礎知識

PlayMakerを使った初めてのゲーム作り②　基本操作編

実装方法

ゲームビューのアスペクト比を変える

ゲームビュー内のアスペクト比をクリックします。

ゲームビュー内のアスペクト比をクリック

一番下の[+]ボタンをクリックします。

一番下の[+]ボタンをクリック

TypeをAspect ratioに変更し、Width & Heightに左から1、2を入力します。

TypeをAspect ratioに変更し、Width & Heightに左から1、2を入力

最後にOKをクリックするとゲームビューのアスペクト比が大体スマートフォンと同じくらいになります。

ゲームビューのアスペクト比が1:2

Main Cameraの前にオブジェクトを移動する仕組み

空のオブジェクトを作る

画面上部のタブからGameObjectをクリックしCreate Emptyを選択する動作を2回繰り返します。

画面上部のタブからGameObjectをクリックし、Create Emptyを選択

すると、Hierarchyウィンドウの中にGameObjectとGameObject (1)が作成されます。
名前は自由に変えられますが、今回は「root」と「PlayObject」に変更して使います。

PlayObjectにPlayMakerFSMを追加する

次にPlayObjectを選択し、Inspectorウィンドウ内のAdd Componentをクリックします。

Inspectorウィンドウ内のAdd Componentを選択

検索窓に「PlayMaker」と入力するとPlayMakerFSMが表示されるので、それを選択します。

PlayMakerFSMを追加

するとInspectorウィンドウ内にPlayMakerFSMが追加されます。

PlayMakerFSMを編集する

Inspectorウィンドウ内のPlayMakerFSM内にあるEditボタンをクリックします。

Editボタンをクリック

するとPlayMaker Editerが開き、ここでPlayMakerFSMを編集できます。

PlayMakerFSMの編集画面

※もしPlayMaker Editerが最初から開いていたら、HierarchyウィンドウでPlayMakerFSMを持つオブジェクトを選択することで、PlayMaker Editerでそのまま編集できます。

分かりやすくするためにState 1の名前を「Get Camera」に変更しておきましょう。
PlayMaker Editer右下のAction Browserをクリックします。

Action Browserをクリック

開いたAction Browserの検索窓に「main」と入力するとGet Main Cameraが表示されるのでそれを追加します。

Get Main Cameraを追加

State内に追加されたGet Main CameraのStore Game ObjectをNoneからNew Variable…に変更し、新しいパラメーター値として「MainCamera」を作成します。

パラメーター値の名前を入力してCreate Variableをクリック

PlayMaker Editerの左枠内のGet Cameraを右クリックし、Add Transition→FINISHEDをクリックします。

Add Transition→FINISHEDをクリック

PlayMaker Editerの左枠内の何もないところを右クリックし、Add Stateをクリックすることを二回繰り返します。
新しくできたStateの一つの名前を「Move root」、もう一つの名前を「Tapped」に変更します。
PlayMaker Editerの左枠内のGet Cameraの真下にあるFINISHEDからMove rootまでドラッグ&ドロップして、矢印をMove rootにくっつけます。

FINISHEDからMove rootまでドラッグ&ドロップ

次にMove rootを選択し、Action BrowserからSet Position, Set Rotation, Get Position, Get Rotationを追加します。

Set Position, Set Rotation, Get Position, Get Rotationを追加

Get RotationのGame ObjectをUse OwnerからSpecify Game Objectに変更し、その下のイコールボタンをクリックした後、NoneをMainCameraに変更します。
Get RotationのY AngleをNoneからNew Variable…に変更し、新しいパラメーター値として「RotY」を作成します。
Get RotationのEvery Frameにチェックを入れます。

Get Rotation内を変更する

Set RotationのGame ObjectをUse OwnerからSpecify Game Objectに変更し、Noneをrootに変更します。
Set RotationのY AngleをNoneからRotYに変更します。
Set RotationのEvery Frameにチェックを入れます。

Set Rotation内を変更する

※この方法で作ったARシーンを実際にSTYLY Mobileで体験すると、必ずエフェクトは地面に対して垂直に表示されます。
スマホを斜め下などに向けたときにもエフェクトが正面に表示されてほしい場合は、Y Angleを設定した方法と同様にX AngleとZ Angleを設定してください。

Get PositionのGame ObjectをUse OwnerからSpecify Game Objectに変更し、その下のイコールボタンをクリックした後、NoneをMainCameraに変更します。
Get PositionのVectorをNoneからNew Variable…に変更し、新しいパラメータ値として「CamPos」を作成します。
Get PositionのEvery Frameにチェックを入れます。

Get Position内を変更する

Set PositionのGame ObjectをUse OwnerからSpecify Game Objectに変更し、Noneをrootに変更します。
Set PositionのVectorをNoneからCamPosに変更します。
Set PositionのEvery Frameにチェックを入れます。

Set Position内を変更する

これでMove rootのState中はMain Cameraが向いている方向にrootというオブジェクトが移動し続ける仕掛けを作れました。

画面上のボタンをタップするとオブジェクトがアクティブになる仕組み

rootを非アクティブ化する

rootを選択し、Inspectorウィンドウ内最上部のチェックボックスをクリックしてチェックを外します。

チェックを外して非アクティブ化する

するとrootが非アクティブ化されます。

画面上に表示するボタン・マークを作る

画面上部のタブからGameObjectをクリックし、UI→Canvasを選択します。

UI→Canvasを選択

作成されたCanvasを選択し、Inspector内のCanvas ScalerのもとにあるUI Scale ModeをConstant Pixel SizeからScale With Screen Sizeへ変更します。

Scale With Screen Sizeへ変更

Hierarchyウィンドウ内のCanvasを右クリックし、UI→Imageを選択します。
作成されたImageの名前を「Marker」に変更します。

※Markerにはグッズに描かれたマークの画像を後で追加します。
ARで画面に表示されたMarkerとグッズに描かれたマークを体験者に手動で重ねあわせてもらうことで、エフェクトを発生させる位置を体験者自身に調整してもらいます。

Hierarchyウィンドウ内のCanvasを右クリックし、UI→Button-TextMeshProを選択します。
※初めてText Mesh Proのテキストを作ると以下のようなウィンドウが出ます。

「Import TMP Essentials」をクリック

画像赤線枠内の「Import TMP Essentials」をクリックするとText Mesh Proが使えます。
さらにButtonをMove Toolで下方に移動し、Scale Toolでサイズを調整します。

Buttonの位置とサイズを調整する

PlayMakerFSMを編集する

PlayObjectを選択し、PlayMaker EditerでPlayMakerFSMを編集します。
Move rootを選択し、Action BrowserからUI Button On Click Eventを追加します。

UI Button On Click Event内のGame ObjectをUse OwnerからSpecify Game Objectに変更し、NoneからButtonに変更します。
UI Button On Click Event内のSend Eventを空白からNew Event…に変更し「Tap」として新しいEventを作成します。