WOZエンジニアの有吉です。
WOZではiOSアプリやWebアプリケーションの開発を行っていますが、デザイン段階で視覚演出効果を提案して、その実装を行うことがあります。
とあるiOSアプリ開発案件にて、「キラキラしたものが舞い散るようなアニメーション」を実装した際に、ゲームフレームワークのSpriteKitを活用した事例についてご紹介します。
SpriteKitとは
SpriteKitはAppleが提供しているiOS・Mac OS X向けの2Dゲームフレームワークで、UIKitと連携しやすく、物理演算やパーティクルの利用が容易といった特徴を持っています。
やりたかったこと
- 「キラキラ」したものを表現したい
- 実装済みのUIと組み合わせて使いたい
- なるべく設定値を簡単に調整したい
WOZではUIの製作において、「作っては壊す」、つまり何パターンも作って検討するような進め方を行うことがよくあります。「既存UIを大きく変更せずに実装できる」、「設定値を気軽に調整できる」ことは、一連の試行錯誤の回数を増やすことに繋がります。
イメージ
ビューの中でキラキラしたものが表示され、ボタン（もしくはビュー）が重なります。
※こちらはGifです。実際のアプリではもっとなめらかに動きます
※案件で実際に実装したものとは異なります
実装方法
Qiitaの記事をご参照ください。サンプルコードはGithubに置きました。
パーティクルの編集
Xcodeのビジュアルエディタで上で、パーティクル（粒子）の設定値を調整することができます。
所感
元々ゲームアプリの開発でSpriteKitを利用した経験があったということもありますが、比較的短時間でリッチなアニメーションを実装できたと思います。ベースとなるパーティクルは8種類用意されていて、細かな調整をXcode上で行うことができます。今回はデザイナー・エンジニア間で方向性を検討するところから、最終的なパラメータを詰めるところまでを効率的に進めることができました。
参考
まだiOSでリッチな演出に疲弊してるの？
iOSオールスターズ勉強会で、カヤックの布田さんが発表された時の資料です。開発にあたって参考にさせて頂きました。
最後に
WOZではWebアプリケーションエンジニアとして共に会社を作っていく新しいメンバーを募集しています！
WOZにご興味のある方、UI製作について語りたい方、お気軽にご連絡ください！
