[Swift] CAEmitterLayer, CAEmitterCell - 파티클 효과

이번 게시글에서 구현할 기능은 파티클 효과입니다!

 

어떤 효과냐구요..?

 

우선 영상으로 예시부터 볼게요

카톡에서 겨울에 눈올때 나타나는 효과같은거에요

 

 

 

오늘은 이 타입을 사용해서 구현할건데요

 

파티클 시스템을 render해주고 애니메이션도 넣어서 방출해준데요!

 

이거와 같이 사용하는게

 

이 타입이에요

CAEmitterLayer로 방출될 파티클을 지칭하는 것같죠?

 

 

따라서

 

CAEmitterLayer라는 컨테이너에서

CAEmitterCell이라는 파티클을 뿌려주는 느낌이에요

 

 

 

 

엄청 다양한 프로퍼티들이 많이있어서 하나하나 모두 보진않고

사용한것 위주로 봐볼게요

 

CAEmitterLayer 정의

    func createParticles() {
        let particleEmitter = CAEmitterLayer()
        particleEmitter.lifetime = 5.0
        
        // MARK: 설정
        particleEmitter.emitterPosition = CGPoint(x: view.center.x, y: 100)
//        particleEmitter.zPosition = 100
//        particleEmitter.emitterDepth = 100
//        particleEmitter.emitterZPosition = 100
        
        // 뿌려지는 모양
        particleEmitter.emitterShape = .point
        // 뿌려지는 컨테이너의 크기
        particleEmitter.emitterSize = CGSize(width: view.frame.size.width, height: 1)
//      particleEmitter.emitterMode = .volume
        particleEmitter.velocity = 2
        particleEmitter.renderMode = .additive
        
        let white = makeEmitterCell(color: .white)
        let red = makeEmitterCell(color: UIColor.red)
        let green = makeEmitterCell(color: UIColor.green)
        let blue = makeEmitterCell(color: UIColor.blue)
        
        particleEmitter.birthRate = 1
        particleEmitter.emitterCells = [white]

        view.layer.addSublayer(particleEmitter)
        
    }

 

lifetime

파티클이 존재할 수 있는 시간

 

emitterPosition

CAEmitterLayer에서 파티클이 뿜어져나올건데 그 위치를 정해주는거에요

 

emitterSize

마찬가지로 CAEmitterLayer 크기를 정해주는거에요

 

emitterShape

CAEmitterLayer의 모양을 지정해줘요

point, line, circle등 여러모양들이 있어요

이 모양을 토대로 파티클들이 방출될거에요

 

velocity

수치가 높을수록 빠르게 방출되는 효과

 

birthRate

파티클 생성주기

수치가 높을수록 많은 파티클

 

emitterCells

적용할 파티클 넣어주기

 

 

 

 

CAEmitterCell도 많은 프로퍼티들이 있는데

CAEmitterLayer와 겹치는 변수도 있어요

 

 

CAEmitterCell

    func makeEmitterCell(color: UIColor) -> CAEmitterCell {
        let cell = CAEmitterCell()
        cell.birthRate = 10
        cell.lifetime = 7.0
        cell.lifetimeRange = 0
        
        // MARK: 색관련
        cell.color = color.cgColor
        // alpha값 줄어드는 오차범위
        cell.alphaRange = 0.5
        // red값 오차범위
//        cell.redRange = 100
//         red값 변하는속도
//        cell.redSpeed = 50
//        cell.blueRange = 100
//        cell.blueSpeed = 50
//        cell.greenRange = 100
//        cell.greenSpeed = 50
        // alpha값 줄어드는 속도
        cell.alphaSpeed = -0.3
        
        // MARK: 속도관련
        // 클수록 방향전환영향도 커짐
        cell.velocity = 100
        cell.velocityRange = 1
        // y방향으로 가속도
        cell.yAcceleration = 60
        // 효과 뿌려지는 각도조절
//      cell.emissionLongitude = .pi/2
        cell.emissionRange = .pi * 2
//      cell.emissionLatitude = .pi/2
        cell.spin = 3
        cell.spinRange = 3
        cell.scale = 0.1
        cell.scaleRange = 0.01
        cell.scaleSpeed = -0.01

        cell.contents = UIImage(named: "snow")?.cgImage

        return cell
    }

