【Swift】 불타는 UITabBar를 만들어 보자

소개

게임 제작 시에 사용되는 SpriteKit입니다만, 실은 비게임 앱에 짜넣는 일도 가능합니다.
이번에는 SpriteKit을 사용하여 UITabBar에 불꽃을 설정해 보겠습니다.

프로젝트 만들기

먼저 Xcode에서 Tabbed Application를 만듭니다.

불꽃 만들기

그런 다음 탭 막대에 설정하는 불꽃을 만듭니다.New file > Sprite KitParticle File 를 선택합니다.



템플릿은 Fire를 선택합니다.



이제 MyParticle 라는 이름의 불꽃 파티클을 만들 수 있었습니다.

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가 회색으로 되어 있습니다만, SKView 에 SKScene 를 세트 하는 것으로 해소합니다.

SKScene 추가

다음은 SKView 에 SKScene 를 추가합니다.SKScene 는 하나의 화면을 구성하는 클래스입니다.

실제 게임이라면 오프닝 화면이나 게임 오버 화면 등 하나 하나에 SKScene을 할당하는 경우가 많습니다.
AppDelegate 의 application:didFinishLaunchingWithOptions 의 말미에 아래의 처리를 기술합니다.

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

SKNode 추가

마지막으로 방금 만든 화염의 Particle을 UIabBar 추가해 갑니다.AppDelegate 의 application: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가 완성되었습니다.



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