[Swift] SpriteKit Particle effect다루기[1]

아이폰 기본앱 중에 날씨앱 다들 한번씩은 들어가보셨죠?

눈이 오면 눈이 내리고 비가 오면 비가 내리는 효과 한번은 보셨을 것 같은데요.

이번에 SpriteKit을 통해 오버헤드가 크지만 화려한 애니메이션? 효과를 다루어 보려고합니다.

 

SpriteKit은 간단한 2D게임을 만드는데에도 사용되는 프레임워크인데 오늘은 Particle Emitter만 다루어 보겠습니다.

 

Particle Emitte editor를 사용해서 각각 속성을 변경하며 실시간으로 실험하고 그 결과를 즉시 볼 수 있구요!

이 file을 ReferenceNode로 인스턴스화해서 Scene에 추가해주는 방식으로 사용됩니다.

Editor는 스토리보드 처럼 시각적인터페이스를 제공해주어서 코드를 사용하지 않고 독립적인 effect를 만들 수 있어요.

 

Particle Effect Editor 생성

1. New>File>SpriteKit ParticleFile Click

2. 이미 설치되어있는 Particle Texture 중 하나를 골라 sks확장자인 Particle emitter editor 파일을 생성

이 때 Texture는 기본으로 제공되는 것들을 사용해도 되지만 프로젝트에 추가한 모든 이미지파일을 Texture로 사용할 수 있습니다.

저는 Fire Texture를 선택하여 생성 해보았습니다.

여기서 Texture는 다양한 SpriteKit 객체를 렌더링하는 데 사용할 수 있는 GPU에서 디코딩된 이미지라고 정의되어 있어요.

 

Particle Effect SpriteKit Scene에 추가해주기

위에 보이는것 처럼 editor는 미리보기를 통해 즉각적으로 particle 볼 순 있지만 아직 SpriteKit의 SKView에서 장면을 책임지는 Scene에는 추가되지 않은 상태입니다. Scene에 추가해주어야 빌드했을때 볼 수가 있어요! 

# Scene에 Particle을 추가하는 두 가지 방법
1. Code를 사용 - ReferenceNode(fileNamed:)생성자를 이용해 particle emitter를 참조하는 ReferenceNode를 인스턴스화 하고 Scene의 자식으로 추가
2. SpriteKit Scene Editor에서 Particle emitter file을 가리키는 Reference Node를만들고 Reference 속성에 particle emitter file 선택
    (그럼 Scene이 로드될 때 Paritcle Emitter는 Reference Node의 자식으로 렌더링됩니다.)

말 그대로 Code로 작성하거나 Scene Editor를 이용하던가 하면 됩니다. Auto Layout을 Code로 해도 되고 StoryBoard로 해도 되는것 처럼..

 

근데 우선 저는 프로젝트를 기본템플릿으로 생성해서 Scene이 없어서 Scene Editor file을 생성하고 Scene을 ViewController에서 인스턴스화 해줄게요.

1. New>File>SpriteKit Scene 을 Click! 하여 Scene Editor File 생성

2. main 스토리보드로 가서 rootView의 타입을 UIView에서 SKView로 변경 

(그냥 UIView위에 SKView 만들어서 서브뷰로 추가해줘도 됩니다.)

3. ViewController에서 Scene을 인스턴스화하고 SKView에 Scene을 띄우기

import UIKit
import SpriteKit

class ViewController: UIViewController {

    private let scene = SKScene(fileNamed: "MyScene")
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let skView = self.view as! SKView
        skView.presentScene(scene)
    }
}

이렇게 Scene은 준비 됐으니까 Partice을 참조하는 ReferenceNode를 추가해줄게요.

 

 

1. Scene Editor File Click!

2. 오른쪽 위 라이브러리 버튼(+) 클릭 후 ReferenceNode를 추가해주세요.

3. ReferenceNode를 클릭 후 Attributes inspector영역을 열고 Reference속성에 나타내려는 Particle을 선택해주세요.

위에는 Scene Editor를 이용한거고 다음은 Code를 이용한 방법이에요. 간단합니다!

SKEffectNode(fileNamed:) 생성자를 이용해 인스턴스화해주고 Scene에 자식으로 추가해주는 코드입니다.

let effectNode = SKEffectNode(fileNamed: "MyParticle")
scene?.addChild(effectNode!)

 

위 두가지 방법 중 하나를 이용해 Scene에 추가해주면 이런 결과를 볼 수 있어요. 물론 결과화면은 어떤 Texture를 선택했는지에 따라 다르겠지만요. 저는 Fire입니다!!

 

 

 

