Help us understand the problem. What is going on with this article?

ARKitでつくったAR空間上に置いたSpriteKitのSKNodeをアニメーションで動かす方法

More than 3 years have passed since last update.

この記事では、ARKitとSpriteKitをつかってAR空間に配置したSKNodeをアニメーションで動かす方法を紹介します。

WWDC2017の『Going Beyond 2D with SpriteKit』セッションでは、つぎのようなデモアプリを紹介していました。

IMG_0103.png

ARKitをつかって表示した画面をタップすると、AR空間上に絵文字が置かれます(この絵文字はARAnchorというアンカーで固定されていて、カメラを動かしてもAR空間の同じ位置に表示されます)。

タップで絵文字(SpriteKitのSKLabelNode)を置く処理は、Xcode9のテンプレートで『Augmented Reality App』を選択すると最初から組み込まれているので、この記事では割愛します。

ここからは、AR空間上に置いたSKNode(SKLabelNodeやSKSpriteNode)をアニメーションで動かす方法を紹介します。

アニメーションできなくてハマる

そもそもこの記事を書いた理由は、AR空間に置いたSKNodeをアニメーションで動かそうとしてハマったからです。

上でも書いたとおり、AR空間上に置いたSKNodeはARAnchorというアンカーで固定されていています。そのおかげで、カメラを動かしてもAR空間の同じ位置に表示されます。

しかし、ここにハマりポイントがあります。

SKNodeをSKActionでアニメーションして動かそうとしても、動かないのです。文字通り、アンカーで固定された物体をむりやり動かそうとするかのように、プルプルするだけなのです。

ARKitとARAnchorの役割を考えると、その結果は当然です。しかし、せっかくSpriteKitをつかうのですから、SKActionで動かしたくなります。

というわけで、試行錯誤した結果、つぎのような方法へとたどりつきました。

親を動かせないなら、子どもを動かせばいいじゃない

その方法とは、『子ノードを追加して、子ノードを動かす』というものです。

ARAnchorで固定したSKNode(仮におとうぱんノードとします)は動けません。しかし、おとうぱんノードにaddChildしたSKNode(仮にこぱんノードとします)にはARAnchorがついていないので、自由に動けます。そうです、親の元を離れて自由に羽ばたくことができるのです(おとうぱん、さみしい)。

8の字ダンス.png

この方法の便利な点は、おとうぱんノードというAR空間上の拠点を持っていることです。つまり、こぱんノードは、AR空間上の任意の場所(おとうぱんノードがARAnchorで固定されている場所)にいつでも戻ることができつつも、自由にアニメーションして動くことができるのです。

たとえば、おとうぱんノードを中心にして、こぱんノードが八の字ダンスをすることもできますし、おとうぱんノードからこぱんノードがわらわらとうまれてく徘徊することもできます。

もし、おとうぱんノードが不要なら、ダミーの透明画像をつかったSKNodeにしておけば、こぱんノードだけを登場させることもできます(おとうぱん、せつない)。

削除するときは忘れずに

こんな失敗をする人はいないかもですが、わたしがうっかりやってしまったので、蛇足ですが書いておきます。

こぱんノードをタップして削除するような場合には、親であるおとうぱんノードも削除するのを忘れないようにしないといけません。

しかし、おとうぱんノードをremoveで削除すると、自動的に子ノードであるこぱんノードも削除されてしまいます。ですので、こぱんノードを削除してから、忘れずにおとうぱんノードも削除するようにしましょう。

最後に

NewGame.png

ARKitをつかっておとうぱんとこぱんが活躍するゲームを開発しています。ARKitをつかうことで、いままでとはちがう面白さがうまれてとても楽しいです。

目標は、iOS11と同時リリースです。

この記事が、ARKitで素敵なアプリをつくりだす手助けになれば幸いです。

こちらの記事もご参考までにどうぞ。

WWDC2017のデモアプリみたいに、ARKitとSpriteKitをつかってSKNodeをタップしてみた

toshi586014
小説家でiOS・tvOS・watchOS・macOSアプリ開発者でアプリ開発講師でLINEスタンプ作者で主夫のフリー会社員。 またの名を、お好み焼きを焼けないお好み焼きクリエイター。 公開しているアプリはこちら→https://itunes.apple.com/jp/developer/toshiaki-nakamura/id822485897
http://toshi586014.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away