설모의 기록
[Cocos creator] ParticleSystem 컴포넌트 사용하기 본문
ParticleSystem 이 뭐지?
게임 엔진들은 각각 기본적으로 ParticleSystem 을 제공합니다. Cocos creator 도 마찬가지인데요. 위와 같이 Cocos creator 에는 ParticleSystem 컴포넌트를 추가하실 수 있습니다. 그렇다면 ParticleSystem 이란 무엇일까요?
기본적으로 파티클은 위치가 있고 모양과 행동을 결정하는 여러 프로퍼티를 추가할 수 있는 오브젝트를 말합니다. 그리고 그러한 파티클들을 emitter 를 사용해 방출하는 것을 ParticleSystem 이라고 합니다. 파티클 시스템은 불, 연기, 거품 등 여러 이펙트 효과를 발생시키기 위해 사용됩니다. 근래에는 ParticleSystem 이 적용되지 않은 모바일 또는 웹 게임을 찾기가 힘듭니다. 그만큼 정적인 게임을 화려하게 만들어주는게 ParticleSystem 입니다. 이제 Cocos creator 의 ParticleSystem 컴포넌트 사용법을 알아볼까요?
Cocos creator ParticleSystem 컴포넌트
Cocos creator 에서 ParticleSystem 컴포넌트를 추가해보면 위와 같이 컴포넌트에 다양한 프로퍼티가 존재합니다. 하나하나 용도에 대해 알아보겠습니다.
priview : edit mode 에서 미리보기로 실행할지를 결정하며 boolean 값입니다.
playOnLoad : Scene 이 로드됐을 때 자동으로 실행을 할 것인지 결정하며 boolean 값입니다.
autoRemovedOnFinish : 더 이상 보여줄 파티클들이 남지 않았을 때 노드가 자동으로 삭제될 것인지를 결정하며 boolean 값입니다.
file : plist 파일이며 파티클의 정보가 들어있는 파일을 추가하셔야 합니다.
custom : file 을 추가하지 않고 custom 으로 제작할 것인지를 결정하며 boolean 값입니다. 클릭(true 로 설정)하면 설정할 수 있는 프로퍼티 목록이 뜨게 됩니다. 아래의 프로퍼티들은 custom 프로퍼티를 클릭했을 때 나타나는 프로퍼티 목록입니다.
texture : 각 파티클에 설정할 텍스처 파일이며 custom 을 클릭했다면 필수적으로 텍스처 파일을 추가해야 합니다.
duration : emitter 를 실행할 시간을 설정하는 프로퍼티이며, -1 로 설정할 시 무한 반복됩니다.
emissionRate : emission 속도를 결정하는 프로퍼티입니다.
life : 각 파티클의 생명을 나타냅니다. 즉, 각 파티클들이 화면에 보여서 사라질 때까지의 시간입니다.
lifeVar : life 프로퍼티의 variation 입니다.
totalParticles : ParticleSystem 이 가질 파티클의 최대 갯수를 나타냅니다. 한 번의 방출(1 cycle 당) 에 totalParticles 갯수만큼 파티클이 방출됩니다.
startColor : 파티클들의 시작 컬러입니다.
startColorVar : 시작 컬러의 variation 을 나타냅니다.
endColor : 파티클들이 없어질 때 컬러입니다.
endColorVar : 끝 컬러의 variation 을 나타냅니다.
angle : 파티클들을 방출할 각도를 의미합니다. 오른쪽 수평방향 기준이 0 도 입니다.
angleVar : 각도의 varition 을 나타냅니다. 예를 들어, angle 이 0 이고 angleVar 가 10이면 -10~10 도 사이에 파티클들이 방출됩니다. angleVar 프로퍼티는 Properties 탭 상에서는 angle 프로퍼티의 오른쪽 값입니다.
startSize : 각 파티클들의 시작 크기를 나타냅니다.
startSizeVar : 파티클들의 시작 크기의 variation 을 나타냅니다. 예를 들어, startSize 가 50이고 startSizeVar 가 50 이면 파티클들은 0~100 사이의 시작 크기를 가집니다. angleVar 와 마찬가지로 Properties 탭 상에서는 startSizeVar 프로퍼티의 오른쪽 값입니다.
endSize : 각 파티클들이 사라질 때 크기를 나타냅니다.
endSizeVar : startSizeVar 설명과 동일합니다. 파티클들의 사라질 때 크기의 variation 을 나타냅니다.
startSpin : 각 파티클들의 시작 각도입니다. 예를 들어, 45로 설정하면 particle 들은 방출될 때 45각도로 세팅된 후 방출됩니다.
startSpinVar : startSpin 프로퍼티의 variation 값입니다. 각 파티클들은 (startSpin - startSpinVar) ~ (startSpin + startSpinVar) 사이의 각도를 세팅한 후 방출됩니다.
endSpin : 각 파티클들이 사라질 때의 각도입니다.
endSpinVar : endSpin 프로퍼티의 variation 값입니다. 각 파티클들은 시작하는 각도에서 방출되고 (endSpin - endSpinVar) ~ (endSpin + endSpinVar) 사이의 각도를 향해 회전된 후 사라집니다.
sourcePos : emitter 가 파티클들을 방출할 위치(position) 을 나타냅니다.
posVar : sourcePos 프로퍼티의 variation 을 나타냅니다.
positionType : ParticleSystem.PositionType 으로 총 3가지 값을 가지며 FREE, RELATIVE, GROUPED 입니다. 파티클들의 움직임의 타입을 나타냅니다.
- FREE : 각 파티클들은 월드에 붙어있고, emitter 의 위치가 다시 바껴도 그것에 영향받지 않고 자유롭게 돌아다닙니다.
- RELATIVE : 각 파티클들은 월드에 붙어있고, emitter 의 위치가 다시 바뀌면 그것을 따라 파티클들의 위치가 바뀝니다. 만약 어떤 Sprite 객체의 움직임에 따라 emitter 가 움직이고, 이전에 방출된 파티클들도 따라가길 원한다면 이 타입을 사용하시면 됩니다.
- GROUPED : 각 파티클들은 emitter 에 붙어있고, emitter 를 따라 위치가 바뀝니다.
emitterMode : ParticleSystem.EmitterMode 으로 총 2가지 값을 가지며 GRAVITY, RADIUS 입니다.
- GRAVITY : 파티클들은 중력에 의해 방출되며 speed, radialAccel, tangentialAccel, rotationIsDir 프로퍼티를 사용할 수 있습니다. speed 는 말 그대로 속도 프로퍼티이며 speedVar 프로퍼티도 존재합니다. radialAccel 은 반경 가속도로 radialAccelVar 프로퍼티도 존재합니다. tangentialAccel 은 접선 가속도로 tangentialAccelVar 프로퍼티도 존재합니다. 만약 가속도 프로퍼티의 값이 0이라면 파티클들은 등속도 운동을 합니다. rotationIsDir 프로퍼티는 각 파티클들의 rotation 즉 angle 값이 방향인지를 결정하며 boolean 값입니다.
- RADIUS : 파티클들은 반지름에 따라 움직입니다. RADIUS 모드에서는 startRadius, endRadius, rotatePerS 프로퍼티가 있으며 각각 startRadiusVar, endRadiusVar, rotatePerSVar 프로퍼티도 존재합니다. 예를들어, startRadius 값이 0 이고 endRadius 값이 200 이라면 반지름 0 에서 반지름 200으로 이동하는 것입니다. 즉, 반지름 0인 원은 emitter의 위치를 말하며 반지름 200은 emitter 의 위치를 기준으로 angle 프로퍼티의 값에 따라 그 각도의 반지름 200 원 위의 점으로 이동합니다. 아래는 이 예제를 실행했을 때의 모습입니다.(네모 모양이 텍스처로 각 파티클을 나타내며, 동그라미 톱니바퀴 모양이 emitter 를 나타냅니다.)
위의 프로퍼티들을 잘 사용해 화려한 이펙트를 보여주는 ParticleSystem 을 만들어보시길 바랍니다. :)
'게임엔진 > Cocos creator' 카테고리의 다른 글
[Cocos creator] ray cast 란? (0) | 2018.01.31 |
---|---|
[Cocos creator] Object pool 이란? (0) | 2018.01.27 |
[Cocos creator] GroupManager 사용법 (0) | 2018.01.26 |
[Cocos creator] draw call 이란 (0) | 2018.01.22 |
Cocos Creator + VS Code + TypeScript 개발환경 구축 (0) | 2017.12.19 |