Spark  AR Studio で猫耳のインスタエフェクトを作ってみた

誰でもインスタのエフェクトが作れちゃうSpark AR Studio というツールを見つけたので、
ちょっと触ってみました！！という記事です。

今回は弊社の猫営業部会長、ふたば会長にご協力頂きまして、
「ヒト社員も猫社員に変身！？エフェクト」を作っていきたいと思います🐈

#Spark ARとは#
Facebook社が提供している機能で、Instagram / Facebook 上で動くARエフェクトの名称です。
無料で公開されているSpark AR Studioを使えば、誰でも自由にエフェクトを作ることができます。

Spark AR Studikoは、Facebookのアカウントさえあれば誰でもすぐ始められます！
↓ダウンロードは以下公式サイトより
[Spark AR 公式サイト](https://sparkar.facebook.com/ar-studio/ "SparkAR.facebook")

#Spark AR Studioで猫耳エフェクトを作ってみる#
##猫耳素材の準備##
弊社のふたば会長のお写真を用意し、Photoshopでお耳を切り抜きました。
（会長、お耳お借りします…）

画像の切り抜きは、こちらを参考にさせていただきました！
→ [ipad版 photoshopを使用して、ネコチャンの画像を切り抜く](https://qiita.com/iwa_se/items/572529f5db823835d9bf "ipad版 photoshopを使用して、ネコチャンの画像を切り抜く")
![ふたば会長のお耳.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325902/eea6f2ca-034c-8f29-0ab2-95c5a2fba14f.png)

##編集画面##
ダウンロード後、Facebookにログインが完了すると、以下のような画面になります。
今回は「Create New」の「Blank Project」から作っていきます！
![スクリーンショット 2021-12-14 13.40.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325902/a4ff2b23-80cf-32ae-a84a-418ff83d5f8c.png)
「Blank Project」を開くと、次のような編集画面になります。
中央やや右上に表示されているウィンドウは、エフェクトを使用した時の実際の見え方が表示されています。
デフォルトはiPhone8ですが、設定で端末を変更することもできます
![スクリーンショット 2021-12-14 13.41.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325902/76493814-ddc7-7e1d-8e61-e78d308f5e40.png)

##猫耳エフェクトの作成##
###①Face Tracker、Insertの追加###
左の「Scene」タブの右下の＋ボタン「Add Object」をクリック、
「Face Tracker」を選択し「Insert」を押してください。
![スクリーンショット 2021-12-24 15.08.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325902/5763933b-5ee0-1b1a-f84c-8093c37df713.png)
また、同様の手順で「Plane」も追加します。
ただし、「Plane」は「Face Tracker」の配下において下さい。
![スクリーンショット 2021-12-24 15.08.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325902/48958db1-48cf-0d3d-0cb0-a95a811ca18a.png)


###②Materialの追加###
左の「Assets」の右下の＋ボタン「Add Assets」をクリック、Materialを追加します。
![スクリーンショット 2021-12-24 15.09.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325902/80d9db9b-2d85-8dc6-89c2-16d6e367c8a2.png)
また、ここで切り抜いたふたば会長のお耳.jpgも追加します。
同様に＋ボタン「Add Assets」から「Import」「From Computer...」をクリックし、
素材を追加しましょう！
![スクリーンショット 2021-12-24 15.09.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325902/c013bef9-7258-2e33-a40f-3f3971bf3b9a.png)

###③Materialに素材画像を反映###
追加した「material0」を選択、
「Shader Properties」タブの「texture」→「追加した素材画像」を選択しましょう！
![スクリーンショット 2021-12-24 15.10.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325902/a730e9af-bcf6-5bdd-7b4c-448af4181fab.png)

###④material0にをPlaneに反映###
Materialに素材画像が入ったら、
左の「Plane」を選択して、右の「Materials」から「material0」を選択して下さい。
![スクリーンショット 2021-12-24 15.11.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325902/1d989e45-a523-6938-9c77-f3ad4bb54d9a.png)
すると、やっと「ふたば会長のお耳.jpg」が画面に現れました！👏
![スクリーンショット 2021-12-24 15.11.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325902/785c85d5-5829-403d-1806-56945e00a99b.png)
あとは右にある「Transformations」から位置を調節して完成です！やった〜！！
![スクリーンショット 2021-12-24 15.13.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325902/da9b262d-cc8a-9f07-d95d-667291c3fd0c.png)

完成したものがこちら
↓↓かわいい〜〜！！！！
![ふたば会長お耳エフェクト.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2325902/caad2932-3591-fe34-2d4b-04102aa5cd33.gif)



#最後に#
いかがでしたでしょうか！切り抜いた素材さえあれば簡単に作れちゃうので、
ぜひ一度やってみて下さい！
でも横向くとお耳がペラペラになっちゃうので、いつかは3Dverも挑戦したいです！
ここまで読んで頂きありがとうございました〜！！🐈