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

2018.08.10

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

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

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

Kudan AR SDK を使い、iOS でマーカー上に画像を表示してみます。

現時点でのサンプルは ytabuchi の GitHub に置いてあります。開発を継続していくので現時点でのスナップショットです。

事前準備

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

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

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

プロジェクト作成

Xcode を起動して、iOS＞Single View App を選択し、Product Name に「kudanar」、Organization Identifierに「com.xlsoft」を入力し、Bundle Identifier が com.xlsoft.kudanar になるようにします。

Kudan AR SDK のインポート

ダウンロードした zip 内の KudanAR.framework を、プロジェクトのルートにドラッグ＆ドロップします。オプションはそのままでプロジェクトにコピーします。

libc++ standard library のインポート

General タブの一番下にある Frameworks, Libraries and Embedded Content セクションの「＋」アイコンをクリックします。

検索欄に「libc++」と入力して、libc++.tbd をインポートします。

以下のように KudanAR.framework と libc++.tbd が表示されていることを確認してください。表示されていない場合は、再度インポートの工程を行ってください。

Kudan AR が LLVM 用の中間コードを保持する仕組み、Bitcode に対応していないため、Build Options で Bitcode を Disable にする必要があります。

プロジェクトの設定で Build Settings で All を選択し、「Bitcode」で検索して見つけるか、Build Options＞Enable Bitcode を探し、「No」に設定してください。

Info.plist の設定

また、カメラを使用しますので、Info.plist にカメラ使用の許可を追加する必要があります。

Info.plist を開き、プロパティリストに Privacy - Camera Usage Description を追加し、適当な文言を追加しておきましょう。今回は「This app will use camera.」と追加しておきました。

Assets に利用する画像を追加

Assets.xcassets を開き、ダウンロードした画像を赤枠にドラッグ＆ドロップして追加します。下の「＋」アイコンからでも構いません。今回は Lego.jpg
と Cow.png のファイル名に変更してから追加しました。

これで準備が整いました。プロジェクトの設定は以上です。

App Delegate の編集

では実際にコードを書いていきましょう。

ARAPIkey の追加

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

AppDelegate.swift を開き、import KudanAR を追加します。

didFinishLaunchingWithOptions 内に setAPIKey メソッドでキーを追加します。以下のようになります。

import UIKit
import KudanAR

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        
        // Add APIKey
        ARAPIKey.sharedInstance().setAPIKey("")
        
        return true
    }

    ...略...

}

次に View Controller を設定します。ViewController.swift を開き、同様に import KudanAR を追加し、UIViewController の継承を ARCameraViewController に変更します。次に setupContent の override を追加します。以下のようになります。

import UIKit
import KudanAR

class ViewController: ARCameraViewController {

    override func setupContent() {
        // Setup code goes here
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

Marker を読み込む

やっとマーカーを読み込むことができます。今回マーカーは ARImageTrackable オブジェクトを作成し、画像を読み込ませています。setupContent 内に以下のコードを追加します。（ファイル名を lego.jpg にしています。）

// ARImageTrackable オブジェクトのインスタンス化と初期化
let imageTrackable = ARImageTrackable.init(image: UIImage(named: "lego.jpg"), name: "lego")

// image tracker manager のインスタンスを取得して初期化
let imageTrackerManager = ARImageTrackerManager.getInstance()
imageTrackerManager?.initialise()

// ARImageTrackable を　image tracker manager に追加
imageTrackerManager?.addTrackable(imageTrackable)

ImageNode をセットする

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

// ImageNode を表示させたい画像で初期化
// PNG の場合は拡張子は不要です。
let imageNode = ARImageNode(image: UIImage(named: "cow"))
        
// ARImageTrackable に imageNode を追加
imageTrackable?.world.addChild(imageNode)

表示画像のサイズを調整

マーカー画像のサイズにオブジェクトのサイズを合わせるように scale を設定します。そのまま以下のコードを追加します。

// マーカー画像のサイズに合わせるように、それぞれの幅から拡大率を計算
let scaleRatio = Float(imageTrackable!.width)/Float(imageNode!.texture.width)
        
// 拡大率を ImageNode に適用
imageNode?.scale(byUniform: scaleRatio)

最終的な setupContent は以下のようになります。

override func setupContent() {
    // ARImageTrackable オブジェクトのインスタンス化と初期化
    let imageTrackable = ARImageTrackable.init(image: UIImage(named: "lego.jpg"), name: "lego")

    // image tracker manager のインスタンスを取得して初期化
    let imageTrackerManager = ARImageTrackerManager.getInstance()
    imageTrackerManager?.initialise()

    // ARImageTrackable を　image tracker manager に追加
    imageTrackerManager?.addTrackable(imageTrackable)
    
    // ImageNode を表示させたい画像で初期化
    // PNG の場合は拡張子は不要です。
    let imageNode = ARImageNode(image: UIImage(named: "cow"))
            
    // ARImageTrackable に imageNode を追加
    imageTrackable?.world.addChild(imageNode)
    
    // マーカー画像のサイズに合わせるように、それぞれの幅から拡大率を計算
    let scaleRatio = Float(imageTrackable!.width)/Float(imageNode!.texture.width)
            
    // 拡大率を ImageNode に適用
    imageNode?.scale(byUniform: scaleRatio)
}

デプロイ

お疲れ様でした。これで動作するはずですので、実機にデプロイしてみましょう！

こんな感じで　Permision の確認があった後に Marker 上に Cow.jpg が表示されていれば成功です！

この後は

次は動画や 3D オブジェクトを表示してみましょう。iOS／Android を交互にやっていこうと思うので、次は Android で 3D オブジェクトの表示にチャレンジです。

Kudan AR SDK エントリー一覧

Kudan AR SDK チュートリアル記事まとめ | エクセルソフト ブログ

をご覧ください。

以上です。

タイトルとURLをコピーしました