birthRate

파티클의 생성주기인데

위에서 CAEmitterLayer의 birthRate와 중복돼서

더 많이 생긴다고 생각하면 돼요

 

color

이미지가 흰색인 경우 적용이 잘돼요

 

____Range

____값의 범위의 값

해당하는 값만큼 더해서최대, 빼서최소값인 범위를 만들고

그 사이의 값이 적용됌

alphaRange면

alpha값의 범위를 지정하는것

 

emissionRange

파티클이 뿌려질 각도를 조절함

 

yAcceleration

y 방향으로 가속도

x,z도 프로퍼티 존재

 

spin

돌아가는 속도

 

____Speed

값이 변하는 속도

클수록 빨리변함

 

contents

파티클이될 이미지를 적용시킴

 

velocity

수치가 높을수록 빠르게 방출되는 효과

여기서 velocity수치가 높을 수록

파티클이 뿌려지는 각도나 효과들이 잘적용 되더라구요

 

여기까지가 기본적인 프로퍼티고 이정도면

어느정도 이쁜 파티클을 만들 수 있어요

 

 

 

위에서

        cell.redRange = 100
        cell.redSpeed = 50
        cell.blueRange = 100
        cell.blueSpeed = 50
        cell.greenRange = 100
        cell.greenSpeed = 50

이 코드를 적용 시켰을 때 파티클효과는

 

색이 마구마구 변하죠??

 

 

아래처럼 범위를 변경하면

cell.emissionRange = .pi * 2

.pi * 2니까 범위는 현재각도로부터 360가 되겠네요

사방으로 흩뿌려지는 듯한 파티클이 나타나요

 

 

 

 

여기서 더욱 심화된 파티클은

 

파티클후 파티클이 나타는 구현이에요

예를들어 폭죽이 날라가는 1자로 쭈~~~욱 위로 올라간 파티클후에

펑 터지는 파티클을 예시로 들수 있겟죠

 

이런경우에는

emitterCell에 emitterCell을 추가할 수 있어요

 

    func makeEmiterCellFirework() -> CAEmitterCell {
        let cell = CAEmitterCell()
        cell.birthRate = 50
        cell.velocity = 100
        cell.lifetime = 1.0
        cell.emissionRange = (2 * .pi)

        cell.scale = 0.3
        cell.alphaSpeed = -0.2
        cell.yAcceleration = 80
        cell.beginTime = 1.5
        cell.duration = 0.1
        cell.scaleSpeed = -0.015
        cell.spin = 2
        
        cell.redRange = 100
        cell.redSpeed = 50
        cell.blueRange = 100
        cell.blueSpeed = 50
        cell.greenRange = 100
        cell.greenSpeed = 50
        cell.contents = UIImage(named: "snow")?.cgImage
        return cell
    }

        let white = makeEmitterCell(color: .white)
        let firework = makeEmiterCellFirework()
        
        particleEmitter.emitterCells = [white]
        white.emitterCells = [firework]

        view.layer.addSublayer(particleEmitter)

white라는 파티클과

firework라는 파티클을 만든후

white 파티클에 firework를 넣어주면 돼요

 

beginTime

duration

으로 동작 시작 시간과 적용되는 시간을 조절할 수도 있어요

 

 

 

눈송이 끝에서 작은 파티클이 나타나는게 보이나요??

 

 

주의할 사항으로

duration을 바로 시작되는 파티클에 달아주는경우

(여기서는 눈파티클 후 작은파티클의 형태에서

눈파티클을 없애고 작은파티클만 처음에 실행되도록 한 경우)

파티클효과가 적용되지 않더라구요..