Cocos2d v3 SpriteBuilderとXCodeで画面遷移する

# 前回まで
* [SpriteBuilderの導入](http://qiita.com/syou007/items/9e6202a88495757dda5f)
* [SpriteBuilderでできたものの確認](http://qiita.com/syou007/items/1cd8b0d2deeb5acd38f1)
* [CocoaPodsのインストール](http://qiita.com/syou007/items/957dd2d9c3ff1b2a7c6d)

これらを行いました。
まだ行ってない方は行ってください。

# 今回のゴール
今回はSpriteBuilderで作成したScene同士の画面遷移を行います。

## 今回作るゲーム
今回はバルーンショットというゲームを作成する予定です。
もともと僕が作っている

![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)
というゲームの続編になります。

これをやっていただければどんなゲームを作ろうとしているか想像がつくかと思います。
# ゲーム画面を作成します。
![1.png](https://qiita-image-store.s3.amazonaws.com/0/79216/8f5196ec-68ac-63cb-416f-7ac35bdd236c.png)

上記の左下にある赤丸の部分の「+」を押してください。
（上部のメニューからでも実行できます。）

「New File...」を選択してください。

![2.png](https://qiita-image-store.s3.amazonaws.com/0/79216/8acffbec-fbb2-04a6-7ea7-d8ca9a8c2718.png)

`GameScene.ccb`というファイル名を入力後に`Scene`を選択して`Create`ボタンを押してください。

# ゲーム画面にコンポーネントを配置します。
![3.png](https://qiita-image-store.s3.amazonaws.com/0/79216/c6db8d5e-8bd4-44aa-6b3d-dda9aa9f0be8.png)
左上の赤丸のマークを押してコンポーネント一覧を表示します。

その後に`Label TTF`をドラッグ＆ドロップして貼り付けてください。
このコンポーネントはテストとして追加するだけなので、どこに貼り付けてもOKです。

# コンポーネントをいじってみよう！
![5.png](https://qiita-image-store.s3.amazonaws.com/0/79216/e657b3dc-169b-7f2e-38a0-00f59ca474c6.png)
配置した`Label TTF`を選択すると右側に設定できる内容が表示されます。
`Label Text`を入力すると表示される内容が変わります。

`Position`のすぐ右にあるセレクトボックスで起点をどこにするかを決める事ができます。
XCodeの場合は左上が起点で変更できませんでしたが、Cocos2dは左下が起点ですが自由に変更できます。
ユニーバーサルアプリを作成する場合は左に配置するものは左側を起点として位置を計算させて、右側に表示するものは右側から計算させて・・・といった事が可能です。

また、ポイントやパーセントなどの選択が可能なので色々いじってみましょう！

# 他言語対応
`Label Text`の左下にある`Localize`のチェックを行うと他言語対応ができるようになります。
チェックした場合は`Label Text`に入力しているものがキーとなって英語や日本語の切り替えをしてくれます。
（個人的にはビジュアル的に管理できる`SpriteBuilder`でローカライズした方が、XCodeでStringファイルをガリガリ書くよりも楽である。）

SpriteBuildeで作成したLocalizeファイルは[SpriteBuilderでできたものの確認](http://qiita.com/syou007/items/1cd8b0d2deeb5acd38f1)で説明した`Published-iOS`フォルダにある`Strings.ccbLang`に書き込まれます。

Localizeファイルは少し癖があり、SpriteBuilderからXCodeにPublishする際に自動的には保存されない。明示的に「Command+S」などをしてからPublishしないと設定が反映されませんでした。

コード内部でLocalizeデータを取得する場合は以下のようにします。
（今回の連載では他言語化については触れませんが、これだけ覚えていれば十分だと思います。）

```
CCBLocalizationManager.sharedManager().localizedStringForKey("Localizeキー")
```

# SpriteBuilderとXCodeの接続を確認する
まずは現在設定されている状況を確認します。

![6.png](https://qiita-image-store.s3.amazonaws.com/0/79216/041c2d39-5b5c-d075-1e3b-9335843fb349.png)

画像の順番通りに選択すると`Custom class`が表示されます。
これがSpriteBuilderで作成した`Scene`とSwiftのクラスを結びつけてます。
[SpriteBuilderでできたものの確認](http://qiita.com/syou007/items/1cd8b0d2deeb5acd38f1)で説明した`MainScene.swift`はここで繋がっていたのです。

余談ですが。初回起動をするSceneはAppDelegate.mに以下のように定義されています。

```lang:AppDelegate.m
- (CCScene*) startScene
{
    return [CCBReader loadAsScene:@"MainScene"];
}
```

# GameSceneを呼び出す。
GameSceneを呼び出すためのボタンを配置します。
![7.png](https://qiita-image-store.s3.amazonaws.com/0/79216/2445cdef-a398-558b-d0eb-9653cbcf0500.png)
※僕はopacityなどを変更して、半透明なボタンにして配置しました。

次にXCodeに通知する`Selector`を設定します。

![9.png](https://qiita-image-store.s3.amazonaws.com/0/79216/c72f2b4a-c05c-de20-c104-771896924357.png)

`１`のエリアには現在配置されているコンポーネントが表示されてます。ドラッグする事で上下を変更できて、下に配置すると最前面になります。
また、左右のインデントはAddChildされている状況を示してます。
この辺りに関してはxibやストーリーボードとあまり変わらないかと思います。

ここの`CCButton`を選択して`２`のエリアにある`Selector`へ**_tapGameStart**を設定してください。
これでSpriteBuilderの設定は終わりです。

全てを保存してXCodeへPublishしてください。

## あれ？GameSceneの`custom class`は設定しないの？
そう思った方は勘がいいです。
この先では設定する内容ですが、今回はSwitfと連携していなくても画面やコンポーネントを呼び出せる事を説明するために敢えて`custom class`を設定してません。

今後ゲーム開発を進めていくに従って、部品は欲しいけどSwiftのコードを書く必要が無いコンポーネントが出てきます。
その場合に`custom class`を書かなくても呼び出せるという事を覚えておいてください。

もし、設定した場合はSwiftのクラスも生成しないとエラーで落ちてしまいますので注意してください。

# SwiftのMainScene
MainScene.swiftに以下のコードを追加してXCodeを実行してください。
（cleanをする必要はありません。）

```MainScene.swift
    func _tapGameStart() {
        var scene = CCBReader.loadAsScene("GameScene")
        CCDirector.sharedDirector().replaceScene(scene, withTransition: CCTransition(fadeWithDuration: 0.7))
    }
```

配置したボタンをタップするとGameSceneへ遷移ができたと思います。
これで今回のゴール達成です。

## 画面遷移のパターン
`CCTransition`には様々な種類があります。
こちらを変更する事でエフェクトを変える事ができるので、興味のある方は行ってみてください。

なお、不思議なのですが`Cocos2d v2`の方がTransitionの種類が多かったようなのです。僕自身はCocos2d v2は触って無いのですが文献をみるとv2の方が多い気が・・・

工夫次第ではこの画面遷移のエフェクトは自分でカスタマイズする事もできるので、興味のある方は色々試してみてください。（僕はCCNodeを重ねたりして、RunActionを駆使して画面遷移のアニメーションを作ったりしてました。CCTransitionを作るほどのスキルは・・・）

# 余談
前にも書いた通り、Cocos2d(Cocos2d-xも同様)は`OpenGL ES`の操作をしやすくしてくれている優れたツールです。
これらの事が一瞬でできますが、もし自分で`OpenGL ES`を直接操作する場合はボタンひとつ表示するためにもアタフタするでしょう。

というか、僕は相当苦戦しました。
ただ、その代わり裏側で行っていることがわかるため様々なことに感銘を受けます。
例えば、スプライトシートの読み込みの簡易さ。
バッチノードの素晴らしさ。
そして、Cocos2dからバッチノードすらなくても最適化してくれる素晴らしさ。

興味のある方は`OpenGL ES`を学んでみてください。
そして僕に教えてください。

# 僕が作ったゲームの紹介。

## OpenGL ESで作ったゲーム

* [FlickShooting](https://itunes.apple.com/jp/app/id489489178)・・・僕の処女作です。
* [FlickRPG](https://itunes.apple.com/jp/app/id568730700)・・・僕が作った超大作（笑）です。
* [FlickRGP2](https://itunes.apple.com/jp/app/id701170359)・・・DLLが一番多いゲームです。

## Cocos2d v3で作ったゲーム(SpriteBuilderは使って無い)

* [進撃の魔城](https://itunes.apple.com/jp/app/id939621719)・・・今までのゲームとは違いバグが無いです。（クラッシュが送られてきたことが無いです。）

## SpriteBuilderで作ったゲーム

* [Space Debris](https://itunes.apple.com/jp/app/id995207358)・・・この連載で説明しているものとほぼ同じものです。

# 次回
次回はいよいよアニメーションを、、、する前に配置したコンポーネントをSwiftで扱う方法を説明します。
[SpriteBuilderとSwiftのコンポーネント接続、様々なアニメーションについて](http://qiita.com/syou007/items/1c1a2b450cc93098495c)