Animationでパーティクルシステムがサポートされ、UIKitで実装されたUI上でパーティクル表現を簡単に行えるようになりました。用いたパーティクルエフェクトの基本的な実装方法を説明し、入れ子にして花火のような段階的なエフェクトを実現する方法や、動的にパラメータを変更する方法を紹介します。パーティクル画像をプロジェクトに追加するパーティクルシステムは、1つの画像を大量に描画することで多様な表現を行うものなので、その素となる画像が必要になります。ここでは、わかりやすいように次のようなシンプルな円形のpng画像を使います。(※視認しやすいよう背景を黒にして載せています)プロパティから色を変えられるので、白ベースの画像を用いることが多いですが、あらかじめ着色した画像を用いてもOKです。CAEmitterLayerオブジェクトを生成パーティクルを発生させるレイヤーであるCAEmitterLayerオブジェクトを1つ生成します。addSublayer:emitterLayer];renderModeプロパティは各パーティクルを重ね合わせる際の描画モードを指定できます。ここで使用しているkCAEmitterLayerAdditiveは加算による重ね合わせが行われます。emitterPositionプロパティにはパーティクルを発生させる座標を指定します。CAEmitterCellオブジェクトを生成パーティクルの発生源となるCAEmitterCellオブジェクトを生成します。alpha:0.5].CGColor;contentsプロパティには、手順1で用意したパーティクル画像をCGImageRef型でセットします。他にもプロパティがたくさんありますが、パーティクルの発生具合を調整するためのものです。それぞれの具体的な意味は後述します。CAEmitterCellsプロパティを設定CAEmitterLayerはemitterCellsというプロパティを持ち、NSArray型で複数のCAEmitterCellオブジェクトを登録できます。@[emitterCell];ここでは手順4で生成したCAEmitterCellオブジェクトを登録しています。以上で次のようなパーティクルエフェクトを表示できます。CAEmitterCellを入れ子にして用いる先ほどの手順ではCAEmitterLayerのemitterCellsプロパティにCAEmitterCellオブジェクトの配列をセットしましたが、CAEmitterCell自体もemitterCellsプロパティを持っており、(CAEmitterLayerと同様に)CAEmitterCellオブジェクトの配列を持つことができます。これはどういうことかというと、CAEmitterCellから発されたパーティクル自身がまたパーティクルの発生源となれる、ということを意味しています。上昇中のパーティクルの発生源となるCAEmitterCellオブジェクト破裂後に飛散するパーティクルの発生源となるCAEmitterCellオブジェクトの2種類のCAEmitterCellオブジェクトを発生させるようにすると、花火のようなパーティクルエフェクトを実現することができます。nil];花火の「上昇後に破裂する」という2段階のプロセスを表現するため、sparkCellのbeginTimeプロパティに、risingCellのlifeTimeプロパティと同じ値をセットすることで、risingCellによる放射が完了した後にsparkCellによる放射が開始するようにしています。動的にパラメータを変更するCAEmitterCellのnameプロパティに値をセットしておけば、パラメータを動的変更することができます。@"fireworks";setValue:forKeyPath:メソッドを用いて次のようにパラメータを変更することができます。セットすることは、パーティクルの発生を停止することを意味するので、上記コードは動的にパーティクルエフェクトを停止していることになります。種類が多く、言葉で定義を説明するよりも実際に動作させながら「変更してみると何が起きるか」を確認した方が理解が早いので、ここでは必要最小限のものについて説明します。birthRate:1秒間に生成するパーティクルの数。lifetime:パーティクルが発生してから消えるまでの時間。color:パーティクルの色。velocity:パーティクルの秒速。emissionRange:パーティクルを発生する角度の範囲。lifetimeRangeやvelocityRangeのように、xxxxRangeという名前のプロパティは、それぞれ各プロパティにランダム性をもたせるために、幅を設定するものです。velocityRangeは、velocityに設定した値に幅を持たせるためのプロパティです。サンプルコードGithubにアップしてあります。13の新API発掘シリーズその3です。Shortcuts"。(22)月別アーカイブリンクWishlist検索はてなブログをはじめよう!shu223さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。