[V全般]InstagramのARエフェクト付きチェキを作ってみよう！➁
こんにちは。
朱護重工の山口です。
5日目の記事の続きです。前回で下準備は終わったので今日は実際にプロジェクトを触っていきます。
この記事は「Vtuber何でも Advent Calendar 2022」の6日目の記事です。
目次
- プロジェクト作成
プロジェクト作成
プロジェクトを実際に編集していきますが、今回作るものは公式テンプレートを流用するので簡単に作れます。
新規作成
「Create New」→「Create With Tempale」→「3D Animated Card」で新しいプロジェクトを作ります。
テンプレートに沿って編集
テンプレートを起動すると、下のような画面がでます。
画面中央のウィンドウは、お知らせみたいなものなので消して大丈夫です。
画面の設定
編集する前にデバッグ用のウィンドウが表示されていない場合は表示します。
「Cameras」を選択するとPCで利用可能なカメラ一覧がでるので、任意のものを選択します。
画面の中に青い吹き出しがあるので、この指示通りに編集していきます。
マーカー画像の設定
「textures」→「replaceMe」を右クリック→「Replace」を選択します。
選択するとエクスプローラーが表示されるので、マーカーに使用する画像を選択します。
この記事では前回の記事に出てきたチェキを撮影した画像を利用します。
読込みをすると、デバッグ用ウィンドウの中央に読込んだ画像が表示されます。
もうこれでマーカー用画像の設定ができました。実機でこの画像を認識することが可能です。
エフェクト部分の準備
マーカー画像を設定したのでエフェクト部分を作る準備をします。
今回も青い吹き出しが出ているのでその指示に従って作業をします。
「deleateMe」を右クリックしメニューから「Delete」を選択し削除します。
削除すると中央のウィンドウの中からもともと設定されていたエフェクト消えます。
エフェクト作成作業
準備が出来たのでエフェクトを作っていきます。今回出すエフェクトは立ち絵の画像が表示される。というエフェクトです。
「dragHere」を右クリック→「Add Object」→「Plane」を選択します。
選択するとテクスチャが割り当てられていないPlaneが作成されます。
分かりやすいように「plane0」を右クリック→「Rename」から名前を変更します。今回は「Effect_tachie1」にしました。名前はなんでもいいです。
次にEffect_tachie1を選択し、画面右のウィンドウに↓の画面がでるようにします。
「Materials」の＋マークを選択→「Create New Material」を選択します。選択すると新しいマテリアルが作成されます。
material0と書かれているところをダブルクリックすると、Effect_tachie1からmaterial0の設定へと移行します。
「Shader Properties」→「Texture」→「Choose File...」を選択します。
エクスプローラーが起動するので、準備しておいた立ち絵を選択します。
読み込ませると色がぼけたような感じになりますが、「Shader Tyep」を「Flat」に変更すると色が綺麗にでます。これは素材や表現したい内容によって変わるのでお好みで設定してください。
このままだとマーカー画像に埋まっているので、位置やサイズを調整します。
scaleを大きくすると分かりますが、元々のPlane0が正方形なのに対してマテリアルに設定した画像の比率は正方形ではありません。そのため、このようにマテリアルに設定した画像のアスペクト比がおかしくなってしまいます。マテリアルに設定した画像のアスペクトに合わせてscaleを調整してください。
・調整前
・調整後
とりあえず、ここまで設定すればマーカーに設定したチェキを認識すると設定した立ち絵が表示されるエフェクトが完成です。
今日の記事はここまでで、明日の記事で実機での確認方法や配布方法をまとめます。
Discussion