Particle Playground + CoreAnimation でパーティクルエフェクトを5分で作ってみる。

iOSでパーティクルエフェクトを表現する際は、Sprite Kitが主流のようですが、今回はもっとお手軽にCoreAnimation(CAEmitterLayer / CAEmitterCell)でかつシミュレーションアプリ「Particle Playground」で実装してみたいと思います。

(ほとんどコード書きません。)

CAEmitterLayer / CAEmitterCellの概要

iOS5よりCoreAnimationでサポートされたパーティクルシステムです。
UIKit上でお手軽にパーティクルエフェクトを実装することができます。

 

Particle Playgroundについて

CoreAnimationのパーティクルエフェクトを手軽に試すことができ、
なんとソースコード(Objective-C)も書き出してくれるMac用アプリケーションです。
AppStoreで購入することができ、お値段は約1,000円。
(動きの微調整を節約できるためおそらくお安い方だと思います。。)

 

実装

今回は簡単な星空のエフェクトを作ってみたいと思います。
星がキラキラと明滅するようなエフェクトです。

素材はこちらを使用しました。(わかりやすくするため、ここでは背景を黒にしています。)

    star_black

手順は以下のとおり。
1.  Particle Playgroundで動きの調整(エフェクトにこだわらなければ2min)
2.  Particle Playgroundでソースコード書き出し(1min)
3.  Xcode Project に転記(2min)

これだけです。

 

1. Particle Playgroundで動きの調整(2min)

まずはParticle Playgroundでパラメータを調整し、理想のアニメーションに近づけていきます。
UI上でパラメータをいじるだけですので、特にコードは打つことはありません。
画像をParticleImageの部分にドラッグ&ドロップするれば、その画像でParticleが生成されます。
以下、調整した値となります。

emitter_1

 

2. Particle Playgroundでソースコード書き出し(1min)
左上の「Export」ボタンを押すと、.m形式で書き出してくれます。

 

emitter_2

書き出されたコードは以下の通りです。

 

3. Swiftに転記(2min)
Particle Playgroundで書き出したコードをSwiftに転記していきます。
必要な部分のみを転記していけば数行で済んでしまいます。

Particle Playgroundでは表示領域がシミュレータに合わせてた数値が書き出されてしまうため、
これを実際に表示する画面に合わせてSizeを設定します。
修正箇所はその部分だけです。

以下コードとなります。

 

動作確認

Simulator上で確認してみます。

emitter_movie

 

最後に

このようにパーティクルエフェクトを短時間で制作することができました。
Particle Playgroundを使えば、都度Xcode上でデバッグ→確認→調整する時間が省け、より理想的な動きに最短ルートで辿りつくことが可能です。Sprite Kitなどに比べれば動きやイージングなどの自由度は少ないですが、動きがシンプルなエフェクトであればCoreAnimation(CAEmitterLayer / CAEmitterCell)で十分表現可能です。

●この記事を書いた人