Kudan AR SDK で AR iOS アプリを作ってみよう〜マーカーを変更する

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

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

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

前回までで、マーカー上に表示したオブジェクトを回転できるようにしました。その他の記事については Kudan AR SDK チュートリアル記事まとめで纏めていますのでご覧ください。

今回はマーカーを選択できるようにしたいと思います。

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

撮った／ライブラリから選択した写真を UIImageView に指定する
MarkerView に UIImage を渡す
完成！
次は
Kudan AR SDK エントリー一覧

撮った／ライブラリから選択した写真を UIImageView に指定する

まずはマーカーとして指定する写真の処理を書きます

こんな感じで今までボタンが二つしかなかったメインの View に UIImage とカメラで写真を撮ったりライブラリから写真を選択するボタンを配置します。

（なぜか ViewController が紐づいていなかったので作成して紐付けし、）配置した各ボタンに Outlet を付けます。

@IBOutlet weak var markerImage: UIImageView!
@IBOutlet weak var takePhotoButton: UIButton!
@IBOutlet weak var cameraRollButton: UIButton!
@IBOutlet weak var resetButton: UIButton!

カメラを起動して写真を撮る、ライブラリから写真を選択する action は次のように記述しました。

【Swift5】iPhoneの画像を読み込み、UIImageViewに表示する - Qiita のコードを参考にさせていただきました！

@IBAction func takePhotoButton_TouchUpInside(_ sender: Any) {
    // カメラが利用可能か？
    if UIImagePickerController.isSourceTypeAvailable(.camera) {
        
        let pickerView = UIImagePickerController()
        // 写真の選択元をカメラにする
        // 「.photoLibrary」にすればライブラリを参照する
        pickerView.sourceType = .camera
        // デリゲート
        pickerView.delegate = self
        // ビューに表示
        self.present(pickerView, animated: true)
    }
}

@IBAction func cameraRollButton_TouchUpInside(_ sender: Any) {
    // カメラロールが利用可能か？
    if UIImagePickerController.isSourceTypeAvailable(.photoLibrary) {
        // 写真を選ぶビュー
        let pickerView = UIImagePickerController()
        // 写真の選択元をカメラロールにする
        // 「.camera」にすればカメラを起動できる
        pickerView.sourceType = .photoLibrary
        // デリゲート
        pickerView.delegate = self
        // ビューに表示
        self.present(pickerView, animated: true)
    }
}

終了時のコールバック didFinishPickingMediaWithInfo を処理する extension も必要のようです。配置した UIImageView の image プロパティに取得した UIImage を指定します。

extension ViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    // 写真を選んだ後に呼ばれる処理
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        // 選択した写真を取得する
        let image = info[.originalImage] as! UIImage
        // ビューに表示する
        markerImage.image = image
        // 写真を選ぶビューを引っ込める
        self.dismiss(animated: true)
    }
}

後は viewDidLoad と resetButton_TouchUpInside で、最初から持っている Lego のアセットを UIImageView に指定する以下のメソッドを呼び出してあげれば OK です。

func presetImage() {
    markerImage.image = UIImage(named: "lego")!
}

これで画像周りは終了です。

MarkerView に UIImage を渡す

次に UIImageView に指定した UIImage を遷移先の MarkerViewController に渡しましょう。

まずは遷移先の MarkerViewController.swift を開き、プロパティを追加します。

var marker :UIImage?

次に Storyboard で MarkerViewController への Segue を貼り、Identifier に「toMarkerView」を指定します。

これで該当の Segue を識別できるようになったので、Segue 実行時に呼ばれる prepare を override します。

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    switch segue.identifier {
    case "toMarkerView":
        // 遷移先の ViewController を取得してプロパティに UIImage を指定する
        let nextVC = segue.destination as! MarkerViewController
        nextVC.marker = markerImage.image!
    default:
        print("No segue selected.")
    }
}

最後に遷移先の MarkerViewController の setupImageTrackable メソッドで、受け取った UIImage をマーカーとして使用するように、以下のように書き換えます。

// imageTrackable = ARImageTrackable.init(image: UIImage(named: "lego.jpg"), name: "legoMarker")
imageTrackable = ARImageTrackable.init(image: marker!, name: "marker")