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

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

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

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

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

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

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

作業の流れ

直接 ARImageNode をピンチできれば良いのですが、メソッドがついていないので、擬似的にピンチを表現するために View を配置して、その View に UIPinchGestureRecognizer を関連付けて、その値を ARImageNodescale に渡す。というやり方にしました。

Storyboaard の編集

Storyboard を開き、下のボタンに被らないように UIView を配置し、overlayView の名前で Outlet を作成します。以下はわかりやすように色を付けてありますが、最終的には「Background」は「Clear color」に設定しています。

なお、今回はコードで処理をしたかったので PinchGestureRecognizerStoryboard からは追加していません。

ジェスチャーを拾うため、配置した View の「Interaaction」で User Interaction Enabled にチェックを付けるのを忘れないようにしてください。

Outlet は以下です。

Storyboard の操作は以上です。

ViewController の編集

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

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

まずは viewDidLoad 内でジェスチャーを生成し、作成した overlayView に関連付けます。

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

これで、pinchNode のメソッドに UIPinchGestureRecognizer のイベントが飛んできますので、senderscale を ARImageNodescale メソッドにキャストして渡せば、ImageNode がスケールします。

応用編

上記でスケールはするのですが、ものすごく大きくなったり見えないほど小さくなったりしてしまいます。

また、今回は ARImageNode を操作しているので scaale メソッドに Float の値を渡してあげれば良いですが、ModelNodeVideoNode の場合はそんなメソッドがないかもしれないので、ARImageNode が表示されている場合に処理をするようにしました。

スケールの上限下限を設定する

ARImageNode を追加している addImageNode のメソッド内で、以下の処理で初期の scale を設定しています。

この imageNodeScaleRatio をクラス変数で持ち、その上限下限をその初期値の何倍、何分の一という感じで設定してみました。その値内にあれば PinchGestureRecognizer の処理を受け付ける。と言う感じです。

具体的には以下のメソッドになりました。

imageNode?.scale はそれ以上動かないように ARVector3.init(x, y, z) で固定するようにしています。

表示されている Node で処理を分ける(準備)

表示されている Node を格納する変数を作りました。

画像を表示するボタンに shownNode = node.Image を入れました。

で、先ほどの PinchGestureRecognizeraction を受け取るメソッドで切り分けをしました。現時点では ARImageNode しか操作していないのでその case しか処理していません。

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

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

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

この後は

Pinch ができたので Rotate をやります。

Kudan AR SDK エントリー一覧

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

をご覧ください。

以上です。

参考サイト

大変参考になりました。ありがとうございました!

シェアする

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

フォローする