SpriteKitとUIKitを組み合わせて使う簡単なサンプル

# 概要
iOSアプリでリッチなアニメーションを実現するために、SpriteKitを利用した際のメモとサンプルコード。

## やりたかったこと
 - 「キラキラ」したものを表現したい
 - 実装済みのUIと組み合わせて使いたい 
 - なるべく少ないコードで実装したい
 - なるべく設定値を簡単に調整したい

## イメージ
サンプルコードを動かしたもの。
※これはGifのため、iOS端末上ではもっとなめらかに動く
![](https://media.giphy.com/media/xT8qBiXjhjRqSKrmi4/giphy.gif)

# SpriteKit
## 特徴
- iOS・Mac OS X向けの2Dゲームフレームワーク
- Appleが提供
- UIKitと連携しやすい
- 物理演算、パーティクルの利用が容易

# 実装方法
大まかな手順は以下。

## 1. SKScene, SKSファイルをプロジェクトに追加する
Xcodeの操作手順。メニューのFile -> New -> File -> 各OSのResourceを選択。
SpriteKit Scene、 SpriteKit Particle Fileをそれぞれ作成する。
このとき、パーティクルは8種類の中から選ぶことができる。サンプルでは"Bokeh"を利用した。
<img width="237" alt="スクリーンショット 2016-06-26 19.31.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/17330/96c9ce87-1693-4d44-6147-82fcafa49d95.png">

## 2. SKSceneのコードを書く

```swift: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のコードを書く

```swift: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も接続する。

<img width="683" alt="スクリーンショット 2016-06-26 19.39.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/17330/b1c585a2-f5ef-7079-4af7-34b7cb6da9ed.png">


## 4. *.sksファイルを編集する
Xcode内のエディタで設定値を調整できる。
![スクリーンショット 2016-06-26 19.38.26.png](https://qiita-image-store.s3.amazonaws.com/0/17330/7e64380f-35b0-f451-3ffb-16381ba5814f.png)




# サンプルコード
 - https://github.com/ariiyu/SpriteKitWithUIKit

# メモ

- 用意されているパーティクルは8種類。Bokeh, Fire, Fireflies, Magic, Rain, Smoke, Snow, Spark。
- パーティクルのTextureに任意の画像を設定すれば、粒の形を簡単に変更できる。
- パーティクルの背景に画像を表示したい場合は、ViewControllerではなくSKSceneで背景画像を設定する。

# 参考
- [まだiOSでリッチな演出に疲弊してるの？](https://speakerdeck.com/ryusukefuda/madaiosderitutinayan-chu-nipi-bi-siterufalse)
- [【SpriteKit】爆発や雪などの表現ができる「Particle File」について
](http://qiita.com/Koi-fumi/items/55f5e68ef89a48a057b4)
- [Sprite Kit 入門](http://spritekit.senchan-office.com/index.php/)