@H_502_1@其实这个话题应该是从第一天接触cocos就会碰到的问题,我始终没能完全理解那些文章的意思,只是大概知道是怎么回事,仅此而已,智商捉急呀!!今天也是花了很长的时间去理解,现在总算有点眉目了,就把它记录下来,以后可以常回顾一下。
@H_502_1@不废话了,进入正题。所谓的屏幕适配到底需要我们完成什么样的功能呢?这才是我们研究这个问题需要解决的东西,看了很多文章写屏幕适配,大神们总是在侃侃而谈,殊不知我们这些学渣理解能力确实有问题,所以经常一篇文章读下来,确实能理解里面讲的是什么,但是为什么要解决这个问题,为什么要这样解决,就呵呵啦。。我的理解是:不管在什么手机上都可以保证UI完全显示出来。接下来就来探讨一下这个问题。
建议提前参考Cocos2d-x屏幕适配之Sprite绘制原理这篇文章。
前言:设计分辨率是截面区域,视口是图像映射到的矩形区域,屏幕分辨率是真正显示的区域大小。
case Projection::_3D: { float zeye = this->getZEye(); Mat4 matrixPerspective,matrixLookup; loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION); #if CC_TARGET_PLATFORM == CC_PLATFORM_WP8 //if needed,we need to add a rotation for Landscape orientations on Windows Phone 8 since it is always in Portrait Mode GLView* view = getOpenGLView(); if(getOpenGLView() != nullptr) { multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION,getOpenGLView()->getOrientationMatrix()); } #endif // issue #1334 Mat4::createPerspective(60,(GLfloat)size.width/size.height,10,zeye+size.height/2,&matrixPerspective); multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION,matrixPerspective); Vec3 eye(size.width/2,size.height/2,zeye),center(size.width/2,0.0f),up(0.0f,1.0f,0.0f); Mat4::createLookAt(eye,center,up,&matrixLookup); multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION,matrixLookup); loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW); break; }
可以看出投影之后的截面区域就是:设计分辨率(size)。这个区域经过视口变换映射到视口区域:
void GLViewImpl::setViewPortInPoints(float x,float y,float w,float h) { glViewport((GLint)(x * _scaleX * _retinaFactor * _frameZoomFactor + _viewPortRect.origin.x * _retinaFactor * _frameZoomFactor),(GLint)(y * _scaleY * _retinaFactor * _frameZoomFactor + _viewPortRect.origin.y * _retinaFactor * _frameZoomFactor),(GLsizei)(w * _scaleX * _retinaFactor * _frameZoomFactor),(GLsizei)(h * _scaleY * _retinaFactor * _frameZoomFactor)); }
如果视口区域比屏幕小,那么整个设计分辨率下的东西便能完全显示到屏幕上;如果比屏幕大,那么设计分辨率下的一部分才能完全显示在屏幕上,计算出这个区域就可以了。
这就是cocos保证全屏显示的两种方法。下面的几种策略模式就采用了这两种方式。
@H_502_1@cocos2d 引入了 屏幕适配策略 一共一有6种策略:EXACT_FIT,NO_BORDER,SHOW_ALL,FIXED_HEIGHT,FIXED_WIDTH,UNKNOWN。其实最后一种并不算什么策略,而是我们未指定其它策略时默认的情况。下面我们就分别来讨论这些策略:
cocos采用的
@H_502_1@1:UNKNOWN模式
拿这个来引出屏幕适配的问题吧,假如我们游戏运行在屏幕分辨率为480X320的手机上,我们要设置一个按钮的位置在手机的右上方,这个好办,button.y=320-button.height/2,button.x = 480-button.width/2;就是这么简单,那么问题来了,现在假如我又有一部480X280的手机,那么这个按钮就跑到外面去了,所以屏幕适配是个迫切需要解决的问题。
@H_502_1@2:EXACT_FIT模式 采用的是第一种方式
从这里开始我们引入designSize,设计分辨率,这是个非常重要的概念。这个是和手机分辨率没有任何关系的,纯粹的是程序员定义的,可以理解为在此分辨率下设计的游戏。在该分辨率下的坐标经过各种投影变换映射到视口中。
EXACT_FIT是如何去根据设计分辨率来使得全屏显示呢?
_scaleX = (float)_screenSize.width / _designResolutionSize.width; _scaleY = (float)_screenSize.height / _designResolutionSize.height;
if (_resolutionPolicy == ResolutionPolicy::NO_BORDER) { _scaleX = _scaleY = MAX(_scaleX,_scaleY); } else if (_resolutionPolicy == ResolutionPolicy::SHOW_ALL) { _scaleX = _scaleY = MIN(_scaleX,_scaleY); } else if ( _resolutionPolicy == ResolutionPolicy::FIXED_HEIGHT) { _scaleX = _scaleY; _designResolutionSize.width = ceilf(_screenSize.width/_scaleX); } else if ( _resolutionPolicy == ResolutionPolicy::FIXED_WIDTH) { _scaleY = _scaleX; _designResolutionSize.height = ceilf(_screenSize.height/_scaleY); }
void GLViewImpl::setViewPortInPoints(float x,(GLsizei)(h * _scaleY * _retinaFactor * _frameZoomFactor)); }
保持设计分辨率不变,视口就是屏幕分辨率,所以显示效果就是将设计分辨率拉伸到屏幕分辨率,整个投影过去,很明显资源的宽高比不能得到保持。所以此种模式理论上是OK的,但是并不建议采用这种方式,没有用户会接受这样的体验感。显示区域为:(0,0)--->(designSize.width,designSize.height)。
3:FIXED_HEIGHT,FIXED_WIDTH模式采用的是第一种方式
这两种放在一起讲,原因是它们很类似,会改变程序员最初设置的设计分辨率。还是分析下它的实现原理吧。
新的设计分辨率A和屏幕分辨率B的宽高比是一样的,具体A和B之间的缩放比例取决于是FIXED_HEIGHT还是FIXED_WIDTH。
此时的视口和B是一样的,经过视口变换后,显示出来的效果就相当于缩放了整个显示区域。所以在A分辨率下能正常显示的肯定能在B分辨率下显示。显示区域是:(0,0)--->(designSize.width,designSize.height)。
4:SHOW_ALL模式采用的是第一种方式
保持设计分辨率不变,只是改变视口的大小。
_scaleX = _scaleY = MIN(_scaleX,_scaleY);
void GLViewImpl::setViewPortInPoints(float x,(GLsizei)(h * _scaleY * _retinaFactor * _frameZoomFactor)); }
所以视口和设计分别率的宽高比是一样的。但是肯定比屏幕分辨率小,因为_scale取得是较小的那个比值,所以此模式下会有黑边存在,除非你有个很大的背景在,拿也无可厚非。此时在设计分辨率下能正常显示的肯定能在屏幕上显示出来。显示区域是:(0,0)--->(desingSize,width,desingSize.height)。
5:NO_BORDER模式采用的是第二种方式
保持设计分辨率不变,改变视口的大小。
_scaleX = _scaleY = MAX(_scaleX,_scaleY);
void GLViewImpl::setViewPortInPoints(float x,(GLsizei)(h * _scaleY * _retinaFactor * _frameZoomFactor)); }
视口和设计分辨率的宽高比一致,但是会比屏幕分辨率大,此模式下有些东西会看不到,在此设计分辨率下的能正常显示的UI并不能保证在屏幕上完全显示出来,会裁剪掉一部分,显示区域不再是:(0,0)--->(designsize.width,desingSize.height),而是:(origin.x,origin,y)----->(origin.x+visibleSize.width,origin.y+visibleSize.heigth),很容易发现这就是我们经常用来设置UI坐标的东西。下面看看它们是怎么来的。
Size GLViewProtocol::getVisibleSize() const { if (_resolutionPolicy == ResolutionPolicy::NO_BORDER) { return Size(_screenSize.width/_scaleX,_screenSize.height/_scaleY); } else { return _designResolutionSize; } } Vec2 GLViewProtocol::getVisibleOrigin() const { if (_resolutionPolicy == ResolutionPolicy::NO_BORDER) { return Vec2((_designResolutionSize.width - _screenSize.width/_scaleX)/2,(_designResolutionSize.height - _screenSize.height/_scaleY)/2); } else { return Vec2::ZERO; } }
仔细想想就会看出来的。这个区域和屏幕分辨率的宽高比是一样的,但是比设计分辨率小,更通俗点讲就是:在设计分辨率下的最大区域,该区域有的特征是:和屏幕分辨率的宽高比一致。(有点啰嗦)
不仅仅是这个模式,其它模式也适合,其它模式的visibleOrigin=(0,0),visibleSize=_desiginResolutionSize,其它模式在这个区域中的UI肯定能在屏幕分辨率下显示。
这就是为什么不管我哦们的策略模式是如何的,都可以用这个两个参数去设置UI的坐标来保证UI可以在显示区域中。
表达能力有限,只能讲成这样了。