この記事でやること
8th Wall で動くBIOカードを作成するための素材を準備します。
画像、動画作成の説明です。
8th Wallでの処理の流れ
BIOカードをカメラで撮影するときの動作を分解すると次のようになります。
- 8th Wallの実行URLにスマホでアクセスする
- カメラの動作権限が求められた場合、許可して続行する
- ブラウザでカメラが起動した状態となる
- カメラで特定の画像を読み取ると、「ターゲット」となる物体が「指定された画像」に差し変わる
- 画面に映った画像をタッチすると「動画」に差し変わる
素材の準備
上記の処理を踏まえ、必要な素材は下記です。
BIOカードの画像 (biocard01.jpg)
カメラでこの画像が写ったら、特定の動作を行う(今回は画像に差し替える)ためのターゲットになります。物理のカードの写真を利用する場合、きれいに動作させるためにカードに合わせて事前にトリミングしておきます。
BIOカードをアニメーションさせた動画 (Movie01.mp4)
BIOカードに書かれた自画像・キャラクターをアニメーションさせます。ネタバラシになりますが、これは特殊なスキルは全く必要なくスマホのアプリできます。
BIOカード認識時の画像 (thumbnail01.jpg)
カメラでターゲットのBIOを写したときに表示させる静止画です。BIOカードそのままの画像でもよいのですが、星やハートマークでも散らしたほうが、処理に動きがでます。
公開ページのサムネイル画像
公開時に指定するための1200px × 630px以上のサイズの画像を用意します。とりあえずペイントツールで上記サイズのキャンバスを作り、BIOカードの画像でも張り付けておくといいです。（手順説明は省略します。）
アニメーションの作成
今回は Mug Life というアプリを利用します。これは顔の画像を自動認識して、しゃべっているかのような動画を作成するアプリです。
ポイントは下記です。
- 基本は無料、自動認識した写真に決まったパターンの表情を適用することができる
- 自動認識しないキャラクターや複雑な表情は有料機能で顔をマッピングする必要がある
- 正面を向いた、人間の画像なら自動認識率が高い(アニメ顔は精度が落ちる)
というわけで、ブライアンローズ氏のBIOカードのように、思いっきり正面の自画像なら、かなりの精度で認識してくれます。
作成の流れ
１．写真をアプリにインポートします(自動認識すれば、この手順だけでOKです)
２．自動認識しない場合は[作成]-[顔の追加]を選択する
３．顔のターゲットマークを近い位置にセットし決定する
４．座標がマッピングされるので適正な位置にセットする
５．表情をつけ、動画(mp4ファイル)に書きだします。
BIOカード認識時の画像の作成
これはとりあえず、元画像にちょっとマークをつけた画像を用意します。
元の画像をペイントで開いて適当に☆をつけて保存しました。
これで素材の準備ができましたので、次は8th Wallでカメラで読み込んだ時の処理を作成していきます。
(次の記事へ続く)