[Cocos Creator Particle System] 1. Particle Editor 사용하기

---

이 글은 PC 버전 TISTORY에 최적화 되어있습니다.

서론

 Cocos Creator의 Particle 시스템은 png 형식의 텍스처와 plist 형식의 메타파일이 필요합니다. 이를 가장 잘 제공해주고 편리한 Particle Editor for Cocos2D를 설치해보도록 하겠습니다.

---

Particle Editor Layout

 Editor는 위와 같이 2개의 메뉴와 Particle이 배치되는 작업 화면으로 구성되어 있습니다. 프로그램 실행 시 자동으로 FireParticle이 생성됩니다. 좌측 메뉴의 Add <Particle Name>을 통해 파티클을 화면에 추가할 수 있습니다. (파티클이 많을 수록 성능이 떨어진다는 것을 유념하세요.) 각각의 파티클을 클릭할 때마다 파티클에 대한 정보가 오른쪽 메뉴에 나옵니다.

왼쪽 메뉴는 다음의 기능을 합니다.

• Main Menu - Particle 생성, 삭제, 리스폰, Export
• Particles - Editor에서 사용할 수 있는 이미 만들어진 Particle Example 목록
• Background - Editor의 배경을 바꿀 수 있게함

오른쪽 메뉴는 Particle들의 속성을 정의할 수 있게 해줍니다. 자세한 설명은 아래에서 다루도록 하겠습니다. 기본적으로 슬라이더를 통해서 속성 값을 변경하는데, 변경사항을 되돌리려면 슬라이더를 두 번 클릭하면 됩니다.

작업 화면의 Particle들은 드래그 하여 아무 곳에나 배치할 수 있습니다. 새로운 Particle을 추가하면 임의의 위치에 만들어집니다.

---

왼쪽 메뉴

Editor 왼쪽 메뉴의 3가지 기능에 대해서 알아보도록 하겠습니다.

Main Menu

Property	기능
Creation Count	작업 화면에 Add를 통해 몇 개의 Particle을 동시에 뿌릴지 지정
Add <Particle Name>	Particle 새로 추가
Save as	다른 이름으로 저장 (Default로 Json 파일로 Export)
Respawn Particles	Duration이 있는 Particle들을 재생성합니다. (지정된 Duration이 지나서 사라진 파티클들에 한에 적용됨)
Remove	All, First, Last 각각 전체 삭제, 첫 번째 추가한 것 삭제, 마지막 추가한 것 삭제
Save to .plist	Cocos Creator에서는 plist 파일이 필요하므로 이 기능을 통해 plist 파일 추출 가능

Particles List

미리 제작된 Particle들을 선택할 수 있음. 선택 후 Main Menu 에서 Add하면 선택한 Particle이 나옵니다.

Particle Effects
						Fire Particle		Fire		Laser
						Smoke Particle		Death Particle		Splatter Particle
Electro Sparks		Boing Star		Implosion
Fire Ball		Warpfield		Fountain
Booster		Leave Storm		Snow
Space Port		Flubber		Expanding Universe
Lightrays		Ghosty Fog		Love
Sculls		Wormhole		Distortion
Exploding Sun		Eye		Comet
Cellshady Tunnel		Galaxy		Jellyfish
Line of stars		Red Lava		Ring

Background

Editor 작업 배경을 바꿀 수 있습니다.

---

오른쪽 메뉴

 Appearance, Color, Emitter Behaviour, Emitter Location, Gravity Mode, Particle Configuration의 기능들을 가지고 있습니다.

Appearance

Particle의 텍스처를 변경해줍니다. 각 플랫폼 마다 다음과 같은 경로에 추가 해주면 텍스처를 Particle에 적용할 수 있습니다.

