[cocos2d-x]#6 다앙햔 Node들을 알아보자.

 

우리는 지난 2시간에 걸쳐 cocos2dx에서 지원해주는 모든 UI들을 알아봤다.

오늘은 cocos2dx에서 지원해주는 다양한 nodeType을 알아보도록 하자.

 

 

TileMap

유니티에도 Tilemap이 있는것처럼 cocos2dx에서도 TileMap을 쉽게 만들어서 사용할수 있다.

auto tilemap = TMXTiledMap::create("Tilemap.tmx");

 

TMXTileMap은 Cocos2d-x에서 타일 기반 맵을 구현하기 위해 사용되는 클래스이다.

Tiled 라는 프로그램으로 만든 .tmx 파일을 게임에서 불러와 사용할 수 있게 해준다.

 

Tiled라는 외부 Editor에 대한 사용법은 다음 글에서 쓰도록 하겠다.

 

Tiled에서 맵을 만들고 정상적으로 빌드를 했다면 .tmx파일과 .tsx파일이 있을텐데 두개의 파일모두 Resource폴더에 넣어주어야 한다.

그리고 사용한 타일의 원본 이미지도 같이 넣어주어야 한다.

 

이 세개의 파일이 Resource폴더에 정상적으로 들어가 있어야 한다.

auto map = TMXTiledMap::create("TileMap.tmx");
map->setScale(visibleSize.width / map->getContentSize().width);
map->setAnchorPoint({0.5f,0.5f});
map->setPosition({ centerPos.x , centerPos.y + 20});
addChild(map);

 

이렇게 해서 타일맵을 화면 사이즈에 맞출수도 있다.

 

그리고 가끔씩 TileMap을 만들때 오류가 뜨는데 나도 이유를 찾을수 없었다.

그냥 TileMap파일들(.tmx , .tsx)을 지웠다가 다시 넣으니깐 정상 작동하긴 했다..

이런식으로 정상적으로 나오면 성공이다.

 

 

그리고 가끔씩 타일이 깨지는 경우가 있었는데 다음 글에서 해결법을 찾을수 있었다.

https://discourse.mapeditor.org/t/tiled-map-editor-seems-to-not-load-properly-with-cocos2d-x-4/6267

Tiled Map Editor seems to not load properly with Cocos2d-x-4

현재 Cocos2d-x 4.xx 버전에서는 CSV 형식으로 압축된 파일을 사용할 경우 오류가 발생할 수 있다.

이를 해결하려면 Tiled에서 프로젝트를 생성할 때 데이터 압축 형식을 Base64(zlib) 또는 Base64(gzip)으로 설정해야 한다.

이 설정은 Tiled의 Map Properties에서 Tile Layer Format 옵션을 통해 변경할 수 있다.

 

Particle

cocos2dx에서는 내가 원하는 파티클을 만들기 위해서는 외부툴들을 사용하는 편이 많다.

 

http://www.effecthub.com/particle2dx

EffectHub Cocos2dx Particle Effect Editor

위 사이트를 이용하면 웹에서 아주 간단하게 cocos2dx전용 파티클을 만들수 있다.

 

아니면 cocos2dx에서 지원해주는 내장 파티클들을 사용할수도 있다.

-ParticleFire: Point particle system. Uses Gravity mode.

-ParticleFireworks: Point particle system. Uses Gravity mode.

-ParticleSun: Point particle system. Uses Gravity mode.

-ParticleGalaxy: Point particle system. Uses Gravity mode.

-ParticleFlower: Point particle system. Uses Gravity mode.

-ParticleMeteor: Point particle system. Uses Gravity mode.

-ParticleSpiral: Point particle system. Uses Gravity mode.

-ParticleExplosion: Point particle system. Uses Gravity mode.

-ParticleSmoke: Point particle system. Uses Gravity mode.

-ParticleSnow: Point particle system. Uses Gravity mode.

-ParticleRain: Point particle system. Uses Gravity mode.

 

다음이 cocos2dx에서 지원하는 내장 파티클들이다.

일반적인 Node만드는것처럼 Create()해서 만들면 된다.

 auto particle = ParticleFireworks::create();
 addChild(particle);

 

정말 간단하지 않은가?!

 

Unity의 Particle System처럼 모듈화가 잘 되어 있기 때문에 내가 원하는 파티클을 손 쉽게 만들수 있다.

auto particle = ParticleFireworks::create();
particle->setEmitterMode(ParticleSystem::Mode::RADIUS);
particle->setStartRadius(100);
particle->setStartRadiusVar(0);
particle->setEndRadius(ParticleSystem::START_RADIUS_EQUAL_TO_END_RADIUS);
particle->setEndRadiusVar(0);   

addChild(particle);

이렇게 하면 새로운 효과를 만들수도 있다.

 

Parallax

Parallax가 내장으로 구현되어 있다는것에서 조금 놀랐다.

유니티에서는 직접 구현했어야 했는데 말이다.

 

Parallax가 뭔지 모르는 사람을 위해 간단하게 설명하자면

Parallax 효과로 인해, 화면에서 플레이어와 가장 가까운 레이어(앞쪽 산)가 가장 큰 폭으로 움직이고, 가장 멀리 있는 레이어(뒤쪽 산)는 가장 작은 폭으로 움직인다.이러한 레이어별 움직임의 차이가 Parallax효과를 적용한 예라고 할수 있다.

 

다시말해

앞쪽 산 = 플레이어와 가까움 → 큰 폭으로 움직임

뒤쪽 산 = 플레이어와 멀음 → 작은 폭으로 움직임

 

이렇게 각 레이어가 다른 속도로 움직이면서 게임이나 웹사이트에 입체감을 더해주는 것이 Parallax 효과의 핵심이다.

 

Cocos2dx에서는 이를 내장으로 만들어 두었기 때문에 손 쉽게 사용할수 있다.

auto paraNode = ParallaxNode::create();

paraNode->addChild(background, -1, Vec2(0.4f,0.5f), Vec2::ZERO);

paraNode->addChild(middle_layer, 1, Vec2(2.2f,1.0f), Vec2(0,-200) );

paraNode->addChild(top_layer, 2, Vec2(3.0f,2.5f), Vec2(200,800) );

이렇게 parallaxNode를 하나 만들고 거기에 Node들을 등록 시켜주면 된다.

paranode->addChild()를 할때 매개변수가 여러갠데 순서대로 z-order와 비율과 오프셋이이다.

 

비율은 카메라에 얼마나 이동을 얼마나 반영할지에 대한 비율이다.

만약 비율이1이면 카메라와 동일한 속도를 움직이지만 0.1이면 1/10속도 만큼 움직인다.

오프셋은 초기 위치이다.

 

 

오늘은 여러가지 타입의 Node들을 알아보았다.

다음시간에는 Cocos2dx에서 Event들을 어떻게 처리하는지 알아보도록 하겠다.

 

좋은 하루 보내라.