22
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

はじめに

ゲーム制作の際に使われる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
    }
}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
22
Help us understand the problem. What are the problem?