リッチめなUIの演出にSpriteKitを活用した話

WOZエンジニアの有吉です。
WOZではiOSアプリやWebアプリケーションの開発を行っていますが、デザイン段階で視覚演出効果を提案して、その実装を行うことがあります。
とあるiOSアプリ開発案件にて、「キラキラしたものが舞い散るようなアニメーション」を実装した際に、ゲームフレームワークのSpriteKitを活用した事例についてご紹介します。

SpriteKitとは

SpriteKitはAppleが提供しているiOS・Mac OS X向けの2Dゲームフレームワークで、UIKitと連携しやすく、物理演算やパーティクルの利用が容易といった特徴を持っています。

やりたかったこと

「キラキラ」したものを表現したい
実装済みのUIと組み合わせて使いたい
なるべく設定値を簡単に調整したい

WOZではUIの製作において、「作っては壊す」、つまり何パターンも作って検討するような進め方を行うことがよくあります。「既存UIを大きく変更せずに実装できる」、「設定値を気軽に調整できる」ことは、一連の試行錯誤の回数を増やすことに繋がります。

イメージ

ビューの中でキラキラしたものが表示され、ボタン（もしくはビュー）が重なります。

※こちらはGifです。実際のアプリではもっとなめらかに動きます
※案件で実際に実装したものとは異なります

実装方法

Qiitaの記事をご参照ください。サンプルコードはGithubに置きました。

パーティクルの編集

Xcodeのビジュアルエディタで上で、パーティクル（粒子）の設定値を調整することができます。

SpriteKit-Xcode

所感

元々ゲームアプリの開発でSpriteKitを利用した経験があったということもありますが、比較的短時間でリッチなアニメーションを実装できたと思います。ベースとなるパーティクルは8種類用意されていて、細かな調整をXcode上で行うことができます。今回はデザイナー・エンジニア間で方向性を検討するところから、最終的なパラメータを詰めるところまでを効率的に進めることができました。