Multi-resolution support(since cocos2d-2.0-x-2.0.4)

• Multi-resolution support(since cocos2d-2.0-x-2.0.4)
  • The principle
    • designResolutionSize
    • contentScaleFactor
  • Policies
    • Exact fit
    • No border
    • Show all

안드로이드 기기에서 다양한 해상도를 적용 하기는 어렵다.

Cocos2d-x는 두가지 메서드를 제공한다 CCEGLView::setDesignResolutionSize() 과 CCDirector::setContentScaleFactor() 은 너가 최대한 쉽게 해상도를 변경할수 있게 한다.

The principle

enableRetina 관련 메서드는 v2.0.4. 부터 제거 되었다. On iOS, if thedevice supports retina display, we enable it by default.
Therefore, 너의 실제 스크린 사이즈를 얻기 위해서는 CCEGLView::sharedOpenGLView()->getFrameSize()를 사용해야된다.

예를들어, 이 메서드를 사용하면 아이폰 4s의 가로모드 사이즈는 '960x640'이다.

레티나 장치에 레티나가 아닌 것을 사용 하는 방법은 무엇일까? 

너는 두가지 메서드만 알고 있으면 된다.

하나는 designResolutionSize 이고 다른 하나는 contentScaleFactor 이다.

designResolutionSize

All your game's coordinates rely on design resolution no matter what the size of your device screen. If the UI layout of your game is the same on all resolutions, you just need only a set of coordinates.

디자인 해상도는 설정할수 있다.

CCEGLView::sharedOpenGLView()->setDesignResolutionSize(width, height, policy)

첫번째와 두번째 피라미터 값은 디자인 해상도의 높이와 넓이 이고 세번째 값은 디바이스에 뿌려주는 방식 이다. 

세번째 값에 대해서는 맨 마지막에 설명하겠다.

You could also use more than one set of resources on different devices to make a better display by CCFileUtils::sharedFileUtils()->setResourceDirectory(path_string),
but you must set the contentScaleFactor too.

Here are some code snippets in HelloCpp project.

 1typedef struct tagResource
 2{
 3    cocos2d::CCSize size;
 4    char directory[100];
 5}Resource;
 6
 7static Resource smallResource  =  { cocos2d::CCSizeMake(480, 320),   "iphone" };
 8static Resource mediumResource =  { cocos2d::CCSizeMake(1024, 768),  "ipad"   };
 9static Resource largeResource  =  { cocos2d::CCSizeMake(2048, 1536), "ipadhd" };
10static cocos2d::CCSize designResolutionSize = cocos2d::CCSizeMake(480, 320);
11

 1bool AppDelegate::applicationDidFinishLaunching() {
 2    // initialize director
 3    CCDirector* pDirector = CCDirector::sharedDirector();
 4    CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();
 5
 6    pDirector->setOpenGLView(pEGLView);
 7
 8    // Set the design resolution
 9    pEGLView->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, kResolutionNoBorder);
10
11    CCSize frameSize = pEGLView->getFrameSize();
12
13    // In this demo, we select resource according to the frame's height.
14    // If the resource size is different from design resolution size, you need to set contentScaleFactor.
15    // We use the ratio of resource's height to the height of design resolution,
16    // this can make sure that the resource's height could fit for the height of design resolution.
17
18    // if the frame's height is larger than the height of medium resource size, select large resource.
19    if (frameSize.height > mediumResource.size.height)
20    { 
21        CCFileUtils::sharedFileUtils()->setResourceDirectory(largeResource.directory);
22        pDirector->setContentScaleFactor(largeResource.size.height/designResolutionSize.height);
23    }
24    // if the frame's height is larger than the height of small resource size, select medium resource.
25    else if (frameSize.height > smallResource.size.height)
26    { 
27        CCFileUtils::sharedFileUtils()->setResourceDirectory(mediumResource.directory);
28        pDirector->setContentScaleFactor(mediumResource.size.height/designResolutionSize.height);
29    }
30    // if the frame's height is smaller than the height of medium resource size, select small resource.
31    else
32    { 
33        CCFileUtils::sharedFileUtils()->setResourceDirectory(smallResource.directory);
34        pDirector->setContentScaleFactor(smallResource.size.height/designResolutionSize.height);
35    }
36    ...................
37    ...................
38}

contentScaleFactor

ContentScaleFactor describes the ratio from ResourcesSize to designResolutionSize. 일반적으로 'ResourceBackGround.height/DesignResolution.height' 혹은 'ResourceBackGround.width/DesignResolution.width'. 둘중 하나를 사용하며, 너의 게임에 맞는 방법을 선택하면 된다. 
아래 그림의 경우, 우리는 인자를 계산하기 위해 높이를 사용합니다.

Chart 1: Resource Size = 960x640 ; Design Resolution Size = 480x320 ; Target Device Screen Size = 800x480 ; RH/DH=RW/DW=2.0f; NoBorder Policy

When using NoBorder mode, there are some areas of the backgroud out of scope. If you use absolute coordinates based on design resolution size(480x320),
게임의 UI의 일부는 완전히 표시되지 않습니다. 이 문제를 해결하기 위해서는, 당신은 'visible rectangle'을 기준으로 좌표를 설정해야됩니다.

You can get the origin point of 'visible rectange' by 'CCDirector::sharedDirector()->getVisibleOrign()'.

Together with 'CCDirector::sharedDirector()->getVisibleSize()', 당신은 9개의 점을 화면위에서 확인할수 있다.

'Left','Right', 'Top','Bottom','Center','LeftTop','RightTop','LeftBottom' and 'RightBottom'.

게임의 모든 좌표가이 아홉 포인트에 기반 한 경우 게임은 정말 전체 화면으로 표시 될 것입니다
이러한 점을 계산하는 방법에 대해, TestCpp 프로젝트의 'VisibleRect'클래스를 참조하십시오.

Chart 2: Resource Size = 1024x768 ; Design Resolution Size = 480x320 ; Target Device Screen Size = 800x480 ; RH/DH != RW/DW; NoBorder Policy

When RH/DH isn't equal to RW/RH, You should decide to select Width or Height ratio of resource to design resolution.
In the chart 2, we still use height ratio to calculate contentScaleFator, so the height of the resource background will fill for the height of design resolution.
Mark① shows two black rectangle will be in design resolution.
After mapping design resolution to screen, Mark① --> Mark②, and Mark③ will be out of screen. 
Now, you have two choices to make your game becomes full screen. One is to make your background picture wider.
Another is to set the contentScaleFactor based on the ratio of width.

Policies

지금 cocos2d-x는 세 가지 방식을 지원합니다.

Exact fit

The entire application is visible in the specified area without trying to preserve the original aspect ratio. Distortion can occur, and the application may appear stretched or compressed.

전체 응용 프로그램은 원래 가로 세로 비율을 유지하기 위해 노력하지 않고 지정된 지역에서 볼 수 있습니다. 왜곡이 발생할 수 있으며, 응용 프로그램은 늘어나거나 압축 나타날 수 있습니다.

No border

The entire application fills the specified area, without distortion but possibly with some cropping, while maintaining the original aspect ratio of the application.

응용 프로그램의 원래 가로 세로 비율을 유지하면서 전체 응용 프로그램, 왜곡하지 않고 있지만, 아마도 몇 가지 자르기와 함께 지정된 영역을 채 웁니다.

Show all

The entire application is visible in the specified area without distortion while maintaining the original aspect ratio of the application. Borders can appear on two sides of the application.

응용 프로그램의 원래 가로 세로 비율을 유지하면서 전체 응용 프로그램은 왜곡없이 지정된 영역에 표시됩니다. 국경은 응용 프로그램의 두면에 게재 될 수 있습니다.

Chart 3: Resource Size = 1024x768 ; Design Resolution Size = 480x320 ; Target Device Screen Size = 800x480 ; RH/DH != RW/DW; ShowAll Policy

Mark② and Mark③ are both black rectangle areas. But they are different, Mark③ is out of Opengl Viewport, so you can't put any game elements onto it.
Mark② appears because RW/RH isn't equal to DW/DH, it's in the Opengl Viewport， you can place your game elements onto it.

• You need to use relative coordinates only in NoBorder mode. Generally, developer uses NoBorder mode for better display