Multi-resolution support
来源:互联网 发布:浴缸 知乎 编辑:程序博客网 时间:2024/04/30 14:53
Multi-resolution support
The APIs used in this document are available since cocos2d-2.0-x-2.0.4.
- Multi-resolution support
- The principle
- designResolutionSize
- contentScaleFactor
- Policies
- Exact fit
- No border
- Show all
- Fixed Height
- Fixed Width
- The principle
The diverse set of resolutions on Android devices is hard to adapt to. Cocos2d-x offersCCEGLView::setDesignResolutionSize()
and CCDirector::setContentScaleFactor()
to help your game run on different resolutions with minimal amount of work.
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.
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.
But how does one use non-Retina coordinates for Retina devices? There are two concepts you have to know. One isdesignResolutionSize; the other is 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. Design resolution is set usingCCEGLView::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 usingsearchPath.push_back(largeResource.directory);
, in combination with contentScaleFactor.
Here are some code snippets in HelloCpp project.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849typedef 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. 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 five 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(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.
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.
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.
Example:Device Resolution: 800x480pxDesign Resolution: 480x320pxCCDirector Window Origin: 0/0CCDirector Window Size: 534x320pxDevice Resolution: 854x480pxDesign Resolution: 480x320pxCCDirector Window Origin: 0/0CCDirector Window Size: 570x320pxDevice Resolution: 1024x768pxDesign Resolution: 480x320pxCCDirector Window Origin: 0/0CCDirector 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. 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.
If you place the spite at (winSize.width, 0) it will be at the bottom-right corner 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 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.
Avaiable since 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
- Multi-resolution support
- 报错java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/multi
- Multi-Window Support
- Qt multi screen Support
- multi-window support
- 28.Multi-process Support
- Multi-Resolution 多分辨策略示例
- Multi-Resolution 多分辨策略示例
- from program multi language support
- Robust Multi-Resolution Pedestrian Detection in Traffic Scenes(翻译)
- Detailed explanation of Cocos2d-x Multi-resolution adaptation
- RefineNet: Multi-Path Refinement Networks for High-Resolution Semantic Segmentation
- java.lang.NoClassDefFoundError: Failed resolution of: Landroid/support/v7
- NoClassDefFoundError: Failed resolution of: Landroid/support/v7/internal/widget/TintManager
- Failed resolution of: Landroid/support/v7/internal/widget/TintManager
- NoClassDefFoundError:Failed resolution of: Landroid/support/v4/animation/AnimatorCompatHelper
- Make your function support multi args (paras).
- Sysbench with support of multi-tables workload
- 二级指针
- OC整理
- CMEMK Error: Failed to find a pool which fits 622080
- 开源项目网址集合
- UVA 11987——Almost Union-Find(并查集+删除操作)
- Multi-resolution support
- 分支和循环
- HDU 4944 FSF’s game 规律题
- android 修改默认时间为24小时格式
- LeetCode008:Valid Number(正则表达式的运用)
- Unix网络编程:大端模式与小端模式(在计算机上) & 发送数据时 的网络字节序的含义
- 虚拟机使用经验
- SSH与VM链接
- How to Save a Screenshot