【Swift】燃えさかるUITabBarを作ってみる

## はじめに
ゲーム制作の際に使われるSpriteKitですが、実は非ゲームアプリに組み込む事も可能です。
今回はSpriteKitを使ってUITabBarに炎をセットしてみます。

![image.gif](https://qiita-image-store.s3.amazonaws.com/0/61598/694574c4-5f45-ae8d-f32a-b13b9fdb6a37.gif)

## プロジェクト作成
まずはXcodeで`Tabbed Application`を作成します。

![スクリーンショット 2015-10-18 15.14.03.png](https://qiita-image-store.s3.amazonaws.com/0/61598/c58efbb8-ce14-d36f-41df-7935bfb5ecb6.png)

## 炎を作る
次にタブバーにセットする炎を作ります。
`New file` > `Sprite KitParticle File`を選びます。

![スクリーンショット 2015-10-18 15.14.53.png](https://qiita-image-store.s3.amazonaws.com/0/61598/449c8cac-bbc4-2ce8-04a3-ca805bdf0481.png)

テンプレートは`Fire`を選択します。

![スクリーンショット 2015-10-18 15.15.38.png](https://qiita-image-store.s3.amazonaws.com/0/61598/b25a034f-757f-e5db-775a-7824a5ea3188.png)

これで`MyParticle`という名前の炎パーティクルを作る事ができました。

![スクリーンショット 2015-10-18 15.16.48.png](https://qiita-image-store.s3.amazonaws.com/0/61598/acb65f9f-d08e-af8a-a3ba-42fc7be99e0a.png)

## UITabBarにパーティクルをセットする
UITabBarへ今作った炎パーティクルをセットします。

### SKViewの追加
最初に`SKView`をUITabBarにセットします。
`SKView`とは`UIView`のサブビューで、SpriteKitとUIKitの橋渡しをしてくれるクラスになります。

`AppDelegate.swift`を下のように書き換えます。

```swift
import UIKit
import SpriteKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        
        if let tabBarController = window?.rootViewController as? UITabBarController {
            let tabBar = tabBarController.tabBar
            let v = SKView(frame: tabBar.bounds)
            v.userInteractionEnabled = false
            v.autoresizingMask = [.FlexibleWidth]
            v.backgroundColor = UIColor.clearColor()
            tabBarController.tabBar.addSubview(v)
        }
        
        return true
    }
}
```

起動すると下のようになります。
TabBarが灰色になっていますが、`SKView`に`SKScene`をセットする事で解消します。

![スクリーンショット 2015-10-18 15.26.47.png](https://qiita-image-store.s3.amazonaws.com/0/61598/bffd4ec2-c8c9-fc5f-d625-aad4b5de34d9.png)

### SKSceneの追加
次は`SKView`に`SKScene`を追加します。
`SKScene`は1つの画面を構成するクラスです。

実際のゲームですとオープニング画面やゲームオーバー画面など1つ1つに対してSKSceneを割り当てる事が多いです。

`AppDelegate`の`application:didFinishLaunchingWithOptions`の末尾に下の処理を記述します。

```swift
let scene = SKScene(size: v.frame.size)
scene.backgroundColor = UIColor.clearColor()
v.presentScene(scene)
```

### SKNodeの追加
最後に先ほど作成した炎のParticleをUIabBar追加していきます。
`AppDelegate`の`application:didFinishLaunchingWithOptions`の末尾に下の処理を記述します。

```swift
if let node = SKEmitterNode(fileNamed: "MyParticle") {
    node.position = CGPoint(x: scene.frame.width / 2, y: 0)
    scene.addChild(node)
}
```

`SKEmitterNode`とは`SKNode`のサブクラスでパーティクルを画面に表示する時に使えます。
`SKNode`とはゲームでの要素を使う時に使うクラスで、ゲーム中の敵・味方・背景などほとんどの要素は`SKNode`を使って画面に表示します。

これで燃えさかるUITabBarが完成しました。

![image.gif](https://qiita-image-store.s3.amazonaws.com/0/61598/4b942f26-9933-42b3-4bba-12701716af10.gif)

SpriteKitでは、他にも雪・火花・ホタルなどのパーティクルが用意されています。
これらを使えばタップ時に火花が散るUITableViewControllerや雪の降るUIImageViewを実現できます。

```swift:AppDelegate.swift
import UIKit
import SpriteKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {
    var window: UIWindow?

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
        
        if let tabBarController = window?.rootViewController as? UITabBarController {
            let tabBar = tabBarController.tabBar
            let v = SKView(frame: tabBar.bounds)
            v.userInteractionEnabled = false
            v.autoresizingMask = [.FlexibleWidth]
            v.backgroundColor = UIColor.clearColor()
            tabBarController.tabBar.addSubview(v)
            
            let scene = SKScene(size: v.frame.size)
            scene.backgroundColor = UIColor.clearColor()
            v.presentScene(scene)
            
            if let node = SKEmitterNode(fileNamed: "MyParticle") {
                node.position = CGPoint(x: scene.frame.width / 2, y: 0)
                scene.addChild(node)
            }
        }
        
        return true
    }
}
```