Cocos2d-x Scene 전환 방법

Cocos2d-x를 이용하여 앱 개발 시 Scene 전환 방법에 대해 정리한다. (v3.16 기준)

Scene을 전환하는 방법은 네 가지가 있다.
1. Director::getInstace()->runWithScene(scene);
  - 첫 실행 시 AppDelegate로부터 Scene을 시작할 때 쓰인다.
  - 즉 오직 첫 번째 Scene에만 허용되는 방법이다.
2. Director::getInstace()->replaceScene(scene);
  - 현재 Scene을 새로운 Scene으로 대체한다. 완전히 삭제되어 빠진다.
3. Director::getInstace()->pushScene(scene);
  - 현재 실행 중인 Scene을 중지시키고 그 위에 새로운 Scene을 올린다.
  - 반드시 실행 중인 Scene에서만 호출되어야 한다.
4. Director::getInstace()->popScene(scene);
  - 현재 실행 중인 Scene을 중지시킨 뒤 지우고 이전에 실행됐던 Scene으로 되돌린다.
  - 반드시 실행 중인 Scene에 대해서만 호출되어야 한다.

Scene을 전환할 때 애니메이션을 적용할 수도 있고 안할 수도 있다.
안한다면 위의 1 ~ 4와 같은 호출 형태가 될 것이고,
한다면
Director::getInstance()->replaceScene(TransitionFade::create(time, MyScene::createScene()));
이러한 형태가 될 것이다. 이 때 time은 애니메이션 시간으로, 몇 초에 걸쳐 전환시킬 것인지 정할 수 있다. 실수(Float)로 설정할 수 있다. ex) 0.5 초

Scene을 전환할 때 적용 가능한 애니메이션은 아래와 같다.
- TransitionRotoZoom: 회전하며 줌인되어 등장한다.
- TransitionJumpZoom: 점프하며 줌인되어 등장한다.
- TransitionMoveInL: 왼쪽으로부터 새로운 Scene이 현재 Scene 위로 덮어쓰여진다.
- TransitionMoveInR: 오른쪽으로부터 새로운 Scene이 현재 Scene 위로 덮어쓰여진다.
- TransitionMoveInT: 윗쪽으로부터 새로운 Scene이 현재 Scene 위로 덮어쓰여진다.
- TransitionMoveInB: 아랫쪽으로부터 새로운 Scene이 현재 Scene 위로 덮어쓰여진다.
- TransitionSlideInL: 왼쪽으로부터 새로운 Scene이 현재 Scene을 밀어내며 등장한다.
- TransitionSlideInR: 오른쪽으로부터 새로운 Scene이 현재 Scene을 밀어내며 등장한다.
- TransitionSlideInT: 윗쪽으로부터 새로운 Scene이 현재 Scene을 밀어내며 등장한다.
- TransitionSlideInB: 아랫쪽으로부터 새로운 Scene이 현재 Scene을 밀어내며 등장한다.
- TransitionShrinkGrow: 줄어들었다가 커지며 전환된다.
- TransitionFlipX: X축 회전
- TransitionFlipY: Y축 회전
- TransitionFlipAngular
- TransitionZoomFlipX
- TransitionZoomFlipY
- TransitionZoomFlipAngular
- TransitionFade: 현재 Scene은 흐려지며 사라지고 새로운 Scene이 명확해지며 등장한다.
- TransitionCrossFade
- TransitionTurnOffTiles: 타일 형식으로 현재 Scene이 사라진다.
- TransitionSplitCols: 열들(Columns)이 구분선으로 나오며 전환된다.
- TransitionSplitRows: 행들(Rows)이 구분선으로 나오며 전환된다.
- TransitionFadeTR: Fade 방향을 Gradation처럼 지정한다.
- TransitionFadeBL
- TransitionFadeUp
- TransitionFadeDown
- TransitionPageTurn: 책장을 넘기듯 전환된다.
- TransitionProgressRadialCCW: 시계반대방향으로 시계 침과 같은 축이 돌며 전환된다.
- TransitionProgressRadialCW: 시계방향으로 시계 침과 같은 축이 돌며 전환된다.
- TransitionProgressHorizontal: 수평으로 쓸어내리며 전환된다.
- TransitionProgressVertical: 수직으로 쓸어내리며 전환된다.
- TransitionProgressInOut: 화면 중앙에서 바깥으로 현재 Scene이 사라지며 전환된다.
- TransitionProgressOutIn: 화면 바깥에서 중앙으로 현재 Scene이 사라지며 전환된다.

보다시피 매우 많다. 설명을 정확하게 다 적지는 못하였지만 유추 가능할 것이다.
네 가지 전환 방식과 함께 위의 전환 애니메이션을 사용하여 좌우 또는 위로 나오는 팝업 등을 만들 수도 있는 등 매우 다양하게 사용할 수 있어 유용하다.
예를 들어, 좌측에서 절반만 나와 선택 가능한  메뉴는 투명한 배경의 Scene을 pushScene으로 올리되 TransitionSlideInL을 이용하면 구현할 수 있다.