ネタ
SpriteKit
Swift

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

More than 3 years have passed since last update.

はじめに

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

image.gif

プロジェクト作成

まずはXcodeでTabbed Applicationを作成します。

スクリーンショット 2015-10-18 15.14.03.png

炎を作る

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

スクリーンショット 2015-10-18 15.14.53.png

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

スクリーンショット 2015-10-18 15.15.38.png

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

スクリーンショット 2015-10-18 15.16.48.png

UITabBarにパーティクルをセットする

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

SKViewの追加

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

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)
        }

        return true
    }
}

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

スクリーンショット 2015-10-18 15.26.47.png

SKSceneの追加

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

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

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

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

SKNodeの追加

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

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

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

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
    }
}