前回まで

今回のゴール

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

画像を追加します

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

このサイトから白黒の気球画像を取得します。
※利用規約

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

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

アニメーションを付与するNodeを用意します

上記同様にPartsというフォルダーを追加します。
今回のアプリは規模が小さいので、このPartsフォルダにはSpriteやLayerなどを格納していきます。

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

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

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

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

障害物の作成

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

Space Debrisとは

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

今回のゲームはバルーンショット

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

障害物の配置

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

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

気球の当たり判定について

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

CCSpriteにはRotationが付けれなかった

準備は整いました。
いよいよ本題のアニメーションをつけます。
SpriteBuilderを使ってない時はこのように自前でアニメーションを作ってました。
しかし、SpriteBuilderを使ってからはアニメーションやParticle(もう少ししたら紹介します)の作成が格段に楽に作れるようになりました。

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

先ほど設定した内容を赤丸のようにクリアします。
これはCCNodeの中に入れる時に座標位置を調整するのが面倒になるために行ってます。
下記に追加するCCNodeの中に入れれば設定内容は気にしなくても構いません。