SparkARでオブジェクトを消したり出現させたりする
こんにちは。たつぷりです。以前の投稿で顔を検出してそこにマスクをかぶせるだけのインスタグラムエフェクトを作成する手順について紹介しました。今回はそのエフェクトが少しアップグレードしたのでそれについてまとめます。
完成品のデモ映像はこちら。
一応エフェクトのリンクももう一度張っておきます。
というわけで今回はタップや、口を開くなどの操作に応答するエフェクトを作成する手順をまとめます。すべてやると長くなりそうなので特に今回はPatch Editorの使い方と、オブジェクトを消したり出現させたりするエフェクトにのみフォーカスします。その他は次回以降にまとめます。
目標
冒頭張り付けたリンクのデモ動画の構成要素を整理するとこのエフェクトは以下のような要素からなる。
- タップすると目の色が変わる
- 口を開けると片目がとれて目がむき出しになる
- 口を開けると背景が変わる
このようなインタラクティブなエフェクトを作成するにはPatch Editorを用いたノードベースのプログラミングを用いれば良い。シンプルなことはこれを用いることで非常に簡単に実装できる。
今回、Patch Editorについて参考にしたのは公式の以下のチュートリアルである。
Tutorial: Adding Touch Gestures with the Patch Editor
既に述べた通り、以下ではPatch Editorに関してとオブジェクトの消滅、出現を制御する方法のみを書く。
Patch Editor
まずPatch Editorは上のタブで、View>Select/Hide Patch Editorを押すことで開いたり閉じたりできる。ショートカットはCtrl+Alt+Pである。
実際に開いたPatch Editorは以下のように表示され、もしプロジェクトをテンプレートから始めている場合などは既に何かしらプログラムが組まれていることがある。
Patch Editorでの基本操作方法は、Ctrl＋マウスホイールで拡大・縮小。Alt+左クリックで平行移動。 また、なにもせずにホイールで上下平行移動。Alt押してホイールで左右平行移動。
さらに右クリックか左クリック2回、あるいは下のAddPatchで新しいPatchを追加することができる。 Patchにはジェスチャーの他にも関数や論理演算など多岐にわたって含まれている。現段階では筆者はその全てを使いこなせているわけではないので、今後少しずつ解説していく。
オブジェクトの情報（例えばVisibleやPosition）やマテリアルの情報をPatch Editorで使いたい、代入したいときなどはそのオブジェクトなどのインスペクターから該当するプロパティを選びその左にある矢印をクリックする。するとそのプロパティがPatchEditorに表示される。具体的には下の図を参照せよ。
Patchを削除したいときは、選択してDeleteキーで消去できる。
以上がPatch Editorの基本的な操作方法である。
オブジェクトを消す
次に今回のもう一つの目標である、口の開閉に応じてオブジェクトを消したり出現させたりする方法についてまとめる。
以下では具体的に筆者が作成したエフェクトを例にして開設する。このエフェクトで消したいオブジェクト、ここでは右目を選択する。この上でインスペクターを確認すると「Visible」というプロパティがあるので、これのPatchを作成する。VisibleというパラメーターはBool型で、オンになっているときオブジェクトは表示されオフの時消える挙動を示す。
よって、口が開いているときVisibleがFalse、それ以外でTrueになるようにPatchを組めばよいことになる。
ここで、口の開閉の状態はMouse Open Patchで取得することができる。 よってPatch EditorにMouse Open Patchを追加する（このPatchはInteractionカテゴリーの中にある）。このパッチはface tracerオブジェクトのfaceを引数にとり、Bool型の返り値を返す。口が開いていたらTrue、閉じていたらFalseである。このBool値を先ほど導入したVisibleのPatchに入力する。
しかしこのままノードをつなぐと、口を閉じているときに目が消え、開いているときに目が現れるというように希望する動作の逆の挙動をしてしまう。そこでMouseOpenから出力されたBool値を反転させる操作が必要である。これはNot Patchで実現することができる。よって、以下のようにPatchを組めば口を開いたときに右目が消えるという挙動を示す。
まとめ
今回紹介したようにSparkARではPatch Editorを用いて比較的簡単にインタラクティブなエフェクトの作成が可能である。今回は口の開閉に合わせて特定のオブジェクトが消えたり出現したりするエフェクトを構成した。
