UIKitアプリにSpriteKitのviewを差し込んでパーティクルを出してみた（Swift3）

先日[CoreAnimationのパーティクルをSwift3で試してみた](http://qiita.com/ika_tarou/items/a5fcfdf7dcc540006fbb)という記事で、SpriteKitをUIKitに組み込むよりCoreAnimationのパーティクルを入れた方が楽だよと書いたんですが、CoreAnimationのパーティクルは設定できる項目が少なく、欲しいパーティクルが作れませんでした。結局SpriteKitのパーティクルを使うことになったのでシェアします。

###まずはSingleViewApplicationでプロジェクトを作ります
<img width="754" alt="スクリーンショット 2016-11-01 6.18.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/59cfd955-d111-1f2c-595c-4788257b7088.png">

###ストーリーボードで、ViewControllerにもともとあるViewに新しいViewを載せます<img width="645" alt="スクリーンショット_2016-11-01_6_19_29.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/14d2cd08-ea54-6eb2-c173-8aa3b0b3dde0.png">

追加したviewのクラスをSKViewにします
<img width="363" alt="スクリーンショット 2016-11-01 6.20.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/386bbb4d-901e-06b2-7913-301e9ff8d5cb.png">

追加したViewの背景を黒くしてパーティクルが見やすくなるようにします<img width="574" alt="スクリーンショット_2016-11-01_6_33_32.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/be2229b9-36f3-e261-0345-b8beb04c9c0e.png">

storyboardで追加したSKViewをViewController.swiftと紐付けします（skViewっていう名前にしました）
<img width="881" alt="スクリーンショット 2016-11-01 6.36.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/21084f71-6f8d-548c-fbf9-eb509f074992.png">
紐付け完了
<img width="881" alt="スクリーンショット_2016-11-01_6_40_06.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/83d51599-7ae5-3240-d601-4c65537e7ab8.png">

###SKSceneのswiftファイルを作ります
<img width="732" alt="スクリーンショット 2016-11-01 6.46.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/038630ca-f10d-f388-b025-213b606bb0ef.png">

<img width="528" alt="スクリーンショット_2016-11-01_6_46_49.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/873565f1-8d7c-d1e4-4678-e84bc549c1f5.png">

作ったSKSceneファイルにはこんなコードを書きます
<img width="1136" alt="スクリーンショット 2016-11-01 6.54.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/2daf931d-9515-5eb0-7477-4b95c351229b.png">

```
import SpriteKit

class TestSKScene : SKScene {
    
    override func didMove(to view: SKView) {
        self.backgroundColor = SKColor.clear    // これ落とし穴！やらないとモヤがかかったみたいになる
        self.scaleMode = .resizeFill    // これを入れないとiPadで表示した時にパーティクルが小さく表示されてしまう
        emitParticle()
    }
    
    func emitParticle() {
        
        // パーティクルファイルのパスを指定
        guard let testParticlePath = Bundle.main.path(forResource: "testParticle", ofType: "sks") else {
            return
        }
        
        // パーティクルを作って載せる
        let testParticle = NSKeyedUnarchiver.unarchiveObject(withFile: testParticlePath) as! SKEmitterNode
        testParticle.position = CGPoint(x: self.frame.midX, y: self.frame.midY)
        self.addChild(testParticle)
    }
}
```
まだパーティクルファイルは作ってないですが、名前はtestParticle.sksにする予定です。

###SpriteKitのパーティクルファイルを作ります
<img width="733" alt="スクリーンショット 2016-11-01 6.58.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/11104479-557b-de7e-2d8e-fb83927c5c7f.png">
※SceneKitのパーティクルを選ばないように気をつけて

タイプは色々ありますが、とりあえずRainを選びました
<img width="731" alt="スクリーンショット 2016-11-01 6.58.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/c563ff05-2aed-7d46-93e8-969ca73fb999.png">

値を調整しないとこんな感じ
<img width="667" alt="スクリーンショット 2016-11-01 6.59.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/81b1abfb-3390-ca47-3438-4f59ef2769e8.png">
値を変えて欲しいイメージに調整しましょう

これでSKSceneにパーティクルは載ったので、最初に作ったViewControllerに載せたSKViewにSKSceneを載せます
<img width="976" alt="スクリーンショット_2016-11-01_7_06_14.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/2b8d4a88-35e4-7c58-8caa-cfdb88e90dd1.png">
```
    override func viewWillAppear(_ animated: Bool) {
        let scene = TestSKScene(size: skView.bounds.size)
        skView.presentScene(scene)
    }
```

ビルドしましょう

##はい完成♪
<img width="341" alt="スクリーンショット 2016-11-01 7.09.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/45467/ea9fe821-910c-4eea-afe5-58ff52ab4f42.png">


##落とし穴がひとつだけ
TestSKScene.swiftファイルにコメントで書いたんですが、
```
self.backgroundColor = SKColor.clear
```
これを入れないとパーティクルの上にモヤがかかったみたいになります。これだけハマりました。
![スクリーンショット_2016-11-01_7_09_04.png](https://qiita-image-store.s3.amazonaws.com/0/45467/376872f9-98a0-be6f-994d-2d1cbb8e88c2.png)



これができればシーンの上にSKSpriteNodeを載せることも可能だし、SpriteKitのパワー生かし放題ですね。