[iOS] SpriteKit, 눈과 비를 내리는 효과를 만들어보자

2022년 9월 1일에 작성됨

 

사실 SpriteKit은 예전에 프로젝트하면서 한번 사용해 보면서 정리를 해야겠다 싶었는데, 그 사이에 면접 준비랑 이것저것 하다 보니 이렇게 밀려버렸네요.. SpritKit의 기본 개념과 SpritKit를 사용하여 눈과 비를 내리는 효과를 한번 간단하게 한번 정리해 보겠습니다 :)

SpriteKit

공식 문서 에서는 SpriteKit을 이렇게 정의하고 있어요.
'SpriteKit 프레임워크를 사용하면 고성능의 배터리 효율적인 2D 게임을 쉽게 만들 수 있습니다. 사용자 정의 OpenGL ES 셰이더 및 조명 지원, SceneKit과의 통합, 고급 새 물리 효과 및 애니메이션을 통해 힘 필드를 추가하고 충돌을 감지하며 새 조명 효과를 생성할 수 있습니다.'

 

주로 2D 게임을 만들 때 사용하거나 UIKit에서 애니메이션 만들 때 유용하게 사용한다고 합니다.

사실 어디서 자세하게 사용하는지는 아직 잘 모르겠네요.. 하지만 한번 사용해 보면 나중에 도움이 될 날이 오겠죠?

눈, 비 내리는 애니메이션 만들어보기

프로젝트에서 New File - Resource - SpriteKit Particle File을 선택해 주세요.

 

그럼 이렇게 선택할 수 있는 Particle이 뜨는데 한 번씩 직접 보면서 선택하는 게 좋을 거 같네요. 저는 눈과 비를 사용할 거라서 눈, 비 파일을 만들어주겠습니다.

 

생성한 파일을 선택하면 이렇게 설정을 바꿀 수 있는 창이 있습니다. 색깔도 바꿀 수 있고 위치, 속도 등 자세하게 커스텀이 가능하니 이것저것 수정해 보면서 본인이 필요한 애니메이션을 만들어보세요.

 

이제 Scene을 만들어줍니다. SpriteKit에서 모든 객체들이 SKEmitterNode로 표현됩니다. 이러한 노드들이 실제로 나타나는 곳이 Scene입니다.

import SpriteKit

class SnowScene: SKScene {

    override func didMove(to view: SKView) {
        setScene(view)
        setSnowNode()
    }

    override func didApplyConstraints() {
        guard let view = view else { return }
        scene?.size = view.frame.size
    }

    private func setScene(_ view: SKView) {
        backgroundColor = .clear
        scene?.anchorPoint = CGPoint(x: 0.5, y: 1)
        scene?.scaleMode = .aspectFill
    }

    private func setSnowNode() {
        guard let snowNode = SKEmitterNode(fileNamed: "snow") else { return }
        // 중앙 상단으로 세팅
        snowNode.position = .zero
        scene?.addChild(snowNode)
    }
}

 

이제 거의 끝났습니다. 이렇게 만든 Scene을 다른 뷰들 사용하는 방법이랑 똑같이 사용하면 되거든요.

...

    lazy var snowView: SKView = {
        let view = SKView()
        view.backgroundColor = .clear
        let scene = SnowScene()
        view.presentScene(scene)
            return view
    }()

...

 

이렇게 뷰를 만들어놓고 본인이 원하는 곳에 사용하면 정상적으로 눈 내리는 효과가 나타납니다!

결과