見出し画像

勘でやる、Spark AR

今回は、最近にんじんを回して遊んでいるSparkARの使い方をうっすらと説明する。うっすらな理由としては、自分もうっすらとしか分からないからです。

今回はカメラエフェクトを作るところまでです。
公開まわりなどは各自検索してください!


個人的な経験則によると、こういったアプリケーションはある程度勘でなんとかなる(ように作られている気がする)ので、みんなも怖がらずに勘でやってみよう。

最後にお土産としてサンプルファイルを置いておきます。

1.プロジェクトを作る

今回は、上にあるにんじんを回すやつを作る手順を再現します。

スクリーンショット 2020-01-20 03.38.02

今回は「Blank Project」で。

2.オブジェクトを追加する

スクリーンショット 2020-01-20 03.38.28

「Add Object」をクリック

スクリーンショット 2020-01-20 03.38.45

ウインドウが開くので、「Face Tracker」を選択して「Insert」する

スクリーンショット 2020-01-20 03.38.28

再び「Add Object」をクリック 

スクリーンショット 2020-01-20 03.39.16

今度は「Plane」を選択して「Insert」

スクリーンショット 2020-01-20 19.15.18

Planeが二つになりました。分かりにくいので名前を変えときましょう。

スクリーンショット 2020-01-20 19.15.40

「ninjin_bg_0」「ninjin_face_0」にしてみました。

3.素材を追加する

スクリーンショット 2020-01-20 19.16.52

Finderから素材をドラッグアンドドロップ

スクリーンショット 2020-01-20 19.17.25

素材がSpark AR Studioに追加されました。ほぼ完成みたいなもんです。

4.素材を表示させる

スクリーンショット 2020-01-20 19.25.11


スクリーンショット 2020-01-20 19.25.40

「Material0」をクリック

スクリーンショット 2020-01-20 19.25.46

「Texture」横の四角をクリック

スクリーンショット 2020-01-20 19.25.54

「ninjin_bg」を選びます

スクリーンショット 2020-01-20 19.27.01

にんじんの背景がmaterial0につきました

スクリーンショット 2020-01-20 19.27.48

続いて、faceのほうもやっていきます
「ninjin_face_0」の「Material」横のプラスをクリック

スクリーンショット 2020-01-20 19.27.54

「Create New Material」します。

スクリーンショット 2020-01-20 19.28.05

「Material1」の「Texture」を、先ほどと同じように変更します。

スクリーンショット 2020-01-20 19.28.21

顔部分が表示されました。

スクリーンショット 2020-01-20 19.28.36

「ninjin_bg_0」の「Scale」を調整します。

スクリーンショット 2020-01-20 19.28.43

「Scale」をいい感じに調整します。今回は3でした。
ちなみに、faceの方はそのままでもちょうどいい大きさだったので変えてません。

5.フェイストラッキング

スクリーンショット 2020-01-20 19.28.58

「ninjin_bg_0」と「ninjin_face_0」を「Face Tracker0」にドラッグアンドドロップ

スクリーンショット 2020-01-20 19.29.04

「Face Tracker0」の中に入りました。
プレビューのにんじんが顔に張り付いてます。

6.口を開けると回転するようにする

スクリーンショット 2020-01-20 19.29.56

「Face Tracker0」を選択して「Patch」の横にある「Create」をクリック

スクリーンショット 2020-01-20 19.30.02

今回は口を開けたときに回したいので「Mouth Open」をクリック

スクリーンショット 2020-01-20 19.30.12

Patch Editorなるエリアにいろいろ出てきました。

スクリーンショット 2020-01-20 19.30.30

「ninjin_bg_0」を選択して「Action」をクリック

スクリーンショット 2020-01-20 19.30.40

「Spin」を選択します。
暇なときに他のやつも試してみましょう。

スクリーンショット 2020-01-20 19.30.53

Patch Editorに新しいのが出現しました。

スクリーンショット 2020-01-20 19.30.58

「Mouth Open」の右上にある矢印から「Loop Animation」の左上の矢印まで線を伸ばします。

スクリーンショット 2020-01-20 19.31.05

これで口を開くと回転するという動きができました。

スクリーンショット 2020-01-20 19.31.17

「Transition」を調整します

スクリーンショット 2020-01-20 19.31.53

プレビューをみてるとわかるんですが、Y軸の数字が変わっていると違う方向にグルグル回ってしまうのでY軸の数字を0に変更し、X軸の数字を変えます。


6.増やす

スクリーンショット 2020-01-20 19.52.43

頑張って作った「FaceTracker0」をコピーアンドペーストで分身させます。
分身させたら「ninjin_bg_01」とか数字を変えとくと分かりやすいです。
一人分でよければ、この辺はスキップしてください。

スクリーンショット 2020-01-20 19.52.49

「Tracked Face」を「Face2」に変更。これで二人目の顔を認識するトラッカーになりました。3こめは「Face3」にすること。

スクリーンショット 2020-01-20 19.59.17

ここの「index」を1にします。
3こ目を増やしたら、3こ目のやつは「index」を2にしましょう。

スクリーンショット 2020-01-20 20.01.00

繰り返すと回るにんじんが増えます。

スクリーンショット 2020-01-20 03.54.00

この辺いじって周り方をいい感じにする

7.確認してみる

スクリーンショット 2020-01-20 14.49.19

この辺で、自分の顔を使って確認もできる。
スマホで確認したい場合は、スマホにSpark AR Playerをいれること


スクリーンショット 2020-01-20 20.01.25

スマホをPCにつないで、アプリを起動してSendすると使った感じがわかるよ
申請するときに動画が必要なので、これで録画するのがおすすめ

スクリーンショット 2020-01-20 20.01.34

PC上で自分の顔で確認したい場合はこちらからどうぞ

サンプル素材

今回作ったにんじんを回すサンプルはこちら。
今後、にんじんを増やしたりする方法も書くかもしれません。

参考文献

これを見たせいでエフェクトを作り始めてしまった

周りの人がやってるとやりたくなっちゃうよね


頂いたサポートはおもちゃを買うのに使用されます