Kudan AR SDK で AR iOS アプリを作ってみよう〜オブジェクトをピンチで拡大縮小する

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

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

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

前回までで、iOS／Android のマーカー、マーカーレスでオブジェクトを表示するところまでをやりました。Kudan AR SDK チュートリアル記事まとめで、まとめていますのでご覧ください。

だいぶ時間が空いてしまいましたが、今回はマーカー上に表示したオブジェクトをピンチで拡大縮小してみます。

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

作業の流れ
ViewController の編集
1. 表示されている Node で処理を分ける
2. pinchNode メソッドの編集
この後は
Kudan AR SDK エントリー一覧
参考サイト

作業の流れ

Kudan の世界を表現する ARCameraViewController に含まれる cameraView に UIPinchGestureRecognizer を関連付けて、その値を各種ノードの scale に渡しています。

ViewController の編集

MarkerViewController.swift を編集していきます。

PinchGestureRecognizer を追加するには、以下のコードを用います。

まずは setupContent 内でジェスチャーを生成し、cameraView に関連付けます。

override func setupContent() {
    // ...略...

    // ジェスチャーの生成と cameraView へのアタッチ
    let pinchGestureRecognizer = UIPinchGestureRecognizer(target: self, action: #selector(pinchNode(sender:)))
    self.cameraView.addGestureRecognizer(pinchGestureRecognizer)
}

色々なサイトでやり方を探しましたが、action に #selector でメソッドを渡すのが今の書き方のようでした。

これで、pinchNode のメソッドに UIPinchGestureRecognizer のイベントが飛んできますので、sender の scale を各ノードの scale メソッドに渡せば、各ノードがスケールします。

表示されている Node で処理を分ける

まずは表示されている Node を判別したいので enum で管理します。

// 表示されている Node
enum node {
    case Image, Model, Video, AlphaVideo
}
var shownNode: node?

各ノードを表示するボタンに shownNode = node.XXX を入れます。以下は ImageNode の例です。

@IBAction func imageButton_TouchUpInside(_ sender: Any) {
    clearAllNodes()
    shownNode = node.Image
    imageTrackable?.world.children[0].visible = true
    secondImageTrackable?.world.children[0].visible = true
}

クリアボタンにも shownNode = nil を追加しておきます。

pinchNode メソッドの編集

次に UIPinchGestureRecognizer を拾って各ノードをスケールさせましょう。以下のようになりました。

// ピンチにより表示ノードのスケールを変更
@objc func pinchNode(sender: UIPinchGestureRecognizer) {
    var scaleFactor = sender.scale
    
    if (sender.state == UIGestureRecognizer.State.began) {
        lastScale = 1
    }
    
    if let scale = lastScale {
        scaleFactor = 1 - (scale - scaleFactor)
        lastScale = sender.scale
        
        print("Last Scale: \(sender.scale), ScaleFactor: \(scaleFactor)")
        
        // 各 Node により処理
        switch shownNode {
        case .Image:
            self.imageNode?.scale(byUniform: Float(scaleFactor))
        case .Model:
            self.modelNode?.scale(byUniform: Float(scaleFactor))
        case .Video:
            self.videoNode?.scale(byUniform: Float(scaleFactor))
        case .AlphaVideo:
            self.alphaVideoNode?.scale(byUniform: Float(scaleFactor))
        default:
            NSLog("Pinched: \(sender.scale)")
        }
    }
}

最終的にはこんな感じ（Github）になっています。

この後やる Rotate も実装してありますが、動作イメージは以下です。