ARやってみよう！お絵かき水族館のつくり方
こんにちは。みゃむと申します。
先日TwitterでAdobeのFrescoとAeroを使って簡単なARの作り方を紹介しました。
Adobeの無料アプリFrescoとAeroでお絵かき水族館ARが作れます(*´ｪ`*)
— しぶみゃむイラレのAI(愛)人* (@shibuyamiam) April 10, 2020
おうち遊びにやってみてください。
※音が出ます#StayAtHome #AdobeFresco #adobeaero #AR pic.twitter.com/VIxYY7tU2B
くらげの動かし方などを簡略化してしまったこともあるのでこちらで作り方を詳しく解説します。
特にAeroの使い方を重点的に補足しています。
最後にデータのダウンロードもできるようになっているので、もしよければおうち時間に遊んでみてください。
このARを作るためのアプリ
魚のイラストを描くためにFrescoを使用します
FrescoはiPadとWindows の Microsoft Surface Pro用アプリで、Adobe IDを作れば無料で使用できます（無料版は使えるブラシに制限あり）
イラストを切り抜きできるのであれば別のアプリを使っても構いません。
ARのデザインにはAeroを使います
こちらはiOS専用アプリです。こちらも無料です。
iOS13以上で、iPhone 8Plus以降、iPadおよびiPad mini第5世代以降、
iPad Air第3世代以降、iPad Pro第2世代以降がサポートされていますが、iPhone8でも使うことができました（実機確認済み）
Frescoでお魚の絵を描こう
ではFrescoを立ち上げましょう。
Frescoが使えない環境の方はお使いになるお絵かきツールに置き換えてご覧ください。
最初に新規ドキュメントサイズを選ぶのですが右から2番目の現在の画面サイズで良いでしょう。
ではここにお魚の絵を描いていきましょう。
おすすめはツールパネルの上から2番目にある水彩ブラシですが、もちろんお好きなもので描いてもらって構いません。
このときお魚や泳がせたいものは右側を向くように描いてください。
Aeroで動かすときに右回りにしか動かせないためです。
描き終わったら白い背景レイヤーを消して、右上の書き出しボタンからPNGかPSD形式で書き出してください。
お魚以外にもクラゲやイルカなどもいいですね。
Aeroで現実世界と合成させよう
ここからはAeroでAR化していく作業です。
左下の青い+ボタン（新規作成）をタップ。
すると「空間に対してデバイスをゆっくりとパンします」と出ます。
Aeroに空間を認識させて、オブジェクト（今回はお魚）を置けそうな場所を探してもらう作業です。
床や机の上などに向けてカメラを向けます。
置けそうな場所が見つかったらピンのようなマークが出てくるのでそれをタップします。
このピンのようなものをアンカーと言います。
アンカーが設置できると左下にまた+マークが出るので、タップして先ほどのお魚を選びます。
すると現実世界にお魚の絵が現れます。
お魚の位置や大きさを調整したいときのジェスチャー
1本指でドラッグ…奥行き調節
2本指でつまむ、放す…拡大縮小
3本指でドラッグ…高さの調節
お魚を泳がせて回遊させよう
ではお魚をタップして、下に出てきたメニューから動作をタップ。
まずはお魚を動かす条件を決めます。
これをトリガーと言います。
開始…プレビューモードにすると無条件に発動する
タップ…プレビューモードでタップすると発動する
近接に進入…プレビューモードでオブジェクトに近づくと発動する
今回は開始を選んで、右下にあるチェックマークをタップして確定させます。
次にお魚の動き方を決めます。
今回はお魚に自分を中心に回遊する動きを付けます。
トリガーの隣に現れたアクションの中から旋回を選びます。
デュレーション（動作の持続時間）を7〜10くらいに変更。
イージング（加速減速の仕方）をリニアに。
そして無限ループにチェックを入れてください。
できたら右下のチェックをタップして確定させます。
お魚が正面を向くように設定しよう
先ほど設定した旋回の真下に+ボタンがあるので（小さくて見えにくいですが）それをタップ。
するとアクションを追加で付けられるので照準を選びます。
ここでは設定の変更は特にないので、そのまま確定させてください。
クラゲをふわふわ浮かばせよう
クラゲには別の動きをつけることにしました。
お魚のようにトリガーを開始にして、アクションを移動にします。
Yオフセットを0.3〜0.6くらい、デュレーションを3くらいに設定します。
往復と無限ループにチェックを入れてください。
これで上方向に3秒かけて上がり、3秒かけて戻ってくるのを繰り返すアニメーションが設定できます。
照準も合わせて設定してください。
プレビューモードで確認してお魚を増やす
では画面の左上にあるプレビューモードに切り替えて動きを確認します。
動き方がおかしくなければ、編集モードに戻ってお魚を複製して増やしましょう。
自分の背中側にも増やすのがおすすめです。
照準を設定しているので、複製したときの向きは気にしなくてOKです。
たくさんお魚を増やしたらお絵かき水族館ARの完成です。
このAeroデータはサンプルとして配布しますのでご自由にご覧ください。
分からないことがあればツイッターなどでお気軽にご連絡ください(*´ｪ`*)
この記事が気に入ったらサポートをしてみませんか？