この記事は公開から 1 年以上経過しています。

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

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

弊社取り扱いの 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.frameworklibc++.tbd が表示されていることを確認してください。表示されていない場合は、再度インポートの工程を行ってください。

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

プロジェクトの設定で Build SettingsAll を選択し、「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 メソッドでキーを追加します。以下のようになります。

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

Marker を読み込む

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

ImageNode をセットする

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

表示画像のサイズを調整

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

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

デプロイ

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

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

この後は

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

Kudan AR SDK エントリー一覧

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

をご覧ください。

以上です。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする