'2015/04/15'에 해당되는 글 1건

2015.04.15 cocos2d-x 멀티해상도 관련.

cocos2d-x 멀티해상도 관련.

| cocos2d-x 2015. 4. 15. 10:09

Posted by 히아레인

Multi-resolution support

다중해상도지원

The APIs used in this document are available since cocos2d-2.0-x-2.0.4.

이 문서에 사용 된 API는적인 Cocos2D-2.0-X-2.0.4부터 사용할 수 있습니다.

The diverse set of resolutions on Android devices is hard to adapt to. Cocos2d-x offers CCEGLView::setDesignResolutionSize() and CCDirector::setContentScaleFactor() to help your game run on different resolutions with minimal amount of work.

안드로이드 장치에 해상도의 다양한 세트에 적응하기 어렵다. Cocos2D는-X 서로 다른 해상도에서 게임 실행을 돕기 위해 CCEGLView :: setDesignResolutionSize()와 CCDirector :: setContentScaleFactor ()를 제공합니다.

The principle

원리

We have removed all the code related to enableRetina method since v2.0.4. On iOS, if the device supports Retina display, we enable it by default.

우리는 2.0.4 버전 이후에 enableRetina 관련된 모든 코드를 제거했습니다.
아이폰 OS에서 장치는 레티나 디스플레이를 지원하는 경우, 우리는 디폴트로 사용할 수 있습니다.

You can get the real screen size in pixels with CCEGLView::sharedOpenGLView()->getFrameSize(). For example, the function returns ‘960x640’ for iPhone 4S in landscape mode.

당신은 CCEGLView::sharedOpenGLView()->getFrameSize() 함수를 사용하여 픽셀의 실제 화면 크기를 얻을 수 있습니다.
예를 들어, 가로 모드에서는 아이폰 4S의 경우 '960x640' 값이 반환됩니다.

But how does one use non-Retina coordinates for Retina devices? There are two concepts you have to know. One is designResolutionSize; the other is contentScaleFactor.

레티나 디바이스에서 레티나가 아닌 좌표를 어떻게 사용하는가? 두가지 방법이 있습니다. 한가지 방법은 designResolutionSize이고 다른 방법은
contentScaleFactor 이다.

designResolutionSize

All of your game’s coordinates are based 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 only need a single set of coordinates.

게임의 모든 좌표는 디바이스 화면의 크기와 상관없이 디자인 해상도 기준으로 합니다. 만약 게임의 UI 레이아웃은 모든 해상도에서 동일한 경우, 좌표의 단일 세트가 필요합니다

Design resolution is set using CCEGLView::sharedOpenGLView()->setDesignResolutionSize(width, height, policy)

디자인 해상도는 CCEGLView::sharedOpenGLView()->setDesignResolutionSize(width, height, policy)를 사용하여 설정합니다.

The first and second parameters are the width and height of design resolution, and the third parameter is the resizing policy you want to use. I will explain the third parameter later.

첫 번째와 두 번째 매개 변수는 폭과 디자인 해상도의 높이, 그리고 세 번째 매개 변수는 사용할 크기 조정 정책입니다. 나중에 세 번째 매개 변수를 설명합니다.

Additionally, you can use more than one set of resources for different devices, to make the best use of each device’s display. This is achieved by using searchPath.push_back(largeResource.directory);, in combination with contentScaleFactor.

또한 각 디바이스의 디스플레이의 활용을 극대화하기 위해, 다른 장치의 리소스의 하나 이상의 세트를 사용할 수있다. 이것은 contentScaleFactor과 searchPath.push_back(largeResource.directory)의 조합함으로써 사용할수 있다.

Here are some code snippets in HelloCpp project.

여기 HelloCpp 프로젝트의 일부 코드 조각입니다.

typedef struct tagResource
    {
        cocos2d::CCSize size;
        char directory[100];
    }Resource;

static Resource smallResource  =  { cocos2d::CCSizeMake(480, 320),   "iphone" };
    static Resource mediumResource =  { cocos2d::CCSizeMake(1024, 768),  "ipad"   };
    static Resource largeResource  =  { cocos2d::CCSizeMake(2048, 1536), "ipadhd" };
    static cocos2d::CCSize designResolutionSize = cocos2d::CCSizeMake(480, 320);

bool AppDelegate::applicationDidFinishLaunching() {
        // initialize director
        CCDirector* pDirector = CCDirector::sharedDirector();
        CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();

pDirector->setOpenGLView(pEGLView);

// Set the design resolution
        pEGLView->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, kResolutionNoBorder);

CCSize frameSize = pEGLView->getFrameSize();

// In this demo, we select resource according to the frame's height.
        // If the resource size is different from design resolution size, you need to set contentScaleFactor.
        // We use the ratio of resource's height to the height of design resolution,
        // this can make sure that the resource's height could fit for the height of design resolution.

