RACCOON TECH BLOG

株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。

UnityでARアプリの作り方1/4 環境構築+androidビルドからカメラ表示

こんにちは、Paid開発ユニット werdnaの酒井です。

メインの業務で動かしている感のあるものをあまり触っていなかったため、気分を新たにUnityとGoogle APIを使って簡単なandroidのARアプリを作成した話をしたいと思います。

進めるにあたって、下記技術書を参考にしつつ作成していました。

UnityによるARゲーム開発 ―作りながら学ぶオーグメンテッドリアリティ入門

目的

Hololens2が気になっており、UnityがHololens対応するという話を聞いたので、
カメラ上にオブジェクトや地図を配置し動かすものを作ってみることで発売されて開発するためのイメトレとして実施しています。

今回作成するアプリは、Google APIとandroid端末のセンサー、カメラを用いた経路案内アプリを作成します。
端末上にカメラの映像が表示されており、その映像上に進む方向を指す矢印と経路が書かれた地図が表示されているものを作成します。

言葉だけでは伝わりにくいため、完成したアプリ画面のスクリーンショットと合わせてアプリの説明をしていきます。

・アプリの動作
1. アプリ立ち上げ時に現在の位置情報から右下の地図が読み込まれる
2. 上部の入力欄に行き先を入力すると右下の地図にそこまでの経路が表示される
3. カメラ映像の上部にある灰色の矢印が次の経路に向けて進むべき方向を指す
(画像では正面を向いていますが、端末の向きや交差点に着いたときに次の経路で曲がる場合等、矢印の方向はどんどん変化します。)

環境構築やGoogle APIの設定等で1つの記事にまとめるには長くなってしまったため、4記事に分割して投稿します。
UnityでARアプリの作り方1/4 環境構築+androidビルドからカメラ表示(本記事)
UnityでARアプリの作り方2/4 GPSの緯度経度から地図の表示
UnityでARアプリの作り方3/4 Google Direction APIの経路を地図に表示
UnityでARアプリの作り方4/4 磁気センサーで進行方向オブジェクトを回転

概要

本記事では「Unityから端末のカメラ映像を表示するapkファイルのビルド」を目標とします。
具体的には下記内容を順に説明していきます。

環境構築

利用した端末

インストール(カッコ内は開発時に使っていたバージョン)

どちらも公式サイトからインストール。
基本的にはデフォルトのままNextを押していくだけなのですが、
Unityのインストールで一点、ビルド用のコンポーネントの設定画面(Choose Componentsの画面)がありますので、
[Android Build Support]にチェックを入れてください。
(Unityで使うscriptファイルを書くためにVisual Studioにチェックを入れていますが、ここに関してはお好みで...)

android端末の開発者オプション有効化

利用する端末の設定アプリより[端末情報→バージョン]を複数回タップ。
一度設定すると文言が変わってしまうため少し違う表記になっていますが、下記のような表示が出ます。


赤枠内を複数回タップすると下部に文言がポップアップされる。

これにより開発者モードの利用が可能になるので、[設定アプリ→その他の設定→開発者オプション]よりUSBデバッグを有効にしてPCにUSB接続しておきます。
USB接続によりUnityよりビルド後、即時に確認をすることが可能になります。
(USBデバッグを実施せず、ビルドした.apkファイルを端末に送りインストールすることでも確認は可能です。)

apkファイルとしてビルド

インストールしたUnity.exeを開いてプロジェクトを作成します。
ビルドするまでの手順は下記の通りです。
1. AndroidSDKの読み込み
2. Platformの設定
3. アプリ名(端末上で見れるアプリ名)の設定
4. ビルド

AndroidSDKの読み込み

画面上部のEdit→Preference→External ToolsのAndroid→SDKにandroid studioと一緒にインストールされたAndroidSDK配置フォルダを設定します。
(デフォルトだと %USERPROFILE%\AppData\Local\Android\Sdk にインストールされています。)

Platformの設定

利用する端末が何かを設定してあげます。
今回はAndroidになるので、画面上部のFile→Build Settingsで開いたウィンドウよりPlatform→Androidを選択しSwitch Platformを押せば完了です。

パッケージ名の設定

アプリの名前はPlatformの設定で開いたBuild Settings左下のPlayer Settingsより可能です。
PlayerSettings上部のCompany NameとProduct Nameを更新(Product Nameがそのままアプリ名になります。)
PlayerSettings中段あたりにあるOtherSettings→Indentification→Package Nameを com.{Company Name}.{Product Name}で更新(Package Nameがデフォルトのままだとビルド時にエラーになります)

Build Settingsの赤枠をクリックし、開いたProject Settingsの赤枠内を書き換えてください。