---

Particle Emitter Editor 속성 편집

이제 Particle을 Scene에 올리는 방법도 알았으니 Particle Emitter Editor을 편집하는 몇가지 속성들을 알아볼게요.

 

 

Texture

Texture 속성을 변경해 Particle의 모양을 변경할 수 있습니다. 프로젝트와 관련된 모든 이미지를 Particle 텍스처로 사용할 수 있기 때문에 Custom Particle로 사용할 이미지를 프로젝트에 추가 후 선택하셔도 되고 기본 Texture를 사용하셔도 됩니다.
단 Particle의 이미지가 더 크거나 복잡할 수록 많은 오버헤드가 발생한다는 점은 주의해야합니다! 가능한 가장 작고 복잡한 이미지를 사용하라고 권하고 있네요.

 

Particle Color 변경

Particle의 색상 변경 및 다른 이미지와 어떻게 혼합되는지를 결정해주는 속성입니다.

Factor: blend factor의 평균 시작값으로 0.0~1.0의 값을 가지며 기본값은 0.0입니다. 0일 때 Particle의 Color를 무시하고 원본 그대로의 텍스처를 사용한다는 것을 의미하며 반대로 1인 경우엔 Color값이 적용되는 것이라고 보면 됩니다!! 

(Code로는 emitter의 paticleColorBlendFactor속성에 해당)

 

Range: 각 Particle에 대한 시작 색상 혼합의 무작위 분산을 생성하는 범위값이며 기본값은 0.0입니다.

0이 아닌 경우, 각 Particle의 초기 색상 혼합 계수는 무작위로 결정되며 범위 값의 절반을 더하거나 빼서 달라질 수 있습니다.

(Code로는 particleColorBlendFactorRange속성에 해당)

보는바와 같이 0이 아니면 무작위로 Color가 적용되는게 보이네요.

 

Speed: 초당 변화로 측정된 각 Particle의 색상 혼합을 수정하는 속도입니다. 기본값은 0.0입니다.

(Code로는 particleColorBlendFactorSpeed속성에 해당)

Color ramp: 수명 주기 동안 Particle의 색상을 변경하십시오. Particle의 수명 주기 동안 원하는 만큼 많은 색상 변화를 겪게 할 수 있습니다. Particle은 색상 슬라이더 사이의 공간에 따라 색상을 바꾼다.

컬러 램프 필드에서 필드의 아무 곳이나 클릭하여 컬러 램프에 새 색상 슬라이더를 추가하십시오. 즉각적인 색상 변경을 만들려면, 색상 램프에 둘 사이에 공간이 없도록 두 개의 색상 슬라이더를 서로 위에 놓으세요.

 

 

Blend Mode

Blend Mode 속성을 사용하여 각 Particle이 앱의 다른 이미지와 어떻게 혼합되는지 결정할 수 있는 모드입니다.

ColorBlend속성과 우리가 입자요소로 정한 Texture의 색상이 각 픽셀마다 어떻게 혼합될지를 선택하는 모드인거죠..?

이 값은 SKBlandMode 열거형에 해당하며 기본값은 SKBlendMode.alpha 입니다.

 

각 모드에 대해 실험해보기 전에 용어 정리부터 할게요.

소스 색상 : 현재 픽셀의 색상

대상 색상 : 배경이나 다른 객체의 색상

인걸 꼭 알아두고 각 연산은 RGBA 채널에 대한 연산을 수행해요. 무슨말이냐면

대상 색상의 R  - 소스 색상의 R = 결과 속성의 R

대상 색상의 G - 소스 색상의 G = 결과 속성의 G

각 채널마다 연산해서 나온 RGBA가 전체 결과 색상을 이루어요!

 

이해하기 위해 몇가지 실험을 해봤는데 그림과 수식으로 이해해봅시다!!

모든 실험은 명확히 하기 위해 ColorBlend Factor를 1로 주고 실험했어요!  ColorRamp는 파란색(RGBA:0,0,255,255)을 적용했습니다!

 

- Add

결과 색상 = 소스색상 + 대상 색상 이에요.

광원효과에 주로 사용한다고 해요.

 

왼쪽부터 흰색, 검정색, 빨간색 배경입니다.

각각의 더하기 연산으로 설명하자면

파란색 소스 색상과(0,0,255) 흰색 대상 색상(255,255,255) 의 경우 흰색(255,255,255)가 되어서 안보여요.

