この記事でやること

前回の記事で、8th Wallのサンプルプログラムをクローンして、新しいプロジェクトを作成しました。今回はプロジェクトに新たな画像、動画を追加します。

8th Wall プロジェクトの画面説明

まずは最低限知っておきたい画面のボタンの説明です。

①エディター表示ボタン

アップロードされている、ソースコードや画像ファイルの参照画面(上記画像で表示中のモード)に切り替えます。

②ターゲット設定画面ボタン

ターゲットとなる画像を設定する画面に切り替えます。

③Save + Buildボタン

編集した内容を保存し、実行可能な状態にビルドします。

④プレビューボタン

テスト実行用のQRが表示され、動作確認を行います。テスト実行は一時的なもので、開発者自身しか確認できません。

⑤反映ボタン

編集した内容を確定し、公開準備状態にします。確定した内容は版数管理されます。

⑥公開ボタン

ダイアログが開き必要情報を設定したあと、一般公開可能な状態で発行されます。URLをシェアすれば、誰でも確認可能な状態になります。

素材をアップロードする

では作成を進めます。まず、画面左側の[Asetts]の並びにある「+」ボタンを押下します。ポップアップメニューが開きますのでアップロードを選択します。

ここで次の２ファイルをアップロードします。

BIOカードをアニメーションさせた動画 (Movie01.mp4)
BIOカード認識時の画像 (thumbnail01.jpg)

正常にアップロードできればファイル名追加されます。ファイル名をクリックすると、画面中央の領域に画像・動画が表示されます。

ターゲットを設定する

次に画面左側の◎印「②ターゲット設定画面ボタン」を押下し、画面を切り替えます。

１．[新規イメージターゲットの作成]-[平面]をクリックします。

２．「平面イメージターゲットのアップロード」のポップアップが開きます。作成しておいた「BIOカードの画像 (biocard01.jpg)」をアップロードし、次へで進みます。

３．読み取り位置の調整を行います。カード幅にトリミングしているため、このままで作成に進みます。
この時、読み取り画像より枠を狭めてしまうと、実行時の動画が実カードとぴったり合わなくなるので注意します。

４．ターゲットのアップロードが完了すると確認画面が表示されます。QRよ読み取り、カメラでの認識をテストすることができます。