Spark AR用いてタップで色を変えるエフェクトを作成する
今回も前回の投稿に引き続きSpark ARでインタラクティブなInstagram向けエフェクトを作成する方法に関してです。 詳しくは以下のリンクを見てただきたいですが、 tatsupuri.hatenablog.com
筆者が以前作成したエフェクト（デモ画像）を構成する要素は以下からなっていました。
- タップすると目の色が変わる
- 口を開けると片目がとれて目がむき出しになる
- 口を開けると背景が変わる
今回は1番目の「タップすると目の色が変わる」方法についてまとめます。
目標
今回目標とする「タップすると目の色が変わる」を構成するのは、以下の2つである。
- タップしたことを検出する
- 目に割り当てられているマテリアルから「色」の情報を取得、変更する
なお、色を変更することに関して、公式のレファレンスを参照した。
タップの情報を取得する
上述のレファレンスに従って、まず2つの色を入れ替える方法、続いて3つ以上の色を巡回的に入れ替える方法についてまとめる。どちらの場合もタップに応じて異なる色を出力するパッチを構成する。
なお、2つの色を変える場合は3つ以上の場合の方法でも同様に実行できるが、パッチの使い方について個人的に勉強になったので異なった方法で実装する。
色が２つの時
まず、色が二つの時はIf Then Elseパッチを用いることで2つのデータの出力を制御することができる。ポイントは、If Then Elseパッチの返り値のデータ型を変更できるところである。これをするには、以下の図のようにパッチの下部の歯車のマークの左にあるプルダウンから選択すればよい。
このようにして、If Then Elseパッチで二つの色を場合分けすることができるようになった。
次にタップで上のIf Then Elseパッチからの出力を切り替えるようにしたい。つまりタップに応じて、If Then Elseの「Condition」を反転させること実装する。まず、タップを検出するのは「Screen Tapパッチ」である。ここで、Screen TapパッチのGesture Stateからの出力をそのままIf Then ElseのConditionに入力できないことに注意する。これは、この間にSwitchパッチをはさむことでタップによってConditionを反転するのか、OnまたはOffの一方通行の操作なのかを制御することができる。今回はタップする度に色を変えたいので、Screen TapパッチをSwitchパッチのFlipにつなぎ、それをIf Then Elseにつなぐ。
色が３つ以上の時
上でやったようにIf Then Elseパッチを使うと、二つの選択肢しか選ぶことができないので複数の選択肢の間で切り替えるにはCounterパッチとOption Pickerパッチを用いる。Screen TapパッチからのノードをCounterパッチにつなぐ。CounterパッチもSwitchパッチと同様にTap操作による変数の挙動を指定するためのパッチである。例えば、CounterのIncreaseにつなぐとタップの度に整数を１ずつ増やしていく。初期値は０で、カウントの総数はMaxmumCountで指定することができる。つまり、MaxmumCountで３を選ぶと、0,1,2,0,1,2,...というように変数が動く。
このような３つ以上の整数でラベルされる要素を切り替えるのはOption Pickerパッチで実現できる。Option PickerもIf Then Elseと同様にして返り値の型を選択することができる。また歯車のマークからNumber Of Inputsを選択することができ、Optionの総数をこれで制御できる。
マテリアルを制御する
最後に、これらをMaterialに出力する。以下では色が2つの場合を想定して書く。色を変えたいMaterialをAssetの一覧から選択した上でInspectorからTexture プロパティのパッチを作成する。If Then Elseからの出力をMaterialのパッチにつなげばタップによって色が変わることを確認できる。マテリアルにはBase Colorも選ぶことができる。つまりBase Colorの色とTextureをBlendしたものが出力されることに注意する。
シミュレーターを用いた動作確認の方法
シミュレーターから動作確認をしたいときは以下のようにすれば良い。シミュレーターの右上の三本線をクリックすると下図のような選択肢が出てくるのでSimilate Touchを選択する。するとシミュレーターの上でマウスをクリックすることで「タップ」を実行できるようになるので、これを用いて動作確認を行う。
まとめ
今回も前回に引き続きPatch Editorを用いることでインタラクティブなエフェクトを作成した。今回は特にマテリアルの値を制御する方法を紹介した。
