【Swift】SpriteKitの使い方。シーンエディタのエミッターで画像を噴水のように放出する。(Swift 2.2、XCode 7.3)

2020年6月16日

SKEmitterNodeとは

本記事ではSpriteKit Sceneファイルの編集画面(シーンエディタ)で設定できるSKEmitterNode(以下、エミッターノード)について説明する。

Emitter

 

エミッターノードとは、設定した範囲の個数、大きさ、速度、方向で画像を放出するノードのことである。これを使えば煙や炎などの複雑なアニメーションを細かい粒子(パーティクル)の動きで表現できる。

以降は放出する画像のことをパーティクルと表現する。ちなみに巷では、煙や炎などの不規則な動きをする自然現象をコンピュータグラフィックで表現することをパーティクルシステムという。

Particle「Spark」

 

エミッターノードを使ってみる

実際にエミッターノードをシーンに配置して画像を放出してみよう。以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。⇒「テスト用プロジェクト

事前準備では、画像をプロジェクトに取り込み、背景画像をSKSファイルに配置しておいた。

SpriteKit Sceneファイル(以下、SKSファイル)の作り方については次の記事を参照されたし。⇒「SpriteKit Sceneファイルの使い方

背景画像

 

下図赤枠のSKSファイルを選択してシーンエディタを開く。黄緑枠のオブジェクトライブラリボタンを押して部品一覧を表示し、ドラッグ&ドロップで「Emitter」をシーンに配置する(紫矢印)。黄枠のアトリビュートインスペクタボタンを押して設定画面を表示する。

SKEmitterNodeをシーンに配置する

 

設定画面の値を下表のように変更する。

設定項目 設定値
Texture 「bowl」
Emitter Birthrate「1」
Lifetime start「10」
Speed Start「150」
Acceleration X「20」、 Y「-50」

 

以下は実際のプレイ動画。ボールが無限に山から飛び出してくるようになった。

SpriteKit Particle Emitterの設定

エミッターノードのアトリビュートインスペクタの設定項目を説明する。
SpriteKit Particle Emitterのアトリビュートインスペクタ

 

Name

エミッターノードの名前。親ノードの指定に使ったり、ソースコードからエミッタノードにアクセスするときの識別子に用いる。

 

Parent

親ノードの名前。デフォルトではシーン名が設定されている。

 

Target Node

設定したノードの前面にパーティクルが描画されるようになる。

例えば、背景と鳥のノードが重なっている状態でTarget Nodeに背景ノードを設定した場合、下図のように鳥ノードの背面にパーティクルが描画される。

鳥ノードの下にボール

 

一方、Target Nodeに鳥ノードを設定した場合、下図のように鳥ノードの前面にパーティクルが描画される。

鳥ノードの上にボール

 

Position

エミッターノードの座標を設定する。デフォルトではシーンの左下が基準座標(0, 0)となり、そこから水平方向にXポイント、垂直方向にYポイント移動した位置を指定する。

シーンのデフォルトのアンカーポイントは左下

 

Scale

エミッターノードの大きさの倍率をX方向、Y方向で指定する(1.0が等倍)。この値を変更しても描画されるパーティクルの大きさには影響しない。何に利用できるかは分かったら追記する。

 

Z Position

エミッターノードのZ軸の位置を指定する。この値が大きいノードほど前面に表示される。ただし、この値を変更してもパーティクルが表示される位置には影響しない。何に利用できるかは分かったら追記する。

Z Positionの説明

 

Particlesの設定

パーティクルのアトリビュートインスペクタの設定項目を説明する。確認作業はページ前半で行った設定を基準に個々の値を変更して行った。

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の設定

 

以下の動画は、Position RangeにX「100」、Y「200」を設定した実行結果

 

Z Position

パーティクルを描画するZ軸の位置を指定する。この値より小さいZ Positionのノードの前面にパーティクルが描画される。

下図は、パーティクルのZ Positionに「2」、鳥ノードのパーティクルに「1」を設定した結果。

パーティクルを前面に表示する

 

Angle

Startには、パーティクルの発射方向を設定する。水平右方向が0度で、デフォルトは90度に設定されている。

Angle

 

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

シェーダーとは、グラフィックに陰影処理を施すプログラミングのことをいう。仕様が明確になったら別記事で説明する。

 

ということで、火山はこんな感じでどうだろう。