[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의 배경을 바꿀 수 있게함
왼쪽 메뉴
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: 파티클 텍스처의 크기와 사용된 알파 채널도 중요합니다. 텍스처가 작고, 알파채널이 없으면 성능이 향상됩니다.
16x16
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에서 적용하는 방법을 정리해보도록 하겠습니다.