UIKit 앱에 SpriteKit의 view를 꽂아 파티클을 내 보았습니다 (Swift3)

요 전날 CoreAnimation 파티클을 Swift3에서 사용해 보았습니다. 라고 하는 기사로, SpriteKit를 UIKit에 짜넣는 것보다 CoreAnimation의 파티클을 넣는 것이 편하다고 썼습니다만, CoreAnimation의 파티클은 설정할 수 있는 항목이 적고, 원하는 파티클을 만들 수 없었습니다. 결국 SpriteKit의 파티클을 사용하게 되었으므로 공유합니다.

우선 SingleViewApplication에서 프로젝트를 만듭니다.

스토리보드에서 ViewController의 원래 View에 새 View를 올립니다.

추가한 view 클래스를 SKView로 설정


추가 된 뷰의 배경을 검은 색으로 설정하여 입자를 쉽게 볼 수 있습니다.

storyboard에서 추가한 SKView를 ViewController.swift와 연결합니다(skView라는 이름으로 지정).

연결 완료

SKScene swift 파일 만들기

만든 SKScene 파일에 이런 코드를 씁니다.

import SpriteKit

class TestSKScene : SKScene {

    override func didMove(to view: SKView) {
        self.backgroundColor = SKColor.clear    // これ落とし穴！やらないとモヤがかかったみたいになる
        self.scaleMode = .resizeFill    // これを入れないとiPadで表示した時にパーティクルが小さく表示されてしまう
        emitParticle()
    }

    func emitParticle() {

        // パーティクルファイルのパスを指定
        guard let testParticlePath = Bundle.main.path(forResource: "testParticle", ofType: "sks") else {
            return
        }

        // パーティクルを作って載せる
        let testParticle = NSKeyedUnarchiver.unarchiveObject(withFile: testParticlePath) as! SKEmitterNode
        testParticle.position = CGPoint(x: self.frame.midX, y: self.frame.midY)
        self.addChild(testParticle)
    }
}

아직 파티클 파일은 만들지 않았지만 이름은 testParticle.sks로 만들 예정입니다.

SpriteKit 파티클 파일 만들기

※SceneKit의 파티클을 선택하지 않도록 조심해

타입은 여러 가지 있습니다만, 우선 Rain을 선택했습니다


값을 조정하지 않으면 이런 느낌

값을 변경하여 원하는 이미지로 조정합시다.

이제 SKScene에 파티클이 올라서 처음 만든 ViewController에 올린 SKView에 SKScene을 올립니다.

override func viewWillAppear(_ animated: Bool) {
let scene = TestSKScene(size: skView.bounds.size)
skView.presentScene(scene)
}

빌드합시다.

네 완성♪

함정이 하나만

TestSKScene.swift 파일에 주석으로 썼는데,
self.backgroundColor = SKColor.clear
이것을 넣지 않으면 파티클 위에 모야가 걸린 것 같습니다. 이만큼 빠졌습니다.


이것이 가능하면 장면 위에 SKSpriteNode를 싣는 것도 가능하고, SpriteKit의 파워 살리기 무제한군요.