見出し画像

Adobe XDデータをAeroでAR化

by｜Yuhei Sasaki

私は毎年XDUFの企画「XD challenge」に挑戦しています。今年のテーマは「旅」です。
昨年、犬が家族に加わったため一緒に出かけているのですが、愛犬を可愛く写真におさめたい欲も出てきました。
そこで、犬の撮影スポットがわかるAPPというテイでAdobe XDで作ったパーツをAR化してみました。
※全行程、勘でやってます

作業工程は以下の通りです。

Adobe XDでプロトタイプを作る

今回、Adobe Aeroの挙動がわからなかったので「これはできるだろ」程度のものを用意してみました。
（正直、プロトタイプ化するまでもなく想像できるけど…笑）

Adobe XDで作ったプロトタイプ

作成するときは、UIパーツだけを作るのではなく、実際の写真を背景に使うと想像しやすいかもしれません。
また、本当は良くないのかもしれませんが、Adobe Aeroで拡大・縮小できるので遊びであれば大きさを厳密に合わせる必要もなさそう。

立体にしたいパーツをIllustratorで3D化

もしかしたらAdobe Aero側でできたのかもしれませんが、立体的に見せたいパーツはIllustratorを使って3D化しました。
せっかくAR空間に表示されるのであれば、部分的にでも3Dパーツがあった方が完成度が上がると思います。
シェイプはコピペでAdobe XDからIllustratorに移動できます。

Illustratorで3D化

3D化には「3Dとマテリアル」機能を使います。押し出しもAdobe Aeroで調整できるので仮で問題ないと思います。
書き出しは「アセットの書き出し」を利用してOBJデータを書き出します。
※私は後で位置を揃える可能性がありそうだなと思い、念の為回転軸X,Y,Zは0にして書き出しました。

Adobe Aeroでレイアウトしアクションを追加

パーツが完成したらAdobe Aeroでレイアウトとアクションを追加していきます。ちなみにこの作業は、スマホのAeroアプリではなく、デスクトップ版Aero（Beta）が圧倒的に楽です！

Aero（Beta）：謎の視点で画面構成するとエヴァ感が出ますよね

画面左下の「走ってる人」みたいなアイコンを押すとアクションが追加できます。
躓いた点は、設定したアクションの消し方がわからなかったことです。こちらは普通にdeleteキーで消えました。
また、スマホ版で編集した時、どうやってもプレビューで落ちる現象が起こりました。
メモリ不足かと思いましたが、これも直前に編集したアクションが問題だったようで削除して作り直したらいけました。何かしらのバグコマンドに触れたようです笑

撮影

各自自由にどうぞ笑

Adobe XDにレイアウトしてAPPのUIを追加

撮影するデータをMP4（25MB以下）に変換して再度Adobe XD内にレイアウトします。
この時APPっぽいUIをつけておくとそれっぽいです。
ちなみに今回「右下のボタンを押すとどうなるのか？」は、まったく考えてません。

Adobe XDに戻してAPP風の見た目

以上、割と手軽に作れるのでトライしてみてください。

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