search
LoginSignup
23
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

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

概要

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"を利用した。
スクリーンショット 2016-06-26 19.31.55.png

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も接続する。

スクリーンショット 2016-06-26 19.39.41.png

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

Xcode内のエディタで設定値を調整できる。
スクリーンショット 2016-06-26 19.38.26.png

サンプルコード

メモ

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

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
23
Help us understand the problem. What are the problem?