AR Journey 07: ポスターをAR化する!
どうもー🌞👋
昨日に続き今日も暑かったー🌞
今回は、昨年社会人になって初めて作ったARエフェクトを紹介しようと思いまふ。
そこで大学時代の課題などで作ったグラフィックの作品をARに取り入れてみようってなって、観光を考えるをテーマにしたフランスのポスターをAR化してみた!🇫🇷
ただコラージュの素材を集めて静止画で終わらせず、それぞれにアニメーションをつけた。
初めてARを作った時に、習得したことを共有してくよ!
オブジェクトの素材作成
Photoshopで正方形 (1024 x 1024 px) のドキュメントを作ります。
Spark AR上ではプレーンオブジェクト (2D) が正方形になっており、スケールを調整しやくするためだからです。
ファイル ▶︎ 書き出し ▶︎ PNGとしてクイック書き出し にすると画像をSpark ARに入れた時にうまく読み込まれるのよ。
アニメーション
インスペクターパネルの一番右上のアイコンをクリックして、Animateを選択するとアニメーションの種類の項目が出てきます。Xは左右、Yは上下、Zは奥行き。
Spin: 回転
Float: 上下浮かす
Blink: 点滅
Pulse: 拡大縮小
これをすると、自動的にパッチを簡単に入れ込めるのさ。
左上の字を回転させる。
バラバラに動かす
複数のオブジェクトのアニメーションはほぼ同時に動くようになっている。でもバラバラにしたい!時に、Loop Animationの前に3つのパッチを追加して繋げていくよ。Runtime ▶︎ Value ▶︎ Greater Than
Greater Than: バラバラにしたいオブジェクトの数でそれぞれ繋げて、秒数を入力する。
カメラテクスチャーを作成する
コラージュ全体がビルがたくさん並んでるところでもみやすいように背景色を追加しました。
Canvasを追加し、それに Rectangle を追加して Canvasの中に入れます。画面全体に合わせるため、WidthとHeightをFull Width / Full Height にします。
シーンパネルのCameraを選択して、Texture Extraction の Texture に + をクリックすると cameraTexture0 として自動的に追加されます。
BRCOSA: テクスチャーの明るさ、コントラスト、彩度の調整ができるパッチ。(Asset LIbraryからインポート可能)
おまけ: 飛行機を周りに回転させる
ピンクの飛行機をオブジェクト全体の周りを回転させる時、Spinでループアニメーションをつけたけど、飛行機が中心自転して飛び回らなかった!
その時には、Null Object というオブジェクトをグループ化する機能を追加し、その中に飛行機のオブジェクトを入れ込みます。nullObjectを選択して位置を調整しながらスピンさせることをおすすめします!
ちなみにワインボトルとグラスを入れてたんだけど、エフェクトの審査で引っかかって、なぬっ!???ってなったので、カヌレに置き換えました。アルコールが含まれてるエフェクトはダメってことだった。そこでどういうエフェクトを作ったら引っかかるかを簡単にまとめた。
NGコンテンツ:
❌ センシティブ、衝撃的、暴力的な内容 (銃、ナイフ、武器、血 etc.)
❌ 違法な製品、サービス、活動、不適切または危険な内容の宣伝
❌ ドラッグ、アルコール、タバコ、薬品
❌ 成人向け、ヌード、性的な内容
❌ ヘイト、差別偏見、ハラスメントの内容
❌ オンラインギャンブル、リアルマネーを使用するオンラインゲームなどに関わる内容
❌ スパム、誤解を招く、詐欺
❌ ハッシュタグ、URL、QRコード、アドレスなどの個人情報
❌ 知的財産の侵害
以上がソフィアの初のAR作品でした。自分の作ったものが世にでるとやりがいや達成感を感じるものでした。他にもコラージュのAR作品があるので、それも共有できたらと思うのでありんす。