Cocos2d v3 Particleの設定内容について調べてみた

## 前回まで
* [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でアニメーションを作る](http://qiita.com/syou007/items/bdcd3921a033ed967016)
* [SpriteBuilderで作ったオブジェクトをシミュレータに表示する](http://qiita.com/syou007/items/7492245b28133df94dd1)
* [気球をランダムに生成して降らせる](http://qiita.com/syou007/items/9b7e98afa6afd602f7f7)
* [気球を重ならないように](http://qiita.com/syou007/items/b480c5e82a1658da3ee4)

これらを行いました。

## 今回のゴール
今回は大砲を設置して弾を撃つ・・・・
前に、Particleについて説明します。

弾をParticleにする必要は無いのですが、僕のようにデザインセンスが無い人はParticleを使うと様々なエフェクトが作れるのでとても楽です。
今回の内容はSpriteBuilder以外でも通じる内容だと思います。

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

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

これをやっていただければどんなゲームを作ろうとしているか想像がつくかと思います。

## Particleって？
Particleとは一つの画像を様々な条件のもとに発生させてエフェクトっぽく表示する技術です。
[SpriteBuilderとSwiftのコンポーネント接続、様々なアニメーションについて](http://qiita.com/syou007/items/1c1a2b450cc93098495c)で書いているようにSpriteには様々なエフェクトをつけることができます。
これを一つの画像に大量に発生させて、様々なエフェクトを大量につけていきます。

このようなことを行うと処理速度が心配になりそうですが、心配ありません。
メモリ上にロードする画像は一つであり、その画像情報を描画するための座標計算を行ってから一気にレンダリングを行うので処理落ちはほとんど発生しません。

### SpriteSheetについての余談
画像一つに対して行うので、SpriteSheetに対しては出来ないはずですが・・・SpriteBuilderをみるとできそうな雰囲気を出しているところがちょっと僕の理解を超えてます。
僕のスキルで`OpenGL ES`を書いてた時はSpriteSheetに対して行うのは難しいと感じましたが、、、RGBAのデータ構造をメモリに展開すればできるのでしょうか・・・・？
このような疑問があるため、今回はSpriteSheetに対しては行いません。

また、SpriteSheetについてはこの連載の最後に説明する予定です。
（今回のアプリではほとんど恩恵が無いため、説明のみを行います。）

#### 確認しました。
SpriteSheetに対してできるのはSpriteBuilder上まででした。
実際にXCodeに送って確認したところ、Particleは発生しませんでした。
なので、SpriteSheetに対してはParticleは行わないように！

## 早速作ってみまる
`Parts`フォルダにParticleを作成します。

![1.png](https://qiita-image-store.s3.amazonaws.com/0/79216/653987a9-0714-64c7-3597-49486fa7fed7.png "1.png")
`Particles`を選択して`ShootParticles.ccb`を作成します。
作成したものを見てみましょう。
これが一つのファイルからできていると思えますか！？
Particleはこのように素晴らしいエフェクトを一つのファイルと設定項目だけで作成することができます。

![2.png](https://qiita-image-store.s3.amazonaws.com/0/79216/9edc0f6f-d622-3a94-f2ad-c9e44d92b7c0.png "2.png")
このように、SpriteBuilderではサンプルが付いてるので初めて作る場合でも悩まずに作成することができます。
画面のように`CCParticleSystem`を選択した状態で、右上のアイコンをタップしてください。
そして、幾つか表示されるサンプルを選択してみてください。

画面に表示されるParticleが変わったことがわかると思います。

設定項目を見ていきます。
例によって、僕は直感で触っているため多々わからないところがあります。
また、間違っているところもあるかもしれませんので、おかしいと思う箇所がある場合はコメントで教えていただけると幸いです。

![3.png](https://qiita-image-store.s3.amazonaws.com/0/79216/85afbd47-7761-f5d9-0cc8-201df815f491.png "3.png")

### 基本設定

#### Start Particles/Stop Prticles
SpriteBuilder上でシミュレーションを開始、停止ができます。
設定値は変更すれば即座に反映されますが、なんらかの理由で反映されない場合は前のParticleが残ってしまいエフェクトがわからなくなった場合に使います。

#### mode
`Gravity mode`しか使ったことがありません・・・。
`Radius mode`は半径とかっぽい感じがしますし、実際に選択すると円の動きになりますが・・・下記の設定内容通りに動いていないきがするので分かる方教えてください。
※modeによる設定は分かる範囲で後述します。

#### Position var
Particleが作成されるエリアになります。
このエリアを(0, 0)にすれば中心からしかParticleが発生しません。
また、(100, 0)とすれば横長にParticleが作成されます。

#### Emit rate
一度に作成するPartileの数です。
この数のParticleが一気に作成されます。

#### Duration
このParticleをどれくらい表示させるかを指定します。
例えば、3秒で爆発して消える場合は`3.00`を指定します。
また、炎のように永遠と表示され続ける場合は`-1.00`を指定します。

#### Total Particles
画面上に表示させるParticleの総数です。
例えば`Emit rate`を100で指定して、`Total Particles`も100にした場合は1回目に表示されたParticleが消えるまで次のParticleが生まれてきません。
また、`Emit rate`の方が優先されるようで`Total Particles`よりも`Emit rate`を大きくした場合は`Emit rate`の数のParticleが作成されます。
（`Total Particles`以上のParticleが作成されるということです。）

#### Blend src/dst
まだ調べてません・・・

#### reset on visibility toggle
表示をリセット・・・？
まだ調べてません。

### 基本値と揺らぎ
ここから下は基本値（左）と揺らぐ値（右）の両方を設定できます。
基本値＋ランダムな揺らぎ値によって内容が設定されます。

#### Life
生成したParticleの生存時間です。
基本値を`3.00`にした場合は3秒間の間Particleが生存します。
`3.00±1.00`と設定した場合は2.00〜4.00秒の間で生存します。

#### Start size
Particle作成時のサイズです。

#### End size
Particleの生存期間が来た時のサイズです。

#### Start spin
Particle作成時の向きです。

#### End spin
Particleの生存期間が来た時の向きです。
`Start spin`と違う値を入れればParticleが回転します。

#### Angle
作成したParticleがどこに向かうかを示します。
例えば`90.0`を設定するとParticleは上に向かっていきます。

#### Start color
Particle作成時の色です。

#### End color
Particleの生存期間が来た時の色です。

### Gravity mode
modeで`Gravity mode`を設定するとこちらが有効になるようです。

#### Gravity
重力を受ける方向を示します。
Angleで`90.0`を指定して`Gravity`を(0, -90)を指定すると、下に引っ張られます。

#### Speed
`Angle`で指定した方向にかかる初期速度です。
Angleで`90.0`を指定して`Gravity`を(0, -90)を指定した時に`Speed`を`100`と設定すると上に上がった後に下に下がっていきます。

#### Tang. acc / Radial acc
まだ調べてません。
設定すると変則的な動きを始めます・・・。

### Radial mode
modeで`Radius mode`を設定するとこちらが有効になるようです。
まだ調べてません。

### Particle texture
Particleを生成するための基本となる画像を設定します。

### Particles作成ツールについての余談
実はParticleを作成するツールはそれなりに高価なものです。
僕が知っているものは5000円ほどするツールで、残念ながら手が届きませんでした。
（使いこなせる自信も無かったので、購入を見送りました。）
・・・が、なんとSpriteBuilderならタダでこのレベルのものが簡単に作れてしまします！
時代の進歩は素晴らしいのと同時に、IT業界で働く人の仕事がどんどん奪われていく事に脅威を覚えます（苦笑

ただ、SpriteBuilderで作成した場合plistが作成されていない気が・・・。どうなってるのでしょうね？？
(ccbiで作成されます。)

### 次回は
今回は説明のみを行いましたので、次回は実際にParticleを作って弾を飛ばしていこうと思います。