// if the frame's height is larger than the height of medium resource size, select large resource.
        if (frameSize.height > mediumResource.size.height)
        { 
            searchPath.push_back(largeResource.directory);
            pDirector->setContentScaleFactor(largeResource.size.height/designResolutionSize.height);
        }
        // if the frame's height is larger than the height of small resource size, select medium resource.
        else if (frameSize.height > smallResource.size.height)
        { 
            searchPath.push_back(mediumResource.directory);
            pDirector->setContentScaleFactor(mediumResource.size.height/designResolutionSize.height);
        }
        // if the frame's height is smaller than the height of medium resource size, select small resource.
        else
        { 
            searchPath.push_back(smallResource.directory);
            pDirector->setContentScaleFactor(smallResource.size.height/designResolutionSize.height);
        }
        ...................
        ...................
    }

contentScaleFactor

ContentScaleFactor describes the ratio from ResourcesSize to designResolutionSize.

ContentScaleFactor는 ResourcesSize와 designResolutionSize의 비율로 설명할 수 잇습니다.

Normally, it can be set by ‘ResourceBackGround.height/DesignResolution.height’ or ‘ResourceBackGround.width/DesignResolution.width’.

일반적으로 이것은 'ResourceBackGround.height/DesignResolution.height' 혹은 '‘ResourceBackGround.width/DesignResolution.width’

을 사용하여 설정한다.

To choose which one is based on your game design.

너의 게임 디자인을 기반으로하는 하나를 선택합니다.

For illustration below, we use height to calculate the factor.

아래 그림의 경우, 우리는 인자를 계산하기 위해 높이를 사용한다.

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), some of your game UI will not be shown completely.

NoBorder mode를 사용할때, 범위를 벗어나는 배경의 일부 영역이 있습니다.
당신이 디자인 해상도 크기 (480X320)를 기반으로 절대 좌표를 사용하는 경우, 게임 UI의 일부는 완전히 표시되지 않습니다.

To resolve this issue, you have to make the coordinates base on ‘visible rectangle’. You can get the origin point of ‘visible rectange’ by ‘CCDirector::sharedDirector()->getVisibleOrign()’.

이 문제를 해결하려면, 당신은 'visible rectangle'을 기준으로 좌표를 만들어야합니다.

당신은 ‘CCDirector::sharedDirector()->getVisibleOrign()’ 을 사용하여 'visible rectangle'의 원점을 얻을수 있습니다.

Together with ‘CCDirector::sharedDirector()->getVisibleSize()’,you will be able to confirm 9 points on the screen. They are ‘Left’,‘Right’, ‘Top’,‘Bottom’,‘Center’,‘LeftTop’,‘RightTop’,‘LeftBottom’ and ‘RightBottom’.

‘CCDirector::sharedDirector()->getVisibleSize()’와 ‘CCDirector::sharedDirector()->getVisibleOrign()’을 같이 사용한다면, 화면의 9개의 점을 확인 할수 잇습니다. ‘Left’,‘Right’, ‘Top’,‘Bottom’,‘Center’,‘LeftTop’,‘RightTop’,‘LeftBottom’ 그리고 ‘RightBottom’ 등을.

Your game will be really full screen display if all the coordinates of your game is base on these nine points.

게임의 모든 좌표가 9 개 수치를 기반으로하는 경우 귀하의 게임은 정말 전체 화면으로 표시 될 것입니다.

About how to calculate these points, please refer to ‘VisibleRect’ class in TestCpp project.

이러한 점을 계산하는 방법에 대한, TestCpp 프로젝트 '가시 RECT'클래스를 참조하십시오.

추가 설명.

왼쪽 상단의 그림은 iphone4의 960x640 해상도이고, 오른쪽 상단은 갤럭시 s2등의 해상도인 800x480입니다.

그러므로 우리가 적용한 공식으로 적용하면 800x480의 해상도에는 1번 공간이 잘리게 됩니다.

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.

RH / DH는 RW / RH 동일하지 않은 경우, 당신은 해상도를 설계하는 리소스의 너비 또는 높이 비율을 선택하여 결정해야합니다.

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.

표 2에서, 여전히 리소스 배경의 높이가 디자인 해상도의 높이를 채울 수 있도록, contentScaleFactor를 높이 비율을 사용하여 계산합니다.

Mark① shows two black rectangle will be in design resolution.

Mark①은 두 개의 검은 색 사각형을 디자인 해상도에서 보여집니다.

After mapping design resolution to screen, Mark① --> Mark②, and Mark③ will be out of screen.

디자인 해상도를 스크린에 매핑한 후, Mark①는 -> Mark② 및 Mark③ 화면의 주요 요인이 될 수 있습니다.

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.

또 다른 방법은 너비의 비율에 기초하여 contentScaleFactor를 설정하는 것이다.

추가 설명

아이패드는 아이폰 해상도로 맞추었기 때문에 1번 공간이 비게 되어 검은 부분으로 표시됩니다. 이때 갤럭시 s2의 800x480 해상도라면 2번부븐은 비어서 검은 부분이 되고 3번 부분은 잘려서 표시됩니다.

Policies

Now cocos2d-x supports five different 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② 및 Mark③은 모두 검은 색 사각형 영역입니다. 그러나 그들은 다릅니다. Mark③는 OpenGL 뷰포트의 밖의 영역이라 당신은 어떤 게임 요소를 넣어 수 없습니다

