この記事でやること
前回の記事で、8th Wallのサンプルプログラムをクローンして、新しいプロジェクトを作成しました。今回はプロジェクトに新たな画像、動画を追加します。
8th Wall プロジェクトの画面説明
まずは最低限知っておきたい画面のボタンの説明です。
①エディター表示ボタン
アップロードされている、ソースコードや画像ファイルの参照画面(上記画像で表示中のモード)に切り替えます。
②ターゲット設定画面ボタン
ターゲットとなる画像を設定する画面に切り替えます。
③Save + Buildボタン
編集した内容を保存し、実行可能な状態にビルドします。
④プレビューボタン
テスト実行用のQRが表示され、動作確認を行います。テスト実行は一時的なもので、開発者自身しか確認できません。
⑤反映ボタン
編集した内容を確定し、公開準備状態にします。確定した内容は版数管理されます。
⑥公開ボタン
ダイアログが開き必要情報を設定したあと、一般公開可能な状態で発行されます。URLをシェアすれば、誰でも確認可能な状態になります。
素材をアップロードする
では作成を進めます。まず、画面左側の[Asetts]の並びにある「+」ボタンを押下します。ポップアップメニューが開きますのでアップロードを選択します。
ここで次の２ファイルをアップロードします。
- BIOカードをアニメーションさせた動画 (Movie01.mp4)
- BIOカード認識時の画像 (thumbnail01.jpg)
正常にアップロードできればファイル名追加されます。ファイル名をクリックすると、画面中央の領域に画像・動画が表示されます。
ターゲットを設定する
次に画面左側の◎印「②ターゲット設定画面ボタン」を押下し、画面を切り替えます。
１．[新規イメージターゲットの作成]-[平面]をクリックします。
２．「平面イメージターゲットのアップロード」のポップアップが開きます。作成しておいた「BIOカードの画像 (biocard01.jpg)」をアップロードし、次へで進みます。
３．読み取り位置の調整を行います。カード幅にトリミングしているため、このままで作成に進みます。
この時、読み取り画像より枠を狭めてしまうと、実行時の動画が実カードとぴったり合わなくなるので注意します。
４．ターゲットのアップロードが完了すると確認画面が表示されます。QRよ読み取り、カメラでの認識をテストすることができます。
ここまででプロジェクトへの素材追加が完了しました。次回はプログラムソースを手直しし、実際に動作させてみます。
(次の記事へ続く)