LOADING

リッチめな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上で行うことができます。今回はデザイナー・エンジニア間で方向性を検討するところから、最終的なパラメータを詰めるところまでを効率的に進めることができました。

参考

まだiOSでリッチな演出に疲弊してるの?
iOSオールスターズ勉強会で、カヤックの布田さんが発表された時の資料です。開発にあたって参考にさせて頂きました。

最後に

WOZではWebアプリケーションエンジニアとして共に会社を作っていく新しいメンバーを募集しています!
WOZにご興味のある方、UI製作について語りたい方、お気軽にご連絡ください!