【Swift】SpriteKitの使い方。シーンエディタのエミッターで画像を噴水のように放出する。(Swift 2.2、XCode 7.3)
SKEmitterNodeとは
本記事ではSpriteKit Sceneファイルの編集画面（シーンエディタ）で設定できるSKEmitterNode（以下、エミッターノード）について説明する。
エミッターノードとは、設定した範囲の個数、大きさ、速度、方向で画像を放出するノードのことである。これを使えば煙や炎などの複雑なアニメーションを細かい粒子（パーティクル）の動きで表現できる。
以降は放出する画像のことをパーティクルと表現する。ちなみに巷では、煙や炎などの不規則な動きをする自然現象をコンピュータグラフィックで表現することをパーティクルシステムという。
エミッターノードを使ってみる
実際にエミッターノードをシーンに配置して画像を放出してみよう。以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。⇒「テスト用プロジェクト」
事前準備では、画像をプロジェクトに取り込み、背景画像をSKSファイルに配置しておいた。
SpriteKit Sceneファイル（以下、SKSファイル）の作り方については次の記事を参照されたし。⇒「SpriteKit Sceneファイルの使い方」
下図赤枠のSKSファイルを選択してシーンエディタを開く。黄緑枠のオブジェクトライブラリボタンを押して部品一覧を表示し、ドラッグ＆ドロップで「Emitter」をシーンに配置する（紫矢印）。黄枠のアトリビュートインスペクタボタンを押して設定画面を表示する。
設定画面の値を下表のように変更する。
| 設定項目 | 設定値 |
|---|---|
| Texture | 「bowl」 |
| Emitter | Birthrate「1」 |
| Lifetime | start「10」 |
| Speed | Start「150」 |
| Acceleration | X「20」、 Y「-50」 |
以下は実際のプレイ動画。ボールが無限に山から飛び出してくるようになった。
SpriteKit Particle Emitterの設定
エミッターノードのアトリビュートインスペクタの設定項目を説明する。
Name
エミッターノードの名前。親ノードの指定に使ったり、ソースコードからエミッタノードにアクセスするときの識別子に用いる。
Parent
親ノードの名前。デフォルトではシーン名が設定されている。
Target Node
設定したノードの前面にパーティクルが描画されるようになる。
例えば、背景と鳥のノードが重なっている状態でTarget Nodeに背景ノードを設定した場合、下図のように鳥ノードの背面にパーティクルが描画される。
一方、Target Nodeに鳥ノードを設定した場合、下図のように鳥ノードの前面にパーティクルが描画される。
Position
エミッターノードの座標を設定する。デフォルトではシーンの左下が基準座標（0, 0）となり、そこから水平方向にXポイント、垂直方向にYポイント移動した位置を指定する。
Scale
エミッターノードの大きさの倍率をX方向、Y方向で指定する（1.0が等倍）。この値を変更しても描画されるパーティクルの大きさには影響しない。何に利用できるかは分かったら追記する。
Z Position
エミッターノードのZ軸の位置を指定する。この値が大きいノードほど前面に表示される。ただし、この値を変更してもパーティクルが表示される位置には影響しない。何に利用できるかは分かったら追記する。
Particlesの設定
パーティクルのアトリビュートインスペクタの設定項目を説明する。確認作業はページ前半で行った設定を基準に個々の値を変更して行った。
Texture
描画するパーティクルの画像。今回の例でいうと野球ボール。
Emitter
Birthrateは1秒間に生成するパーティクルの個数。Maximumは生成するパーティクルの合計数。
以下の動画はBirthrate「2」、Maximumに「10」に変更して実行した結果。1秒あたりボールが2個発生し、10個発生したら出力が終わる。
LifeTime
Startは、パーティクルが描画されてから消えるまでの時間を秒で設定する（以下、生存期間）。
Rangeは、生存期間の増減幅を設定する。設定値の半分までのランダム値がパーティクル1粒ごとの生存期間に加算または減算して表示される。
以下はStart「4」、Range「6」に変更して実行した結果。要するに、それぞれのパーティクルは表示されてから1秒〜7秒後のどこかで消える。
Position Range
エミッターノードを中心に設定したX（幅）とY（高さ）の範囲内でランダムの場所にパーティクルが出現する。
以下の動画は、Position RangeにX「100」、Y「200」を設定した実行結果
Z Position
パーティクルを描画するZ軸の位置を指定する。この値より小さいZ Positionのノードの前面にパーティクルが描画される。
下図は、パーティクルのZ Positionに「2」、鳥ノードのパーティクルに「1」を設定した結果。
Angle
Startには、パーティクルの発射方向を設定する。水平右方向が0度で、デフォルトは90度に設定されている。
Rangeには、発射方向の増減角度を設定する。設定値の半分までのランダム値がパーティクル1粒ごとの発射方向に加算または減算される。
以下はAngleをStart「90」、Range「60」に変更して実行した結果
Speed
Startには、1秒間に進む距離（ポイント）を設定する。
RangeにはSpeedの増減幅を設定する。設定値の半分までのランダム値がパーティクル1粒ごとのSpeedに加算または減算される。
以下はSpeedをStart「900」、Range「1800」に変更して実行した結果
Acceleration
水平方向（X）と垂直方向（Y）の加速度を設定する。
以下の動画はAceelerationのYを「-100」に変更して実行した結果。
Alpha
Startには、パーティクルの透過度を設定する。0は完全に透明、0.5は半透明、1.0以上は透過しない。
Rangeには透過度の増減幅を設定する。設定値の半分までのランダム値がパーティクル1粒ごとの透過度に加算または減算されて表示される。
Speedには秒間あたりの透過度の増減速度を設定する。マイナス値を設定するとパーティクルは徐々に消えていき、プラス値を設定すると透過しているパーティクルが徐々にはっきり見えてくる。
以下の動画は、Start「0.5」、Range「1」、Speed「-0.1」に変更して実行した結果。
Scale
Startには、元のサイズに対する表示サイズを倍率で設定する（1は等倍）。
Rangeには、倍率の増減幅を設定する。設定値の半分までのランダム値がパーティクル1粒ごとの倍率に加算または減算されて表示される。
Speedには、秒間あたりの倍率の増減速度を設定する。マイナス値を設定するとパーティクルは徐々に小さくなり、プラス値を設定するとパーティクルが徐々に大きくなっていく。
以下の動画は、Start「0.5」、Range「1」、Speed「0.1」に変更して実行した結果。
Rotation
Startには、元の画像に対する回転角度を設定する。この設定は、パーティクルが表示されてから回転するのでは無く、回転したあとのパーティクルが描画される。
Rangeには、回転角度の増減幅を設定する。設定値の半分までのランダム値がパーティクル1粒ごとの回転角度に加算または減算されて表示される。
Speedは、秒間あたりの回転角度で、パーティクルが表示されてから回転する。個人的にはこの設定値に対する増減幅もあって欲しかった。
以下の動画はStart「45」、Range「180」、Speed「360」に変更して実行した結果。
Color Blend
Startには、後述するColor Rampの色を画像にブレンドする強さを決めるための係数（以下、ブレンド係数）を設定する。0はブレンドされない。1.0以上になると全力でブレンドされるようになる。
Rangeには、ブレンド係数の増減幅を設定する。設定値の半分までのランダム値がパーティクル1粒ごとのブレンド係数に加算または減算されて表示される。
Speedには、秒間あたりのブレンド係数の増減速度を設定する。マイナス値を設定すると徐々にブレンドされなくなり、プラス値を設定すると徐々にブレンドの強さが増加していく。
以下の動画はStart「0.5」、Range「1」、Speed「0.1」に変更して実行した結果。
Color Ramp
テクスチャとブレンドする色を設定する。
設定できる色は1つだけではなく、バーをクリックして色を追加すれば、グラデーションさせながら色を変化させられる。
以下の動画は、Color BlendのStartを「1」、Color Rampを「赤黄青」に変更して実行した結果。
Blend Mode
描画色の計算モードを「Alpha」「Add」、「Substract」、「Multiply」、「MultiplyX2」、「Screen」、「Replace」から選択する。次の記事を参照されたし。⇒「Blend Modeとは」
Field Mask
SKFieldNodeのカテゴリビットマスクと合わせることで、SKFieldNodeの影響を受けるようになる。ビットマスクについては次の記事を参照されたし。⇒「ビットマスクとは」
SKFieldNodeとは渦、乱気流などの物理現象を他のノードにもたらすノードである。詳細は別の記事で説明する。
以下の動画はパーティクルに乱気流の影響を受けさせたもの。
Custom Shader
シェーダーとは、グラフィックに陰影処理を施すプログラミングのことをいう。仕様が明確になったら別記事で説明する。
ということで、火山はこんな感じでどうだろう。