Platform	DocumentsLocation
Linux	/home/<Username>/Particle Editor for Cocos2d and V-Play/particles
Windows	C:\Users\<Username>\Documents\Particle Editor for Cocos2d and V-Play\particles
macOS	/Users/<Username>/Documents/Particle Editor for Cocos2d and V-Play/particles
MeeGo Harmattan	/home/user/.local/share/data/Particle Editor for Cocos2d and V-Play/particles
Symbian	/Private/e2681898/Particle Editor for Cocos2d and V-Play/particles
iOS	/var/mobile/Applications/<Packagename>/Documents/Particle Editor for Cocos2d and V-Play/particles
Android	/data/data/<Packagename>/files/Particle Editor for Cocos2d and V-Play/particles

 

Particle Configuration

 Particle 은 모바일에서 매우 취약한 성능을 보여주므로 주의해야할 사항이 몇가지 있습니다. Performance에 직접적인 영향이 가는 다음과 같은 속성은 Editor에서 빨간색으로 강조 표시되어집니다. Spin이 들어간 것들은 회전과 관련있고, Variance는 값의 변화도를 지정할 수 있습니다.

• maxParticles: 가장 중요한 속성으로, Particle이 많을 수록 좋아보이지만, 성능은 점점 떨어집니다. 최적의 Particle 개수는 30~60개로 적당히 잘 보이고, 성능도 적당하게 나옵니다. 하지만 Particle 텍스처의 질감에 따라 다릅니다. 또한 색상을 어둡게 만들면 더 많은 양의 파티클을 보여줄 수 있습니다.
• lifespan: 파티클의 지속 시간입니다.
• emissionRate: 파티클의 방출되는 속도입니다. 기본적으로 lifeSpan 값으로 설정되어 있습니다. 이 속성은 대체로 수정할 필요 없이, maxParticle이나, lifespan을 조절하면 됩니다.
• speed: 파티클의 이동속도는 시각적으로 부드러움을 결정짓는 중요한 요소입니다.
• startParticleSize, finishParticleSize: 파티클의 시작, 끝 사이즈 입니다. 크기가 작을수록 성능이 좋아집니다.
• textureFileName: 파티클 텍스처의 크기와 사용된 알파 채널도 중요합니다. 텍스처가 작고, 알파채널이 없으면 성능이 향상됩니다. 

4x4

8x8

16x16

32x32

textureFileName에 명시된 파티클 텍스처는 성능에 결정적인 요소입니다. 용도에 따라 4x4, 8x8, 16x16, 32x32 크기가 적합합니다. 

Emitter Behaviour

이 메뉴는 Particle 동작을 제어합니다. 

각 프로퍼티의 기능은 다음과 같습니다.

Property	기능
Duration	Particle의 지속시간을 나타냄 (Default 0(=Infinite))
Particle Mode	Gravity 모드일지, Radius 모드일지 결정 (0 = Gravity, 1 = Radius) 예를들어 Gravity로 설정할 경우 Radius 설정을 변경해도 아무것도 변화가 없습니다.
Position Type	- Free (0): 부모가 움직일 경우 파티클 Emitter도 동일하게 움직이며, 방출되는 파티클은 부모, Emitter에 영향 받지 않음  - Relative (1): Emitter는 부모와 동일하게 이동, 파티클은 부모 위치에는 영향 받지만 방출되는 것은 Emitter의 움직임에 영향 받지 않습니다.
Visible	Particle 활성화, 비 활성화

Gravity Mode

Particle Mode가 Gravity로 설정된 경우만 중력의 영향을 받습니다.

각 프로퍼티의 기능은 다음과 같습니다.

Property	기능
Gravity	Particle에 적용할 중력의 방향
Radial	방사되는 반지름의 크기
Speed	Emit 방향으로 방출되는 속도
Tangential	방사되는 탄젠셔널 각도의 크기

Radiation Mode

Particle Mode가 Radius로 설정된 경우만 방사 속성의 영향을 받습니다.

각 프로퍼티의 기능은 다음과 같습니다.

Property	기능
Maximal Radius	방사 반지름의 최댓값
Minimal Radius	방사 반지름의 최솟값
Rotation	초당 회전량

Color

Particle의 시작, 끝 색상을 변경하는데 사용됩니다.

Emitter Location

Particle의 Emit 위치를 결정합니다.

---

다음 포스팅은 Cocos Creator에서 적용하는 방법을 정리해보도록 하겠습니다.