概要
iOSアプリでリッチなアニメーションを実現するために、SpriteKitを利用した際のメモとサンプルコード。
やりたかったこと
- 「キラキラ」したものを表現したい
- 実装済みのUIと組み合わせて使いたい
- なるべく少ないコードで実装したい
- なるべく設定値を簡単に調整したい
イメージ
サンプルコードを動かしたもの。
※これはGifのため、iOS端末上ではもっとなめらかに動く
SpriteKit
特徴
- iOS・Mac OS X向けの2Dゲームフレームワーク
- Appleが提供
- UIKitと連携しやすい
- 物理演算、パーティクルの利用が容易
実装方法
大まかな手順は以下。
1. SKScene, SKSファイルをプロジェクトに追加する
Xcodeの操作手順。メニューのFile -> New -> File -> 各OSのResourceを選択。
SpriteKit Scene、 SpriteKit Particle Fileをそれぞれ作成する。
このとき、パーティクルは8種類の中から選ぶことができる。サンプルでは"Bokeh"を利用した。
2. SKSceneのコードを書く
LightScene.swift
import UIKit
import SpriteKit
class LightScene: SKScene {
let kFadeDuration = NSTimeInterval(1.3)
var lightNode: SKEmitterNode!
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override init(size: CGSize) {
super.init(size: size)
}
override func didMoveToView(view: SKView) {
addPaper()
showPaper()
}
override func willMoveFromView(view: SKView) {
lightNode.removeFromParent()
}
func addPaper(){
let fileName = "Bokeh"
let path = NSBundle.mainBundle().pathForResource(fileName, ofType: "sks")!
lightNode = NSKeyedUnarchiver.unarchiveObjectWithFile(path) as! SKEmitterNode
lightNode.position = CGPointMake(self.size.width / 2, self.size.height / 2)
lightNode.alpha = 0
addChild(lightNode)
}
func showPaper(){
let show = SKAction.fadeInWithDuration(kFadeDuration)
lightNode.runAction(show)
}
}
3. ViewControllerのコードを書く
ViewController.swift
import UIKit
import SpriteKit
class ViewController: UIViewController {
@IBOutlet weak var skView: SKView!
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
override func viewDidLoad() {
super.viewDidLoad()
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
showParticle()
}
// MARK: Sprite Kit.
func showParticle() {
let scene = LightScene(size: skView.frame.size)
skView.ignoresSiblingOrder = true
scene.scaleMode = .AspectFill
skView.presentScene(scene)
}
}
Interface BuilderでUIViewのコンポーネントをドラッグ＆ドロップし、カスタムクラスに"SKView"を設定する。Outletも接続する。
4. *.sksファイルを編集する
Xcode内のエディタで設定値を調整できる。
サンプルコード
メモ
- 用意されているパーティクルは8種類。Bokeh, Fire, Fireflies, Magic, Rain, Smoke, Snow, Spark。
- パーティクルのTextureに任意の画像を設定すれば、粒の形を簡単に変更できる。
- パーティクルの背景に画像を表示したい場合は、ViewControllerではなくSKSceneで背景画像を設定する。