COCOS2D-X屏幕适配
2014-08-22 11:52
134 查看
原文地址:http://www.cocos2d-x.org/wiki/Multi_resolution_support
The APIs used in this document are available sincecocos2d-2.0-x-2.0.4.
Multi-resolution support
The principle
designResolutionSize
contentScaleFactor
Policies
Exact fit
No border
Show all
Fixed Height
Fixed Width
External Links
The diverse set of resolutions on Android devices is hard to adaptto. Cocos2d-x offers
your game run on different resolutions with minimal amount ofwork.
We have removed all the codes relatedto
v2.0.4. So Retina disappears since cocos2d-2.0-x-2.0.4. OniOS, if the device supports retina display, we enable it bydefault.
Therefore, you can get the real screen sizeby
example, the function returns '960x640' for Iphone4S inlandscape mode.
But how to use the non-retina coordinates for retina devices? Thereare two concepts you have to know. One isdesignResolutionSize,another
is contentScaleFactor.
All your game's coordinates rely on design resolution no matterwhat the size of your device screen. If the UI layout of your gameis the same on all resolutions, you just need only a set ofcoordinates. Design resolution is set by
You could also use more than one set of resources on differentdevices to make a better display by
but you must set the contentScaleFactor too.
Here are some code snippets in HelloCpp project.
[/code]
[/code]
ContentScaleFactor describes the ratiofrom ResourcesSize to designResolutionSize.Normally,
it can be set by'ResourceBackGround.height/DesignResolution.height' or'ResourceBackGround.width/DesignResolution.width'. To choose whichone is based on your game design.
For illustration below, we use height to calculate thefactor.
Chart 1: ResourceSize
= 960x640 ; Design Resolution Size = 480x320 ; Target DeviceScreen Size = 800x480 ; RH/DH=RW/DW=2.0f; NoBorder Policy
When using NoBorder mode, there are some areas of the backgroud outof scope. If you use absolute coordinates based on designresolution size(480x320),
some of your game UI will not be shown completely. To resolve thisissue, you have to make the coordinates base on 'visiblerectangle'. You can get the origin point of 'visible rectange' by'CCDirector::sharedDirector()->getVisibleOrign()'.
Together with'CCDirector::sharedDirector()->getVisibleSize()',you will beable 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 coordinatesof your game is base on these ninepoints.
About how to calculate these points, please refer to 'VisibleRect'class in TestCpp project.
Chart 2: ResourceSize
= 1024x768 ; Design Resolution Size = 480x320 ; Target DeviceScreen Size = 800x480 ; RH/DH != RW/DW; NoBorder Policy
When RH/DH isn't equal to RW/RH, You should decide to select Widthor Height ratio of resource to design resolution.
In the chart 2, we still use height ratio to calculatecontentScaleFator, so the height of the resource background willfill for the height of design resolution.
Mark① shows two black rectangle will be in designresolution.
After mapping design resolution to screen, Mark① --> Mark②, andMark③ 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 ofwidth.
Now cocos2d-x supports five different policies.
The entire application is visible in the specified area withouttrying to preserve the original aspect ratio. Distortion can occur,and the application may appear stretched or compressed.
The entire application fills the specified area, without distortionbut possibly with some cropping, while maintaining the originalaspect ratio of the application.
The entire application is visible in the specified area withoutdistortion while maintaining the original aspect ratio of theapplication. Borders can appear on two sides of theapplication.
Chart 3: ResourceSize
= 1024x768 ; Design Resolution Size = 480x320 ; Target DeviceScreen Size = 800x480 ; RH/DH != RW/DW; ShowAll Policy
Mark② and Mark③ are both black rectangle areas. But they aredifferent, Mark③ is out of Opengl Viewport, so you can't put anygame elements onto it.
Mark② appears because RW/RH isn'tequal to DW/DH,it's
in the Opengl Viewport, you can place your game elements ontoit.
The width parameter of the design resolution size is ignored andrecalculated based on the height of the design resolution and theaspect ratio of the device.
The entire application is visible without distortion. Howeverdevelopers must make sure that they design their UI to matchdifferent aspect ratios.
Using this resolution policy will give you a different window widthacross devices, the window height is fixed. The visibility rectwill start at 0/0.
As you can see the height of the display stays the same on allpossible device resolutions, only the window width will be adjustedto match the device aspect ratio.
In general you can use this mode like the No Boder mode, but thereis no need to use VisibleRect methods. If you place a sprite at(0/0) it will always
be in the lower left corner of the screen, If you place the spriteat (winSize.width/2, winSize.height/2) it will be in the center ofthe screen.
If you place the spite at (winSize.width/0) it will be at the lowerright border of the screen.
Avaiable since cocos2d-x v2.1rc0-x-2.1.3
This mode works the same as the fixed height mode. The differenceis, that this mode will ignore the height of the design resolutionsize and recalcualte the height depending
on the device aspect ratio.
While the fixed height mode is useful for landscape games, you maywant to prefer this resolution policy for portrait games.
Avaiable since cocos2d-x v2.1rc0-x-2.1.3
You need to use relative coordinates only inNoBorder, FixedHeight and FixedWidth mode. Generally, developeruses NoBorder
mode for better display
TBD
Multi-resolution support
The APIs used in this document are available sincecocos2d-2.0-x-2.0.4.Multi-resolution support
The principle
designResolutionSize
contentScaleFactor
Policies
Exact fit
No border
Show all
Fixed Height
Fixed Width
External Links
The diverse set of resolutions on Android devices is hard to adaptto. Cocos2d-x offers
CCEGLView::setDesignResolutionSize()and
CCDirector::setContentScaleFactor()tohelp
your game run on different resolutions with minimal amount ofwork.
The principle
We have removed all the codes relatedto enableRetinamethodsince
v2.0.4. So Retina disappears since cocos2d-2.0-x-2.0.4. OniOS, if the device supports retina display, we enable it bydefault.
Therefore, you can get the real screen sizeby
CCEGLView::sharedOpenGLView()->getFrameSize().For
example, the function returns '960x640' for Iphone4S inlandscape mode.
But how to use the non-retina coordinates for retina devices? Thereare two concepts you have to know. One isdesignResolutionSize,another
is contentScaleFactor.
designResolutionSize
All your game's coordinates rely on design resolution no matterwhat the size of your device screen. If the UI layout of your gameis the same on all resolutions, you just need only a set ofcoordinates. Design resolution is set byCCEGLView::sharedOpenGLView()->setDesignResolutionSize(width,height, policy), the first and second parameters are thewidth and height of design resoultion and the third parameter isthe policy you want to use. I will explain the third parameterlater.
You could also use more than one set of resources on differentdevices to make a better display by
searchPath.push_back(largeResource.directory);,
but you must set the contentScaleFactor too.
Here are some code snippets in HelloCpp project.
[code] 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
[/code]
[code] 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 searchPath.push_back(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 searchPath.push_back(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 searchPath.push_back(smallResource.directory); 34 pDirector->setContentScaleFactor(smallResource.size.height/designResolutionSize.height); 35 } 36 ................... 37 ................... 38}
[/code]
contentScaleFactor
ContentScaleFactor describes the ratiofrom ResourcesSize to designResolutionSize.Normally,it can be set by'ResourceBackGround.height/DesignResolution.height' or'ResourceBackGround.width/DesignResolution.width'. To choose whichone is based on your game design.
For illustration below, we use height to calculate thefactor.
Chart 1: ResourceSize
= 960x640 ; Design Resolution Size = 480x320 ; Target DeviceScreen Size = 800x480 ; RH/DH=RW/DW=2.0f; NoBorder Policy
When using NoBorder mode, there are some areas of the backgroud outof scope. If you use absolute coordinates based on designresolution size(480x320),
some of your game UI will not be shown completely. To resolve thisissue, you have to make the coordinates base on 'visiblerectangle'. You can get the origin point of 'visible rectange' by'CCDirector::sharedDirector()->getVisibleOrign()'.
Together with'CCDirector::sharedDirector()->getVisibleSize()',you will beable 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 coordinatesof your game is base on these ninepoints.
About how to calculate these points, please refer to 'VisibleRect'class in TestCpp project.
Chart 2: ResourceSize
= 1024x768 ; Design Resolution Size = 480x320 ; Target DeviceScreen Size = 800x480 ; RH/DH != RW/DW; NoBorder Policy
When RH/DH isn't equal to RW/RH, You should decide to select Widthor Height ratio of resource to design resolution.
In the chart 2, we still use height ratio to calculatecontentScaleFator, so the height of the resource background willfill for the height of design resolution.
Mark① shows two black rectangle will be in designresolution.
After mapping design resolution to screen, Mark① --> Mark②, andMark③ 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 ofwidth.
Policies
Now cocos2d-x supports five different policies.
Exact fit
The entire application is visible in the specified area withouttrying 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 distortionbut possibly with some cropping, while maintaining the originalaspect ratio of the application.
Show all
The entire application is visible in the specified area withoutdistortion while maintaining the original aspect ratio of theapplication. Borders can appear on two sides of theapplication.Chart 3: ResourceSize
= 1024x768 ; Design Resolution Size = 480x320 ; Target DeviceScreen Size = 800x480 ; RH/DH != RW/DW; ShowAll Policy
Mark② and Mark③ are both black rectangle areas. But they aredifferent, Mark③ is out of Opengl Viewport, so you can't put anygame elements onto it.
Mark② appears because RW/RH isn'tequal to DW/DH,it's
in the Opengl Viewport, you can place your game elements ontoit.
Fixed Height
The width parameter of the design resolution size is ignored andrecalculated based on the height of the design resolution and theaspect ratio of the device.The entire application is visible without distortion. Howeverdevelopers must make sure that they design their UI to matchdifferent aspect ratios.
Using this resolution policy will give you a different window widthacross devices, the window height is fixed. The visibility rectwill start at 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 allpossible device resolutions, only the window width will be adjustedto match the device aspect ratio.
In general you can use this mode like the No Boder mode, but thereis no need to use VisibleRect methods. If you place a sprite at(0/0) it will always
be in the lower left corner of the screen, If you place the spriteat (winSize.width/2, winSize.height/2) it will be in the center ofthe screen.
If you place the spite at (winSize.width/0) it will be at the lowerright border of the screen.
Avaiable since cocos2d-x v2.1rc0-x-2.1.3
Fixed Width
This mode works the same as the fixed height mode. The differenceis, that this mode will ignore the height of the design resolutionsize and recalcualte the height dependingon the device aspect ratio.
While the fixed height mode is useful for landscape games, you maywant to prefer this resolution policy for portrait games.
Avaiable since cocos2d-x v2.1rc0-x-2.1.3
You need to use relative coordinates only inNoBorder, FixedHeight and FixedWidth mode. Generally, developeruses NoBorder
mode for better display
External Links
TBD
相关文章推荐
- cocos2d-x 屏幕适配 策略
- Cocos2d-x——Cocos2d-x 屏幕适配新解【转载】
- Cocos2d-x 屏幕适配解决方案
- Cocos2d-x屏幕适配之Sprite绘制原理
- Cocos2d-x 3.1 一步步做屏幕适配
- JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
- cocos2d-x屏幕适配总结
- cocos2d-x屏幕适配新解(转)
- Cocos2D-X学习8:屏幕适配
- Cocos2d-x 屏幕适配新解
- Cocos2d-x——Cocos2d-x 屏幕适配新解 – 兼容与扩展【转载】
- cocos2d 3.0 屏幕适配
- Cocos2d-X 3.0以上版本屏幕适配的方法
- cocos2d-js 系列[1] 屏幕的适配
- Cocos2d-x 屏幕适配新解
- cocos2d-x 屏幕分辨率适配方法
- Cocos2d-x 屏幕适配
- cocos2d-x屏幕适配
- Cocos2d-x 屏幕适配新解
- Cocos2d-x 屏幕适配新解