ビルド

ここまでの設定によりandroid端末へのビルドが可能になっていますので、メニューのFile→Build Settingsからシーンの読み込みとしてAdd Open Scenesをクリック後、Build And Runをクリックするとビルドが始まります。

USBデバッグをONにして端末を接続していれば、ビルドされたapkファイルをインストール→起動まで実行してくれます。
(USB接続しない場合には、Buildを実行後、作成されたapkファイルを端末に送りインストールを実施してください。)

何もオブジェクトを置いていないのでデフォルト背景のskyboxだけが写っていますが、これで環境構築は一通り完了です。

カメラの画像表示

環境構築が終わったので、早速アプリ制作に取り掛かります。
今回作るものについて
「android端末のカメラとGPSを活用して、Google Maps Static APIより地図表示・Google Directions APIで経路を取得するアプリケーションの作成」
と記載しましたが、下記の順に実装を進めていきます。
1. カメラからの映像を取得
2. GPSの情報を取得
3. Maps Static APIの実行
4. Directions APIの実行
(本記事ではカメラからの映像を取得まで記載し残りは以後の記事で説明していきます)

カメラからの映像を取得

Unityでデータの取得や表示を行うときには大まかに下記のような手順で実装するようです。
1. オブジェクトを作成(Plane, canvas等)
2. データの取得や反映を実行するスクリプトファイルをオブジェクトに紐づけ

オブジェクトの作成

早速表示するためのオブジェクトを作成していきます。
Hierarchyウィンドウを右クリック or 左上にある「Create」をクリックして[3D Object→Plane]を作成してください。

画面上に大きな板が作成されます。
作成したPlaneをクリックすると選択状態になります。
ここに端末のカメラ映像を表示するので、画面右側のInspectorよりRotationを変更してMain Cameraに写るよう回転させ、端末のカメラの解像度に合わせてScaleの値を変更してください
(端末によって変わりますが16:9 or 4:3の比率になるように設定してください。)

次にカメラの画像をCanvasのテクスチャとして設定するためにスクリプトを設定します。
Inspectorより[Add Component→new Script]を開いてBackgroundCameraと名前を付けてCreate and Addを押します。

これでInspector下部に項目が追加され、ウィンドウ下部のProjectウィンドウよりAssets下に同じ名前のcsファイルが作成されています。

このcsファイルに書いた内容でPlaneに対して処理を行うことが出来るようになります。

スクリプトファイルの実装

作成したScriptを見るとvoid Start(), void Update()の2メソッドが定義されています。

using UnityEngine;

public class BackgroundCamera : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {

    }
}

コメントに書かれている通りですが、アプリ起動時に実行されるのがStartメソッド、フレーム毎に(1秒に60回)呼び出されるのがUpdateメソッドです。

ここでやりたい内容としては「背景のキャンバスにカメラの映像をテクスチャとして反映する」という処理を書きたいので、
下記のようにStartメソッドに追記してみましょう。

using UnityEngine;

public class BackgroundCamera : MonoBehaviour{
    WebCamTexture webCamTexture;

    // Start is called before the first frame update
    void Start()
    {
        // 画面の向きを固定(端末の向きに応じて回転させない設定)
        Screen.orientation = ScreenOrientation.Portrait;
        // 端末のカメラを読み込み
        WebCamDevice[] devices = WebCamTexture.devices;
        // テクスチャとして背面カメラを設定(devices[0]で背面、devices[1]で前面)
        WebCamTexture webCamTexture = new WebCamTexture(devices[0].name);
        // このScriptを付与したオブジェクトにテクスチャを反映
        GetComponent<Renderer>().material.mainTexture = webCamTexture;
        // カメラを起動
        webCamTexture.Play();
    }

    // Update is called once per frame
    void Update()
    {

    }
}

Scriptに追記して保存したら、さっそくビルドしてandroidで起動してみましょう。
画面にカメラに写っている景色が表示されることが確認できると思います。

ひとまずアプリっぽく動き始めたところですが、一旦記事を切ります。
インストールから起動まで自分なりにハマったところをまとめたような記事になりました。
環境構築から初回のビルドまでというのが個人的な開発で一番時間をかけてしまう部分かと思いますが、読みながら進めてもらえればサクッと進められるのではないかと思います。

次の記事では早速APIを利用して地図の表示を行います。
UnityでARアプリの作り方2/4 GPSの緯度経度から地図の表示

一緒にラクーンのサービスを作りませんか? 採用情報を詳しく見る

関連記事

運営会社:株式会社ラクーンホールディングス(c)2000 RACCOON HOLDINGS, Inc