Cocos2d v3 SpriteBuilderでアニメーションを作る

# 前回まで
* [SpriteBuilderの導入](http://qiita.com/syou007/items/9e6202a88495757dda5f)
* [SpriteBuilderでできたものの確認](http://qiita.com/syou007/items/1cd8b0d2deeb5acd38f1)
* [CocoaPodsのインストール](http://qiita.com/syou007/items/957dd2d9c3ff1b2a7c6d)
* [SpriteBuilderとXCodeで画面遷移する](http://qiita.com/syou007/items/9bebb01aff70dec0e3f3)
* [SpriteBuilderとSwiftのコンポーネント接続、様々なアニメーションについて](http://qiita.com/syou007/items/1c1a2b450cc93098495c)

# 今回のゴール
SpriteBuilderで気球が揺れるアニメーションを作ります。
今回はプログラムコードを触ることはありません。

# 画像を追加します
![1.png](https://qiita-image-store.s3.amazonaws.com/0/79216/6e8a8621-d5a0-e054-ceb6-a79565a8451e.png)


この図のように`images`を追加します。

[このサイト](http://illpop.com/png_carhtm/plane_a19.htm)から白黒の気球画像を取得します。
※[利用規約](http://illpop.com/p_site03.htm)

取得した気球の画像を`balloon.png`として保存して先ほど作ったフォルダにドラッグ＆ドロップを行います。

注意）
本当はゲームに合わせて画像サイズを変えるべきだが、今回はチュートリアルなのでそのまま進めます。

![2.png](https://qiita-image-store.s3.amazonaws.com/0/79216/7241adb4-8e3e-53b9-14d5-230498aeef47.png)


# アニメーションを付与するNodeを用意します
上記同様に`Parts`というフォルダーを追加します。
今回のアプリは規模が小さいので、この`Parts`フォルダにはSpriteやLayerなどを格納していきます。

![3.png](https://qiita-image-store.s3.amazonaws.com/0/79216/c72b2bad-8d90-c695-26ba-657daa67c8b8.png)

`Parts`フォルダに新たな`Node`を追加します。
図のように`BalloonNode.ccb`を入力して`Node`を選択して作成してください。

作成した`BalloonNode`に対して上記で追加した`balloon.png`を追加してください。

![4.png](https://qiita-image-store.s3.amazonaws.com/0/79216/4d3d3468-e144-8620-db43-41b4dff5a9dd.png)

追加したら下図のように`Anchor point`を`0.5`と`0.7`に変更してください。

![5.png](https://qiita-image-store.s3.amazonaws.com/0/79216/d1913e90-86c7-3be2-3bda-d910d20dc76c.png)


このアンカーポイントを中心に気球が左右に揺れるアニメーションを作りますので挙動がおかしいなどがあった場合はこの`Anchor point`を変更します。（後述）

# 障害物の作成
今回のゲームは揺れる気球を撃ち落とすゲームを作ってます。
最後にご紹介しますが、本日Apple審査を追加した`Space Debris`というゲームの難易度を上げた（？）ものになります。
作っているゲームのイメージが付くので、良ければゲームを一度やってみてもらえればと思います。

## Space Debrisとは
`Space Debris`は人工衛星同士が衝突して地球に向かってくる場合や地球に近づきすぎた人工衛星をフリックで撃ち落とし地球を守るゲームでした。

## 今回のゲームはバルーンショット
今回はバルーンショット（バルーンファイトと名付けて目を引きたいところだがw。知っている人はあまりいないかもしれないw）というゲームで落ちてくる気球を撃ち落とすゲームを考えている。
しかし、そのまま気球を撃ち落とすだけでは物足りないので障害物を付けて気球に玉を当てにくい状況を作ろうとしています。

## 障害物の配置
![6.png](https://qiita-image-store.s3.amazonaws.com/0/79216/6b54bba4-377d-9c79-db5c-793f0e9f790a.png)


今回の配置は難易度が高いです。
まず、図の`1`のようにCCNodeを追加します。
追加した後に図の`2`のようにballoonの配下に`CCNode`を配置します。
※SpriteBuilderでは所有者をネスト形式で表すことができます。

最後に図の`3`のように`Position`と`Content size`を変更して気球の乗り物部分に合わせます。

## 気球の当たり判定について
![7.png](https://qiita-image-store.s3.amazonaws.com/0/79216/29149130-d9de-a429-f153-3f442befd0ff.png)

上記と同様にCCNodeを配置します。
気球の真ん中あたりに300x300くらいのサイズで配置してください。
`balloon`の配下に配置するのを忘れないようにしましょう！

# CCSpriteにはRotationが付けれなかった
準備は整いました。
いよいよ本題のアニメーションをつけます。
SpriteBuilderを使ってない時は[このように](http://qiita.com/syou007/items/1c1a2b450cc93098495c)自前でアニメーションを作ってました。
しかし、SpriteBuilderを使ってからはアニメーションやParticle(もう少ししたら紹介します)の作成が格段に楽に作れるようになりました。

早速アニメーションを作ろうと思ったのですが、Spriteに対しては`Rotation`が作れませんでした。
(プログラムからは作れるのに・・・何でだろう？)
理由はわかりませんが、CCNodeの中に入れれば`Rotation`はできるので修正します。

![8.png](https://qiita-image-store.s3.amazonaws.com/0/79216/a33f975a-1d11-2551-c645-5adfac631e78.png)
先ほど設定した内容を赤丸のようにクリアします。
これはCCNodeの中に入れる時に座標位置を調整するのが面倒になるために行ってます。
下記に追加するCCNodeの中に入れれば設定内容は気にしなくても構いません。

![9.png](https://qiita-image-store.s3.amazonaws.com/0/79216/605142a6-b7e4-070f-1b09-2b1e25825757.png)
アニメーションをするためのCCNodeを追加して`balloon`と同じサイズにします。
そして、`balloon`を今追加したCCNodeの配下に配置します。
全てが終わると、上記の画面のようになっているはずです。
（説明を随分端折ってますので、わからなければコメントください。）

さて、アニメーションの準備ができました。

# アニメーションをつけます
予定外な事がありましたが、今日の本題にやっとたどり着けました。
やっと気球を動かせる準備が揃いましたので、早速進めていきましょう。

時間間隔を設定する画面を呼び出します。

![10.png](https://qiita-image-store.s3.amazonaws.com/0/79216/d8c3c1d6-65c5-d5be-987e-516e3e5838ea.png)
赤丸の部分をクリック後に「Set Timeline Duration...」を選択してください。

![11.png](https://qiita-image-store.s3.amazonaws.com/0/79216/1863f495-5056-dd7b-002c-a8ed33c603e2.png)
secsを2秒に設定します。(画像の10の部分を2に変更します。）

![12.png](https://qiita-image-store.s3.amazonaws.com/0/79216/8985e5ba-99b5-eb34-9c58-2dcbbcecf0ea.png)
先ほど追加したCCNodeに対して`Rotation`を追加します。

![13.png](https://qiita-image-store.s3.amazonaws.com/0/79216/44a5e814-1aef-e902-1d18-6f53f396665a.png)
こちらの青い線を動かします。
この地点が0.5秒後の状態になります。

![12.png](https://qiita-image-store.s3.amazonaws.com/0/79216/8985e5ba-99b5-eb34-9c58-2dcbbcecf0ea.png)
上記と同様の方法で`Rotation`を追加します。

![14.png](https://qiita-image-store.s3.amazonaws.com/0/79216/636b5fcf-a734-3562-cae2-37d99628b74e.png)
追加した後に、赤丸の中にあるボタン（？）のようなものがあるのでクリックします。
そして、そこの中を`30`に変更します。
気球の画像が傾いたことがわかると思います。

同様に1.5秒後にも`Rotation`を追加して`-30`を設定してください。
最後に2秒後に`Rotation`を追加して`0`を設定してください。

![15.png](https://qiita-image-store.s3.amazonaws.com/0/79216/6a610e2c-2070-3aae-735a-9a8148a00bad.png)
最終的にこのような形になっていればOKです！

# アニメーションさせてみます。
では作ったアニメーションを実行します。

![16.png](https://qiita-image-store.s3.amazonaws.com/0/79216/07006e47-0d3d-2075-03d0-34041c16ab9d.png)
１番目の`繰り返し`にチェックを入れて2番の実行を押してください。
アニメーションされることがわかります。

・・・が、想定している動作とは違いますね。
`Rotation`は`Anchor point`を中心に行われるからになります。

現在アニメーションしているCCNodeを選択して`Anchor point`を適切な値に変更します。

![17.png](https://qiita-image-store.s3.amazonaws.com/0/79216/2f36b824-aae7-3dc4-e2d0-1a54e9124298.png)
図を見ればわかると思いますが、図のように`Anchor point`を(0.5, 0.7)に設定してください。
設定すると気球が左下あたりに移動するので画面をスクロールさせて気球を真ん中にしましょう！
その後アニメーションを行うと気球が揺れているアニメーションが見れると思います。

## 早すぎる？
気球の振り子が早すぎる気もしますね。
後は実際にゲームをしながら気球の揺れを調整していきましょう。
今回はこのままとします。

さて、ここまでの状態を保存しておきましょう！
次回はいよいよiPhoneシミュレーター上に気球を登場させます！

# Anchor pointってなに？
さらっと`Anchor Point`を出しましたが、これはなんでしょうか？
これは各Nodeの基準点を設定できるものです。

例えば、XCodeでUIViewを設置すると左上が起点となります。
これをCocos2dで示す場合は`Anchor Point`を(0, 1)にすると左上が起点になります。

そうです。
Cocoaではこの起点が必ず左上になってましたが、Cocos2dでは起点値を自由に変えれるのです。
※デフォルトである(0, 0)は左下で、Cocoa（左上）とは違いますので座標計算をする時には注意してください。

## CCSpriteの基準点
ゲームではオブジェクト同士の計算が頻繁に発生するので基準点は(0, 0)よりも(0.5, 0.5)の画像の中心の方が計算しやすいケースが多い。
そのためか、CCSpriteの場合は初期値が(0.5, 0.5)になってます。


# Apple申請が通りました！
今作っているゲームは本日(2015/5/28)にアップル申請が通った

![id995207358.png](https://qiita-image-store.s3.amazonaws.com/0/79216/c0a0da78-4bac-2257-9a1d-0594e953ba1e.png)
[Space Debris](https://itunes.apple.com/jp/app/id995207358)
というゲームと同じ感じのゲームになりますので、完成イメージをつける為にも是非DLLしてみてください！

また、このゲームは全てSwiftで作成しています。
Swiftで作成した僕の初めてのゲームになります。
DLLよろしくお願いいたします♪

作成日記はこちら
[7日でiPhoneアプリ(Swift)を作ってみた](http://ameblo.jp/syou007/entry-12032366040.html)

# 次回は
次回は[SpriteBuilderで作ったオブジェクトをシミュレータに表示する](http://qiita.com/syou007/items/7492245b28133df94dd1)です。