#はじめに

昨年の12月25日、UE4でARCoreのAugmented Facesを使用した仮装アプリをリリースしました。

作成するにあたり、結構難しかったので備忘録として手順など残しておきます。
ARCoreが使用できる端末は限られてますが、「こんなのが作れるんだな」といった参考にでもインストールしていただけると嬉しいです

※Androidプロジェクト開発設定の手順は省きます。

#開発環境
windows10
Unreal Engine4.25
ARCoreバージョン1.7
実機(AQUOS sense3 SHV45)

#プロジェクト作成

上記リンクからサンプルプロジェクトをダウンロードし、Unrealのクイックスタートを参考にしてプロジェクトを作成。

#マテリアル作成
Materialsのファイルを開き、あらかじめ用意していたテクスチャをドラッグ&ドロップでインポート。
今回はこれをインポートしました(目があたるであろう部分は透過処理済み)。

インポートしたテクスチャを右クリックすると、マテリアルを作成するアクションが表示されるのでそれを選択。
できたマテリアルをクリックするとこういう画面が表示されるはず。

まずマテリアルのノードを下記画像のようにつなぎ直し、左上の適用をクリック。

ビューポートに表示されているマテリアルがちゃんと透過処理されていることが確認できる。

次に左側に表示されている詳細一覧内のマテリアル欄で一部項目を下記のように変更。
Blend Mode > Translucent
Two Sided > チェック入れる

マテリアルの設定は以上なので適用をクリックしてから保存。

#ブループリント(BP)
HandheldARBPフォルダから今度はBlueprintsフォルダを開く。
右クリック > ブループリントクラス

なんかいっぱいありますが今回はActorを選択して作成。

作成できたらコンポーネントを追加。
コンポーネントを追加 > GoogleARCoreFaceMesh

右側の詳細はARFaceMesh欄だけいじります。
Auto Bind to Local Face Mesh > チェック入れる
Transform Setting > Tracking Only
Face Material > さっき設定したマテリアル

コンパイルしてから保存。

#画面周り
Main画面を作成したいので、コンテンツのところで
右クリック > ユーザーインターフェース > ウィジェットブループリント

できたものを開くとデザイナー画面が最初に表示されるので、右下の矢印を引っ張って縦画面サイズに変更します(今回は縦画面想定なので)。

適当にボタンを画面に配置します。
このとき、右上に表示されている白いお花みたいなマークをボタンの上に配置しておくと、画面の比率を変更したときにアイテムの配置を維持しつつ変更できます。

ボタンの詳細をスクロールしていくと、下のほうにイベントの欄が出てくるので、On Pressedの+をクリック。

グラフに遷移し、先ほどのOn Pressedのイベントが追加されているのが確認できる。

上記のように検索をかけると「クラスからアクタをスポーンします」といったアクションが出てくるので、これをOn Pressedと繋がるように配置する。

Classに自分が作成したアクタをセットし、Return Valueから「変数へ昇格」をクリックすることでアクタのセットができる。
完成形はこんな感じ。

忘れずにコンパイルしてから保存する。

最初の画面に戻り、上部にあるブループリントからレベルブループリントを開く。
下記のようにノードを作成すると起動時にさっき設定したボタンが表示され、Augmented Facesが利用できるようになる。