高清与非高清

来源:互联网 发布:怎么移民 知乎 编辑:程序博客网 时间:2024/04/19 19:43

cocos2d-2.0-x-2.0.4中 pDirector->enableRetinaDisplay(true) 已经是默认了。

但是还是可以使用 pDirector->setContentScaleFactor 设置缩放
IOS中,主要可以直接判断屏幕尺寸来判断设备 

CCSize frameSize = CCEGLView::sharedOpenGLView()->getFrameSize();

 设置坐标系

CCEGLView *pView=pDirector->getOpenGLView();

pView->setDesignResolutionSize(480,320,kResolutionNoBorder);

下面是官方原文

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

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

The principle

We have removed all the codes related to enableRetina method since v2.0.4. So Retina disappears since cocos2d-2.0-x-2.0.4. On iOS, if the device supports retina display, we enable it by default.
Therefore, you can get the real screen size by CCEGLView::sharedOpenGLView()->getFrameSize(). For example, the function returns '960x640' for Iphone4S in landscape mode.
But how to use the non-retina coordinates for retina devices? There are two concepts you have to know. One is designResolutionSize, another iscontentScaleFactor.

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. Design resolution is set by CCEGLView::sharedOpenGLView()->setDesignResolutionSize(width, height, policy), the first and second parameters are the width and height of design resoultion and the third parameter is the policy you want to use. I will explain the third parameter later.

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.


 

 

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)

    { 

        CCFileUtils::sharedFileUtils()->setResourceDirectory(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)

    { 

        CCFileUtils::sharedFileUtils()->setResourceDirectory(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

    { 

        CCFileUtils::sharedFileUtils()->setResourceDirectory(smallResource.directory);

        pDirector->setContentScaleFactor(smallResource.size.height/designResolutionSize.height);

    }

    ...................

    ...................

}


contentScaleFactor

ContentScaleFactor describes the ratio from ResourcesSize to designResolutionSize. Normally, it can be set by 'ResourceBackGround.height/DesignResolution.height' or '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. 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()'.
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'.
Your game will be really full screen display if all the coordinates of your game is base on these nine points. 
About how to calculate these points, please refer to 'VisibleRect' class in TestCpp project.


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

Now cocos2d-x supports three different policies.

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.

原创粉丝点击