見出し画像

パッチエディタ:タッチジェスチャの追加


今回は、タッチジェスチャーの使用方法

➀パッチエディタを開く
➁スクリーンピンチパッチの使用
③スクリーンロングプレスパッチの使用<画面長押し>

この三つを使えるようになる。
このチュートリアルでは、パッチエディターを使用して、タップやスワイプなど、デバイスの画面操作に連動するエフェクトを作成します。

サンプルコンテンツをダウンロードしてフォローしてください。
このチュートリアルを完了するとできるようになるのがこちら

画面をつまむとピエロの鼻が大きくなる。
画面を長押しで、花吹雪が降ってくる。

まずは、鼻に使用する3DモデルをARライブラリーから取り込みます。


画像1

➀ARライブラリーを選択
➁3D Object
③3Dshapes
④Hires Sphere Primitiveを選択→import freeでasset内に取り込む

画像2


この3Dモデルを鼻の位置に配置する。
➀face trackerをシーンを配置
➁Hires Sphere Primitiveをassetからシーンのface tracker内に配置

画像3

HiresSphereの左側の小さい三角を押すと3Dアセットが表示される。

画像4

facetracker内にドラッグ&ドロップする。

画像5

画像6


タッチジェスチャーはここから

materialの色は赤い変更
パッチの操作


パッチの操作を開始するには、パッチエディタを開きます。

➀[表示]をクリックします。
➁[パッチエディタの表示/非表示]を選択します。

スクリーンピンチパッチの使用
まず、鼻のサイズを変更する機能を追加します。これを行うには、スクリーンピンチパッチを使用しますが、選択できるインタラクションパッチにはさまざまな種類があります。

デバイス画面での挟み込み動作を検出するパッチを追加することから始めます。

パッチエディタの任意の場所を右クリックします。
メニューからscreen pinch パッチを選択します。
[add patch]をクリックします。
パッチエディタに新しいパッチが表示されます。

画像7

画像8


左:入力ポート

右:出力ポート
画面のピンチパッチは4つのポートがあります。このインタラクションを使用してピエロの鼻のサイズを制御するためには、Scale出力ポートを使用します。

ピエロの鼻のすべてのスケール座標を一度に制御するには、画面のピンチジェスチャを実行して1つのポイントに変換する必要があります。これを行うには、パックパッチを使用できます。
パッチエディタをダブルクリックします。
パックパッチを挿入します。

スクリーンショット 2021-01-11 174039


次に、スクリーンピンチパッチのscaleポートをパックパッチの3つの入力ポートのそれぞれに接続します。

画像10


これで、画面のピンチジェスチャ(つまむ動作)が1つのポイントに変換されたので、ピエロの鼻自体のスケールを表すパッチに接続できます。

シーンパネルに移動し、HiresSphereを選択します。
インスペクターでScaleプロパティを見つけます。
Scaleの横にある小さな矢印をクリックします。

画像11


ポイントパッチの出力ポートを、作成したパッチの3Dスケール入力に接続します。

画像12

これで完成
画面をつまむと、鼻のスケールが変更可能です。
SparkAR playerを使用するか、ビューポートの右上にある三本線を押したら、Simulate Touchを選択、ビューポート上でAltを押しながら右クリックするとピンチの効果を試すことができる。

画像13


Screen Tap and Holdの使用

スクリーンを長押しすると、鼻が飛び出る効果を付ける。

Screen Tap and Holdパッチを使用してこれを変更しましょう。

最初にパッチを作成します。

パッチエディタの任意の場所を右クリックします。
Screen Tap and Holdパッチを見つけて、挿入します。
このパッチには3つのポートがあります。

Screen Tap and Holdパッチの出力はブールデータ型を出力します。つまり、任意の時点でtrueまたはfalseのいずれかです。このパッチでは、長押しジェスチャが検出されたか、検出されなかったかを意味します。

長押しが検出されたときに何をするかの指示を出すために、パッチエディタのメニューを使用して、If ThenElseパッチを挿入します。
Screen Tap and HoldパッチのStateポートをIfThenElseパッチのConditionポートに接続します。
If ThenElseパッチのThenポートの横にある0の値を1に変更します。これにより、鼻の動きをスタートさせるのにタッチが必要な時間が設定されます。

画像14

次に、transitionパッチを出して

start  x:0  y:0  z:0
End   x:0  y:0  z:0.1に変更
If ThenElseの出力ポートをHiresSphereScaleのpositionの矢印をクリックしてパッチを生成しTransitionの出力ポートをつなぐ。

スクリーンショット 2021-01-11 181319


画面を長押しすると、鼻がとびだす。

スクリーンショット 2021-01-11 181628


この記事が気に入ったらサポートをしてみませんか?