파란색 소스 색상과(0,0,255) 검정색 대상 색상(0,0,0)의 경우 파란색(0,0,255)가 되어서 파란색으로 나타납니다.

파란색 소스 색상과(0,0,255) 빨간색 대상 색상(255,0,0)의 경우 분홍색(255,0,255)가 되어서 분홍색으로 나타나요.

이렇게 보니까 아주 쉽네요!

 

 

- Subtract

결과색상 = 대상 색상 - 소스 색상의 결과를 가집니다.

주로 빛 효과, 그림자, 혹은 투명한 오브젝트가 서로 겹칠 때의 색상 처리에 사용될 수 있으며 주로 어두워지는 효과를 만들어 내는데 사용합니다.

주로 빛 효과, 그림자, 혹은 투명한 오브젝트가 서로 겹칠 때의 색상 처리에 사용될 수 있습니다. 이 모드는 원래 색상에서 다른 색상을 빼서 어두워지는 효과를 만들어내는 데 유용합니다.

첫 번째는 검정색 배경(0,0,0) - (0,0,255) = 검정색(0,0,0)입니다.

두 번째는 흰색 배경 (255,255,255) - (0,0,255) = 노란색(255,255,0)입니다.

세 번째는 빨간 배경 (255,0,0) - (0,0,255) = 빨간색(255,0,0) 이라서 같은 빨강이라 안보여요..

 

- Multiply

결과 색상 = 소스색상 * 대상색상

그림자 효과, 깊이 효과, 색상 강조 등을 구현하는 데 사용됩니다. 이 모드를 사용하면 대상 색상의 어두운 부분은 소스 색상의 채널 값에 따라 어둡게 되고, 밝은 부분은 소스 색상에 따라 강조될 수 있습니다.

얘는랑 X2는 무슨 배경을해도 검정색이 나오네요.. 여러가지 조합을 해봐도 안나와서.. 이유를 아시는 분..

- Screen

 

- Replace: 소스 색상은 대상 색상을 대체합니다.

 

위 세가지는 추후 더 공부해보고 추가하겠습니다..

 

 

-Alpha

소스와 대상 색상은 소스 알파값을 곱하여 결정되며 BlendMode의 기본값이기도 합니다.

 

아래처럼 알파값을 조정할 수 있는 속성이 존재해요.

Start

각 입자에 적용된 평균 시작 투명도 값입니다. default값은 1.0입니다. 평균이 중요해요!! 아래 존재하는 Range의 범위 내에서 0.8을 평균으로 가지며 무작위 투명도를 가진다. 라고 이해했습니다 저는.. 범위 값의 절반 만큼 더하거나 빼진다고 써있어요!

start가 0.8이고 range가 0.2이면 절반이 0.1이죠? 그니까 0.7~0.9의 Alpha 값이 무작위로 나타난다고 생각하면 됩니다!

 

Range

start값에서 허용하는 무작위 값의 범위이며 기본값은 0.0입니다.

 

Speed

알파값이 변하는 속도를 나타내는 값입니다.

음수이면 점점 투명도해지는 효과이고 양수이면 점점 불투명해지는 효과를 보여줍니다.

즉 0.5일 때는 0.5초마다 알파값이 증가한다고 생각하면 되고

-0.5일 때는 0.5초마다 알파값이 감소한다고 생각하면 됩니다.

왼쪽 결과는  Start:1 Range: 0 의 결과입니다. 평균이 1이고 범위가 0이라 그냥 뚜렷하게 보이넨요! Speed도 0을 줘서 알파값이 변하지 않아 투명해지지도 않네요.

중간 결과는 Start:0 Range: 0 입니다.  무작위 범위도 0 평균도 0 이라 그냥 안보여요.

마지막 결과는 Start: 0 Range: 0.2입니다. 0을 기준으로 0.1이 무작위로 나타나서 조금밖에 안보이네요.

Speed의 결과도 재밌었는데 직접 해보시면 더 좋을 것 같아요!

 

 

 

Background

이건 미리보기의 배경색을 바꿔주는 속성이에요! 아까 대상속성에 따라 색이 바뀌는 모드들이 있기때문에 미리보기 배경도 바꿔보면서 색을 볼때 쓸 수 있을 것 같아요.

 

몇가지  x,y,z 위치나 회전,가속, 사이즈, LfieTime 등 중요한 기능이 있는데 오늘은 시간이 촉박해서 다음 글에서 포스팅 마무리할게요!

틀린점이나, 궁금한점을 같이 이야기나누는거 대환영입니다!!