Mark② appears because RW/RH(1024÷768=1.333) isn’t equal to DW/DH(480÷320=1.5), it’s in the Opengl Viewport， you can place your game elements onto it.

Mark②는 OpenGL 뷰포트 영역 안에 있으며(RW/RH(1024÷768=1.333)와 DW/DH(480÷320=1.5)가 일치하지 않아서 나타나는 현상), 당신은 당신의 게임 요소를 배치 할 수 있습니다.

추가 설명

2번 부분과 3번 부분은 보이기엔 같은 검ㅇ느색 부분이지만 실제로는 틀립니다.

3번 부분은 Opengl Viewport를 벗어난 범위로, 게임 오브젝트를 그곳에 배치할수 없습니다

2번 부분은 같은 검은색 부분이지만 Opengl Viewport이므로 오브젝트를 배치할수 있습니다.

Fixed Height

The width parameter of the design resolution size is ignored and recalculated based on the height of the design resolution and the aspect ratio of the device.

디자인 해상도 크기의 폭 파라미터는 무시하고 디자인 해상도 및 디바이스의 종횡비의 높이에 기초하여 계산된다.

The entire application is visible without distortion. However developers must make sure that they design their UI to match different aspect ratios.

왜곡없이 전체 응용 프로그램을 볼 수 있습니다. 그러나 개발자들은 다른 종횡비에 맞게 자신의 UI를 설계 있는지 확인해야합니다.

Using this resolution policy will give you a different window width across devices, the window height is fixed. The visibility rect will start at 0/0.

이 해결 정책을 사용하여 당신에게 디바이스에서 다른 창 폭을 줄 것이다, 창 높이가 고정되어 있습니다. visibility rect는 0/0에서 시작됩니다.

Example:
Device Resolution: 800x480px
Design Resolution: 480x320px
CCDirector Window Origin: 0/0
CCDirector Window Size: 534x320px

Device Resolution: 854x480px
Design Resolution: 480x320px
CCDirector Window Origin: 0/0
CCDirector Window Size: 570x320px

Device Resolution: 1024x768px
Design Resolution: 480x320px
CCDirector Window Origin: 0/0
CCDirector Window Size: 427x320px

As you can see the height of the display stays the same on all possible device resolutions, only the window width will be adjusted to match the device aspect ratio.

만약 표시 장치의 높이가 가능한 모든 단말기에서 동일한 해상도를 유지 볼 수 있듯이, 전용 윈도우 폭은 장치의 종횡비와 일치하도록 조정한다.

In general you can use this mode like the No Boder mode, but there is no need to use VisibleRect methods.

일반적으로는 테두리 모드 등이 모드를 사용할 수 있지만,이 visibleRect 방법을 사용할 필요가 없다.

If you place a sprite at (0/0) it will always
be in the lower left corner of the screen, If you place the sprite at (winSize.width/2, winSize.height/2) it will be in the center of the screen.

당신이 (0/0)에서 스프라이트를 배치하면 항상 것
만약에 스프라이트 배치 할 경우, 화면의 왼쪽 아래 구석에 (winSize.width / 2, winSize.height / 2)은이를 화면의 중앙에있을 것이다.

If you place the spite at (winSize.width, 0) it will be at the bottom-right corner of the screen.

만약 당신이 sprite을 (winSize.width, 0)에 비치하면 화면의 오른쪽 아래에있을 것입니다.

Fixed Width

This mode works the same as the fixed height mode. The difference is, that this mode will ignore the height of the design resolution size and recalcualte the height depending
on the device aspect ratio.

이 모드는 고정 된 높이 모드와 동일하게 작동합니다. 이 모드는 설계 해상도 크기의 높이를 무시하고 장치 종횡비에 따라 높이를 계산하는 것이 차이입니다.

While the fixed height mode is useful for landscape games, you may want to prefer this resolution policy for portrait games.

가로 게임에는 fixed heigh가 유용하지만 , 만약 너가 세로 게임을 만든다면 이 정책이 유용할수 있습니다.

Avaiable since cocos2d-x v2.1rc0-x-2.1.3

Cocos2D-X v2.1rc0-X-2.1.3 이후 사용가능하다.

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

당신은 테두리, 고정 높이 및 너비가 고정 모드에서 상대 좌표를 사용할 필요가있다. 일반적으로 개발자는 더 나은 디스플레이를 위해 NoBorder 모드를 사용합니다

저작자표시

'cocos2d-x' 카테고리의 다른 글

cocos2d-x 멀티해상도 관련. (0)	2015.04.15
cocos2d-x 일본 github 소스 (0)	2015.01.27
cocos2d-x 프로그래밍 가이드 3.3 (0)	2014.12.08
cocos2d-x tileMap 적용하기. (0)	2014.10.21
error C4335: Mac 파일 형식이 발견되었습니다. 소스 파일을 DOS나 UNIX 형식으로 변환하십시오. (0)	2014.10.11
ndk 다운로드 이전 버전 받기 (0)	2014.09.16