SpriteKitとUIKitを組み合わせて使う簡単なサンプル

10855 ワード
iOS アニメーション SpriteKit UIKit UI UI テキストリンク

概要

iOSアプリでリッチなアニメーションを実現するために、SpriteKitを利用した際のメモとサンプルコード。

やりたかったこと

  • 「キラキラ」したものを表現したい
  • 実装済みのUIと組み合わせて使いたい
  • なるべく少ないコードで実装したい
  • なるべく設定値を簡単に調整したい

イメージ

サンプルコードを動かしたもの。
※これはGifのため、iOS端末上ではもっとなめらかに動く

SpriteKit

特徴

  • iOS・Mac OS X向けの2Dゲームフレームワーク
  • Appleが提供
  • UIKitと連携しやすい
  • 物理演算、パーティクルの利用が容易

実装方法

大まかな手順は以下。

1. SKScene, SKSファイルをプロジェクトに追加する

Xcodeの操作手順。メニューのFile -> New -> File -> 各OSのResourceを選択。
SpriteKit Scene、 SpriteKit Particle Fileをそれぞれ作成する。
このとき、パーティクルは8種類の中から選ぶことができる。サンプルでは"Bokeh"を利用した。

2. SKSceneのコードを書く

LightScene.swift
import UIKit
import SpriteKit

class LightScene: SKScene {

    let kFadeDuration = NSTimeInterval(1.3)

    var lightNode: SKEmitterNode!

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override init(size: CGSize) {
        super.init(size: size)
    }

    override func didMoveToView(view: SKView) {
        addPaper()
        showPaper()
    }

    override func willMoveFromView(view: SKView) {
        lightNode.removeFromParent()
    }

    func addPaper(){
        let fileName = "Bokeh"
        let path = NSBundle.mainBundle().pathForResource(fileName, ofType: "sks")!
        lightNode = NSKeyedUnarchiver.unarchiveObjectWithFile(path) as! SKEmitterNode
        lightNode.position = CGPointMake(self.size.width / 2, self.size.height / 2)
        lightNode.alpha = 0
        addChild(lightNode)
    }

    func showPaper(){
        let show = SKAction.fadeInWithDuration(kFadeDuration)
        lightNode.runAction(show)
    }
}

3. ViewControllerのコードを書く

ViewController.swift
import UIKit
import SpriteKit

class ViewController: UIViewController {

    @IBOutlet weak var skView: SKView!

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        showParticle()
    }

    // MARK: Sprite Kit.

    func showParticle() {
        let scene = LightScene(size: skView.frame.size)
        skView.ignoresSiblingOrder = true
        scene.scaleMode = .AspectFill
        skView.presentScene(scene)
    }
}

Interface BuilderでUIViewのコンポーネントをドラッグ＆ドロップし、カスタムクラスに"SKView"を設定する。Outletも接続する。

4. *.sksファイルを編集する

Xcode内のエディタで設定値を調整できる。

サンプルコード

メモ

  • 用意されているパーティクルは8種類。Bokeh, Fire, Fireflies, Magic, Rain, Smoke, Snow, Spark。
  • パーティクルのTextureに任意の画像を設定すれば、粒の形を簡単に変更できる。
  • パーティクルの背景に画像を表示したい場合は、ViewControllerではなくSKSceneで背景画像を設定する。

参考