adsense



cocos2d-x v3.x Multi Resolution

안드로이드는 물론이고 이젠 iOS도 별별 해상도가 나와있는지라, 어떻게 하면 각 해상도에 대응하는 앱을 만들 수 있을 것인가,

여기서는 cocos2d-x 한정이니까 게임을 가정해서 얘기하는 겁니다만.

구글 검색해보면 enableRetina 옵션이랑 해상도 별로 리소스를 따로 만들어서~같은 얘기가 나옵니다만, 실전에서는 디자인 해상도(Design Resolution) 하나를 지정, 고정해서 만들고, 디자인 해상도보다 크면 늘려서 작으면 줄여서 (Stretch) 한 종류 리소스로 모든 해상도에 대응하도록 만들고 있습니다.

그걸 위해서 cocos2d-x v3.x부터는 enableRetina 옵션이 아예 사라졌고 (기존에도 존재하지만 사실상 안 썼습니다.. cocos2d-x 소스 하나로 iOS 뿐 아니라 안드로이드도 대응하도록 하는데 enableRetina옵션은 iOS에서나 의미있는거고 iOS에서도 리소스를 해상도별로 중복해서 갖고 있으면 낭비이므로) setDesignResolutionSize를 사용해 디자인 해상도를 지정하도록 합니다.

이때 옵션으로 ResolutionPolicy값을 주는데, 이 값에 따라서 제각기 다른 비율의 화면과 디자인 해상도를 맞추게 됩니다.

AppDelegate.cpp를 아래를 참고해 코딩합니다.
  1. #define DESIGN_WIDTH 480
  2. #define DESIGN_HEIGHT 800
  3.  
  4. (중략)
  5.  
  6. bool AppDelegate::applicationDidFinishLaunching() {
  7.  
  8.     // initialize director
  9.     auto director = Director::getInstance();
  10.     auto glview = director->getOpenGLView();
  11.     if(!glview) {
  12.         glview = GLView::create("V3.2 Study");
  13.         director->setOpenGLView(glview);
  14.     }
  15.  
  16. #if (CC_TARGET_PLATFORM == CC_PLATFORM_WIN32)
  17.         glview->setFrameSize(480,640);//window size
  18. #endif
  19.         glview->setDesignResolutionSize(DESIGN_WIDTH, DESIGN_HEIGHT, ResolutionPolicy::SHOW_ALL);

위 소스에서 붉은색 바탕 부분이 화면에 디자인 해상도를 어떻게 나타낼 것인가 하는 옵션입니다.
디자인 해상도는 480*800으로, 안드로이드 게임의 표준과 같은 해상도입니다(..만, 요즘은 560*960같은 것도 좀 쓰고, 다소는 고해상도화 되어가는 느낌).

해당 옵션을 각 화면비에 따라 서로 다르게 주면 아래와 같은 결과를 확인할 수 있습니다.

3대 4 화면에 적용시킨 예 (디자인 해상도보다 가로비가 크다)
3대4 - EXACT_FIT
3대4 -
FIXED_WIDTH
3대4 - FIXED_HEIGHT
3대4 -
NO_BORDER
3대4 -
SHOW_ALL

1대 2 화면에 적용시킨 예 (디자인 해상도보다 세로비가 크다)
1대2 -
EXACT_FIT
1대2 -
FIXED_WIDTH
1대2 -
FIXED_HEIGHT
1대2 -
NO_BORDER
1대2 -
SHOW_ALL

참고로 UNKNOWN은 에러를 뱉습니다.
UNKNOWN


각 속성은 다음과 같은 역할을 합니다.

EXACT_FIT : 가로 세로에 별도의 ratio를 줘서 맞춘다. design resolution과 화면비가 다르면 그림이 찌그러진다.
NO_BORDER : 가로나 세로 어느 한 쪽을 기준으로, 레터박스가 없도록 자동으로 맞춘다.
FIXED_WIDTH : 가로 비율을 프레임 사이즈에 맞춘 비율로 나타낸다. 조정된 상하가 넘칠 경우 잘리고 모자랄 경우 위쪽으로 레터박스가 남는다.
FIXED_HEIGHT : 세로 비율을 프레임 사이즈에 맞춘 비율로 나타낸다. 좌우가 넘칠 경우 잘리고 모자랄 경우 오른쪽으로 레터박스가 남는다.
SHOW_ALL : 화면이 잘리지 않고 프레임 사이즈 안에 모두 들어온다. 모자란 부분은 레터박스로 남으며 작업영역은 중앙정렬된다.
UNKNOWN : ㅋㅋㅋ

좀 더 보기 쉽게 정리해보면..
  1. 속성                  기준 비율           레터박스            중앙정렬            레터박스 클리핑          화면 잘림           화면 찌그러짐
  2. EXACT_FIT       가로 세로 별도        X                       -                        -                               X                       O
  3. NO_BORDER       비율이 큰 쪽         X                       O                       -                               O                       X
  4. FIXED_WIDTH     가로비                  O                       X                       X                               O                       X
  5. FIXED_HEIGHT    세로비                 O                       X                       X                               O                       X
  6. SHOW_ALL        비율이 작은 쪽       O                       O                       O                               X                       X

대충 이렇게 될려나요.

실제 적용시에는 다음과 같이 필요에 따라 고르면 되겠습니다.
: 화면이 찌그러지더라도 화면을 가득 채우겠다 : EXACT_FIT
: 화면이 찌그러지는 것은 싫으나 일부가 잘리는 것을 감수하더라도 화면을 가득 채우겠다 : NO_BORDER
: 화면이 찌그러지는 것도 싫고 잘리는 것도 싫은 대신 레터박스를 감수한다 : SHOW_ALL

개인적으로 사용하는 것은 SHOW_ALL 입니다.
NO_BORDER를 쓰면 3:4 화면비의 장비에서 잘려나가는 부분이 너무 많아 이걸 고려한 UI 설계가 어렵고,
EXACT_FIT은 이미지 찌그러짐이 생기기 때문에 논외인지라,

디자인 해상도를 10:16이나 9:16 정도로 맞추고 SHOW_ALL 하면, 와이드가 대세인 현 스마트폰 환경에서는 레터박스에 의한 화면 로스를 최소로 하면서 모든 내용을 화면에 표시할 수 있습니다. 굳이 말하자면 개발할 때 제일 신경 안써도 된다는 겁니다..



덧글

  • 2014/08/26 20:19 # 삭제 답글 비공개

    비공개 덧글입니다.
  • 펭귄대왕 2014/08/27 03:34 #

    혹시
    if(!glview) {
    ...
    }
    안쪽에 setDesignResolutionSize가 있는지 보시고 그렇다면 if문 아래로 꺼내놓으면 됩니다.

    제가 시간이 불규칙하고 메신저를 좋아하지 않아서 친추는 죄송하지만..
댓글 입력 영역


Books

Geek라이프

메가 드라이브 퍼펙트 카탈로그
마에다 히로유키 저/조기현 역

미소녀 일러스트 테크닉
B-은하, pen스케, 카와이 저/정유진 역

핵심강좌! Cocos2d-x
이재환 저

피규어의 교과서 레진 키트 & 도색 입문 편
후지타 시게토시 저/김정규 역
예스24 | 애드온2
일본서적 전문사이트 NEPIC