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

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

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

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

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

前回の iOS のエントリーではマーカーの上に動画を表示させるところまでをやりました。

今回は遂にマーカレスです。

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

作業の流れ

今までは Storyboard の最初の ViewController で作業していたので、ビューを分けたいと思います。

こんな感じですね。

  • Main.Storyboard を書き換え
  • ViewController.swiftMarkerViewController.swift に名前を変更して必要な参照を書き換え。
  • マーカーレスの処理を ArbiViewController.swift に新規に作成する

が作業内容です。Android 同様、ちょっと長いです。

また、今回使用する assets 画像一式は、こちら からダウンロードしてください。

Main.Storyboard を書き換え

初期画面のビューだけでしたので、ボタンでナビゲーション出来るように Storyboard を修正していきます。

右下の Object Library から、「Navigation Controller」をドラッグ&ドロップします。そのままだと右側の UITableView に遷移してしまうので以下を行います。

  • 右側の UITableView を削除します。
  • 新たに「ViewController」をドラッグ&ドロップして追加します。
  • 最初の View の左側に付いている「Storyboard Entry Point」の矢印を Navigation Controller にドラッグ&ドロップします。
  • Navigation Controller から「control」キーを押しながら上記で追加した新たなビューにドラッグ&ドロップして、「root view controller」として設定します。(以下で設定します)
  • ルートのビューのタイトル Navigation Item をクリックして、タイトルを修正します。

以下のような状態になるはずです。

次にルートのビューからマーカーのビューとマーカーレスのビューに遷移するようにボタンを2つ配置して、Segue を貼ります。以下を行います。

  • ルートのビューにボタンを2つ配置して、Constraints を設定しておきます。
  • 新しい「View Controller」を追加します。
  • ルートの2つのボタンから、control キーを押しながらそれぞれのビューにドラッグ&ドロップして Show Segue を繋げます。
  • 遷移先の各ページのタイトル部分には、「Navigation Item」をドラッグ&ドロップして追加しないと、タイトルを追加できないみたいです。

以下のような状態になっていれば OK です。

MarkerViewController.swift に参照を変更

元々あった「ViewController.swift」を MarkerViewController.swift に名前を変更して、ファイル内のクラス名も変更し、

Storyboard の遷移先のページの identity inspector で MarkerViewController に割り当てを変更し直します。

マーカーレスの処理を ArbiViewController.swift に追加

マーカーレスの処理を追加する ViewController、ArbiViewController.swift を作成します。

Swift ファイルを作成してもクラスも import も何も書かれないので、次のコードを追加します。

マーカーレスのビューにボタン「changeTrackingModeButton」を追加して、ArbiViewController に Outlet と Action を追加します。

ARCameraViewController の override で必要になる setupContent() メソッドを追加しておきます。現時点で以下のようになります。ARImageNode のクラス変数もありますので、ご注意ください。

setupContent メソッドから呼び出す 2つのメソッドを追加

表示する TrackingNode を追加する addTrackingNode() メソッドを追加します。次のようなコードを setupContent の下に追加します。

普通に表示すると変な向きになってしまったのでちゃんと見えるように回転させてます。

マーカーレスのトラックを設定する setupArbiTrack() メソッドを追加します。次のようなコードを上記 addTrackingNode() メソッドの下に追加します。

Kudan AR SDK のマーカーレスモードではスマホのジャイロを使用するため、ARGyroPlaceManager のインスタンスを初期化し、後はマーカーモードと同じように targetNodeworldaddChild() すれば OK です。

setupContent() に上記 2つの呼び出しを追加

次に 2つのメソッドを呼び出しましょう。

ボタンの TouchUpInside イベントを追加

最後に、ボタンをクリックする度に、ARArbiTrackisTracking をチェックして startstop を切り替える以下のコードを追加します。

最終的な ArbiViewController クラスは次のようになっているはずです。

ビルドして動かしてみましょう。

こんな感じです!一度配置したら割とピタッと配置されますね。

https://platform.twitter.com/widgets.js

この後は

次はマーカーモードと同じく、マーカーレスで 3D モデルを配置することにチャレンジしてみたいと思います。

Kudan AR SDK エントリー一覧

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

をご覧ください。

以上です。

シェアする

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

フォローする