Kudan AR SDK で AR Android アプリを作ってみよう〜マーカー上に画像を表示

こんにちは。エクセルソフトの田淵です。

弊社取り扱いの Kudan AR SDK のエントリーです。

SDK のダウンロードはこちらからお申込みください。SDK を使った開発と、個人開発者のリリースは無料でご利用いただけます。企業の方は有料になりますので、@ytabuchi までご連絡ください。

現時点でのサンプルコードは ytabuchi の Github にアップしてあります。この後もコミット追加していくのでスナップショットです。

事前準備
プロジェクト作成
ARActivity を作る
1. ARAPIkey の追加
2. Permission 設定
Marker を読み込む
ImageNode をセットする
デプロイ
1. Emulator は使えません
この後は
Kudan AR SDK エントリー一覧

事前準備

まずは Kudan AR Framework をダウンロードします。

ダウンロードページで Developer License Key をメモしておいてください。

使用するマーカーやオブジェクトが含まれる Assets.zip は弊社 Web サイトからダウンロードしておいてください。

プロジェクト作成

Empty Activity で Android プロジェクトを作成します。

作成する際に「Package name」を com.xlsoft.kudanar に変更してください。

Kudan AR SDK のインポート

次にプロジェクトにダウンロードした KudanAR.aar をインポートします。

File＞New＞New Module を選択し、

Import .JAR/.AAR Package を選択します。

「File name」でダウンロードした KudanAR.aar を指定します。

そのままインポートされます。

Build.gradle (Modele: KudanAR) が作成されていて、中身が以下のようになっていることを確認してください。

configurations.maybeCreate("default")
artifacts.add("default", file('KudanAR.aar'))

IDE Error が出てインポートできない場合

Android Studio 3.1.1 などの特定のバージョンで aar がインポートできない不具合があるようです。以下を参考にしてください。

Android Studio 3.1.1 – unable to add module (import gradle project) – Stack Overflow

「Gradle Scripts」内の Settings.gradle を開き、以下のように KudanAR の参照を追加します。

include ':app', ':KudanAR'

保存すると表示される通知バーで Sync Now をクリックすると、プロジェクトに「Kudan AR」が読み込まれているはずです。

File＞Project Structure をクリックします。

左の項目から app を選択し、Dependencies をクリックして、左下の「＋」ボタンから「Module dependencies」を選択し、

「Kudan AR」を追加します。次の画像のように追加されていれば OK です。

次に進みましょう。

Android manifest 変更

まずは Permission の設定を追加します。

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />

Activity のエレメントに以下を追加します。

android:configChanges="orientation|screenSize"
android:screenOrientation="fullSensor"

現時点での Android.manifest は以下のようになっています。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="eu.kudan.ar">

    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity"
            android:configChanges="orientation|screenSize"
            android:screenOrientation="fullSensor">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Gradle 設定の変更

app の Gradle 設定（Build.gradle (Module: app)）の android ブロックに以下を追加します。

aaptOptions 
{
   noCompress 'KARMarker'
   noCompress 'armodel'
}

また、dependencies ブロックにプロジェクトから KudanAR が参照できるように以下を追加します。

implementation project(':KudanAR')

現在の Build.gradle の全体は次のようになっています。

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 28
    buildToolsVersion "29.0.2"
    defaultConfig {
        applicationId "com.xlsoft.kudanar"
        minSdkVersion 21
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    aaptOptions
    {
        noCompress 'KARMarker'
        noCompress 'armodel'
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation project(':KudanAR')
}

プロジェクトの設定は以上です。

ARActivity を作る

無事 Kudan AR SDK が読み込めたので、Activity を作っていきます。

ARAPIkey の追加

まずは最初にメモっておいた API Key を追加します。

package com.xlsoft.kudanar

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import eu.kudan.kudan.ARAPIKey

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // setContentView(R.layout.activity_main)

        val key = ARAPIKey.getInstance()
        key.setAPIKey("")
    }
}

変更箇所は次の通りです。

import eu.kudan.kudan.ARAPIKey を追加
val key = ARAPIKey.getInstance() を追加
key.setAPIKey("") を追加
　　　　- ここにコピーしたキーを入れてください。

次に ARActivity の設定です。

import eu.kudan.kudan.ARActivity を追加し、CompatiActivity から ARActivity に継承元を変更します。以下のようになります。

package eu.kudan.ar

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import eu.kudan.kudan.ARAPIKey
import eu.kudan.kudan.ARActivity

class MainActivity : ARActivity() {
    ...
}

続いて ARActivity の Setup メソッドを override します。以下を追加します。

override fun setup() {
    // AR Content to be set up here
}

やっと Marker を読み込む準備ができました！！

が、その前にカメラのランタイムパーミッションを設定しましょう。

Permission 設定

クラスの下に以下の3つのメソッドを追加します。

// Permission のリクエストを OS 標準の requestPermissions メソッドで行う
private fun permissionsRequest(){
    if (ContextCompat.checkSelfPermission(this,
                    Manifest.permission.INTERNET) != PackageManager.PERMISSION_GRANTED || ContextCompat.checkSelfPermission(this,
                    Manifest.permission.WRITE_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED || ContextCompat.checkSelfPermission(this,
                    Manifest.permission.READ_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED || ContextCompat.checkSelfPermission(this,
                    Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) {
        ActivityCompat.requestPermissions(this,
                arrayOf(Manifest.permission.INTERNET, Manifest.permission.WRITE_EXTERNAL_STORAGE, Manifest.permission.READ_EXTERNAL_STORAGE, Manifest.permission.CAMERA), 111)

    }
}

// ダイアログを表示して、本サンプルアプリの設定画面に遷移する
private fun permissionsNotSelected() {
    val builder = AlertDialog.Builder(this)
    builder.setTitle("Permissions required")
    builder.setMessage("Please enable the requested permissions in the app settings in order to use this demo app")
    builder.setPositiveButton("Set permission", DialogInterface.OnClickListener { dialog, id ->
        dialog.cancel()
        val intent = Intent()
        intent.action = Settings.ACTION_APPLICATION_DETAILS_SETTINGS
        intent.data = Uri.parse("package:eu.kudan.ar")
        startActivity(intent)
    })
    val noPermission = builder.create()
    noPermission.show()
}

// requestPermissions　ダイアログの結果を受け、全て許可されていなければ、permissionsNotSelected を呼び出し
override fun onRequestPermissionsResult(requestCode: Int, permissions: Array<String>, grantResults: IntArray) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults)

    when (requestCode) {
        111 -> {
            if (grantResults.isNotEmpty() &&
                    grantResults[0] == PackageManager.PERMISSION_GRANTED &&
                    grantResults[1] == PackageManager.PERMISSION_GRANTED &&
                    grantResults[2] == PackageManager.PERMISSION_GRANTED &&
                    grantResults[3] == PackageManager.PERMISSION_GRANTED) {
                // パーミッションが必要な処理
            } else {
                permissionsNotSelected()
            }
        }
    }
}

その後、onCreate メソッドに permissionRequest() を追加してください。

最終的な onCreate メソッドは以下のようになります。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContentView(R.layout.activity_main)

    val key = ARAPIKey.getInstance()
    key.setAPIKey("")

    permissionsRequest()
}

Marker を読み込む

ダウンロードした Assets.zip を展開して、Android Studio の Assets として読み込む必要があります。まずは 「File＞New＞Folder＞Assets Folder」 から Assets フォルダを作成します。

その際に必ず「Main」に作成してください。

Assets への画像のコピーですが、私は macOS の Finder で画像ファイルをコピーして Android Studio の Assets フォルダーでペーストしました。

画像をマーカーとして利用するには、ARImageTrackable オブジェクトを作成し、画像を読み込ませる必要があります。Setup 内に以下のコードを追加します。（ファイル名を lego.jpg にしています。）

override fun setup() {
    super.setup()

    // Initialise the image trackable and load the image.
    val imageTrackable = ARImageTrackable("lego")
    imageTrackable.loadFromAsset("lego.jpg")

    // Get the single instance of the image tracker.
    val imageTracker = ARImageTracker.getInstance()
    imageTracker.initialise()

    //Add the image trackable to the image tracker.
    imageTracker.addTrackable(imageTrackable)
}

ImageNode をセットする

マーカーの上にオブジェクトを表示する方法はいくつかありますが、今回は画像を表示する ARImageNode を使用します。Setup 内に以下のコードを追加します。

// Initialise the image node with our image
val imageNode = ARImageNode("cow.png")

// Add the image node as a child of the trackable's world
imageTrackable.world.addChild(imageNode)

// imageNode のサイズを Trackable のサイズに合わせる
val textureMaterial = imageNode.material as ARTextureMaterial
val scale = imageTrackable.width / textureMaterial.texture.width
imageNode.scaleByUniform(scale)