LoginSignup
11
6

More than 5 years have passed since last update.

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

Posted at

この記事では、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をタップしてみた

11
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
6