cocos2d-x 멀티해상도

Cocos2d-x의 멀티 해상도 지원

Cocos2d-x 에서는 2.0.4 버전 이후부터 멀티해상도 지원을 위해

DesignResolutionSize 라는 방식을 제공하고 있습니다.

DesignResolutionSize란, 쉽게 설명하면 '원본'사이즈라고 생각하시면 될 것 같습니다.

EGLView->setDesignResolutionSize(Width, Height, ResolutionPolicy)

이런식으로 DesignResolutionSize를 지정해줄 때

원본 이미지의 Width와 Height, 그리고 ResolutionPolicy를 정해주면

스크린 사이즈에 맞도록 지정된 Policy를 사용해 Cocos2d가 자동적으로 리사이즈를 해줍니다. 

자주 쓰이는 리사이즈 방식으로는 크게 EXACT_FIT, NO_BORDER, SHOW_ALL 세가지가 있습니다. 

(FIXED_HEIGHT, FIXED_WIDTH, UNKNOWN도 있으나 잘 쓰이지는 않는 것 같습니다.)

각 ResolutionPolicy 에 대한 설명입니다.

EXACT_FIT	원본 비율을 유지하지 않고 모든 이미지를 스크린에 출력합니다.  이미지 네 끝을 화면 끝에 맞춰서 리사이즈한다고 생각하시면 됩니다.  따라서 화면과 이미지의 비율이 다를 경우 이미지가 왜곡될 수 있습니다.
NO_BORDER	원본 비율을 유지하고 이미지를 스크린이 가득차게 출력합니다.  이렇게 하기 위해 비율이 짧은 방향의 두 끝을 맞춰서 리사이즈합니다.  따라서 비율이 긴 방향의 양끝은 화면 바깥으로 나갈 수 있습니다.
SHOW_ALL	원본 비율을 유지하고 잘림이 없게 출력합니다.  이렇게 하기 위해 비율이 긴 방향의 두 끝을 맞춰서 리사이즈합니다.  따라서 비율이 짧은 방향의 양끝에 공백이 생길 수 있습니다.

Cocos2d-x 에서 멀티해상도 지원을 목적으로 가장 자주 쓰이는 방식으로

setDesignResolutionSize 라는 방식이 있습니다만,

여러 쓰레드를 보아도 잘 이해가 가질 않아 

직접 테스트해본 결과물로 최대한 보기쉽게 정리해 보았습니다.

(이미지 출력 위치는 스크린의 중점[VisibleSize.Width/2, VisibleSize.Height/2]을 사용했습니다.)

[원본]

960x640 (3:2) 크기의 사진입니다.

이 사진을 480x800의 화면에 각각의 ResolutionPolicy들을 사용해 출력해보겠습니다.

(원본 이미지 주소를 복사해서 새 창으로 띄워놓고 보시면 비교하기 편합니다.)

[DesignResolutionSize 미적용]

setDesignResolutionSize를 적용하지 않고 800x480 화면에 출력한 결과입니다.

원본 이미지의 가로/세로가 모두 크기 때문에, 당연히 상하좌우가 모두 잘린 결과가 나왔습니다.

[DesignResolutionSize: EXACT_FIT]

끝부분을 맞추는 방식이기 때문에 이미지 끝의 잘림은 없지만,

이미지와 스크린의 가로세로 비율이 다르기 때문에 가로로 이미지가 압축된 결과가 나왔습니다.

[DesignResolutionSize: NO_BORDER]

비율이 짧은 방향의 두 끝을 맞추어 리사이즈 하는 방식의 NO_BORDER입니다.

이 경우 세로 양 끝을 맞추었기때문에 남는 가로 부분이 잘린 것을 확인할 수 있습니다.

(잘린 부분을 포함한 가로의 길이는 640/960*800=533>480 정도가 되겠네요.)

[DesignResolutionSize: SHOW_ALL]

이미지의 왜곡과 잘림이 없이 리사이즈하는 SHOW_ALL 방식입니다.

가로 세로 중 비율상 긴 부분인 가로에 맞췄기 때문에 세로 부분에 공백이 있습니다.

공백부분의 길이는 800-(960*[480/640=0.75]) = 800-720 = 80 정도가 되겠네요.

(실제로 상단부분의 여백을 재보았는데 정확하게 40px이었습니다.)

Cocos2d-x의 메뉴얼에 따르면 실제 개발시에는 NO_BORDER를 많이 사용한다고 합니다.

아무래도 비율이 깨지는게 가장 보기 안좋다고 보여지기 때문에 EXACT_FIT을 제외한 두 Policy중의 하나를 사용할 것 같은데, 

프로그램 안정성 차원에서는 왜곡없이 모든 픽셀이 표현되는 SHOW_ALL이 가장 뛰어나겠지만

유저 입장에서 보기에 NO_BORDER 정책이 가장 어플리케이션보다는 기기문제로 보여져서 많이 사용되는게 아닌가 싶기도 합니다.

Cocos2d-x 멀티해상도 원문: http://www.cocos2d-x.org/wiki/Multi_resolution_support