yoppa.org


Blog

Swift + Playgraoundメモ 1 – SpriteKitでアニメーション

注意: Swiftのソースは全てXcode 6 Beta 6で確認しています。それ以前のバージョンでの動作は確認していません。また今後のXcodeのバージョンで動く保証もありませんので、ご了承ください。

最近は、XcodeのPlaygroundのようなライブコーディング環境が、これからのプログラミングの姿になっていくのではと勝手に期待しているところもあり、少しずつ勉強していきたいと考えているところ。こうやってブログにメモ的に残すことで自分の知識も整理されるかも、ということで、まだまだ試行錯誤中なのだけれど、現状でわかってきたところなど書いてみる。

Swiftの基本文法は、現状で一番まとまっているのは、やはり本家Appleの資料みたいだ。

現状は、ここ資料を見つつ、あとはStackoverflowなどでググりながら、いろいろ探っている段階。

まずは、SwiftとPlaygroundで、Processing的なアニメーションをつくってみたいなあと思ってちょっと調べてみると、iOSやOS XのSDKには、SpriteKitというのがあって、これを使っていけばSDKの機能を利用しながら効率的にアニメーションが作れそうな感じ。

とりあえず、やってみた。

まずは、Xcodeで新規にPlaygroundプロジェクトを作成。そこに必要なライブラリをimport。SpriteKitとあわせて、Playground用のライブラリXCPlaygroundも入れておく。

ここにまずビュー(View)というのを生成する必要があるみたい。SpriteKitでは、SKViewというクラスで実装されている。Processingでいうところの size() 的な感じで、幅と高さを指定してSKViewを生成する。

これで、もう画面が生成されている。楽ちんだ!

screenshot_211

ビューを生成したら、ここにシーンを追加してあげる必要があるようだ。シーンはSKSceneで定義する。ここで背景の色なども設定可能。背景を黒にして追加してみる。

screenshot_212

これで背景色黒のシーンが生成できた。いよいよ形を描いてみる。形を追加するにはSKSpriteNodeというクラスで形を定義して、最後にシーンにaddChild()すると良いらしい。ちょっとActionScript3風味。

これで青い四角形が画面中央に配置される。文法もさほど難しくない感じ。

screenshot_213

この形をアニメーションしてみたい。SpriteKitに配置したSKSpriteNodeは、SKActionクラスをつかうとあらかじめ用意された動きを簡単に付加できるようだ。試しに四角をぐるぐる回してみる。

まずは、1秒で1回転させてみる。こんな感じ。

ずっと回転させ続けるには、SKActionのrepeatActionForeverというメソッドをつかうと良いみたい。

これで、永遠にぐるぐる回る青い四角形のアニメーションが完成。まだまだ、手探り状態だけれど、なんとなく雰囲気はつかめてきた。

screenshot_215

(たぶん)つづく…