cocos 屏幕适配源码分析及VisibleSize,VisibleOrigin / 憋错料

其实这个话题应该是从第一天接触cocos就会碰到的问题，我始终没能完全理解那些文章的意思，只是大概知道是怎么回事，仅此而已，智商捉急呀！！今天也是花了很长的时间去理解，现在总算有点眉目了，就把它记录下来，以后可以常回顾一下。

不废话了，进入正题。所谓的屏幕适配到底需要我们完成什么样的功能呢？这才是我们研究这个问题需要解决的东西，看了很多文章写屏幕适配，大神们总是在侃侃而谈，殊不知我们这些学渣理解能力确实有问题，所以经常一篇文章读下来，确实能理解里面讲的是什么，但是为什么要解决这个问题，为什么要这样解决，就呵呵啦。。我的理解是：不管在什么手机上都可以保证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, size.height/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保证全屏显示的两种方法。下面的几种策略模式就采用了这两种方式。

cocos2d 引入了屏幕适配策略一共一有6种策略：EXACT_FIT，NO_BORDER，SHOW_ALL，FIXED_HEIGHT，FIXED_WIDTH，UNKNOWN。其实最后一种并不算什么策略，而是我们未指定其它策略时默认的情况。下面我们就分别来讨论这些策略：

cocos采用的

1：UNKNOWN模式

拿这个来引出屏幕适配的问题吧，假如我们游戏运行在屏幕分辨率为480X320的手机上，我们要设置一个按钮的位置在手机的右上方，这个好办，button.y=320-button.width/2,button.x = 480-button.height/2;就是这么简单，那么问题来了，现在假如我又有一部480X280的手机，那么这个按钮就跑到外面去了，所以屏幕适配是个迫切需要解决的问题。

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 , 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));
}

保持设计分辨率不变，视口就是屏幕分辨率，所以显示效果就是将设计分辨率拉伸到屏幕分辨率，整个投影过去，很明显资源的宽高比不能得到保持。所以此种模式理论上是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 , 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));
}

所以视口和设计分别率的宽高比是一样的。但是肯定比屏幕分辨率小，因为_scale取得是较小的那个比值，所以此模式下会有黑边存在，除非你有个很大的背景在，拿也无可厚非。此时在设计分辨率下能正常显示的肯定能在屏幕上显示出来。显示区域是：（0,0）--->(desingSize,width,desingSize.height)。

5：NO_BORDER模式采用的是第二种方式

保持设计分辨率不变，改变视口的大小。

 _scaleX = _scaleY = MAX(_scaleX, _scaleY);

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));
}

视口和设计分辨率的宽高比一致，但是会比屏幕分辨率大，此模式下有些东西会看不到，在此设计分辨率下的能正常显示的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可以在显示区域中。

表达能力有限，只能讲成这样了。

时间： 2024-08-26 15:30:24

cocos 屏幕适配源码分析及VisibleSize,VisibleOrigin

cocos 屏幕适配源码分析及VisibleSize,VisibleOrigin的相关文章

源码分析 Sentinel 之 Dubbo 适配原理

Cocos2d-X3.0 刨根问底（九）----- 场景切换（TransitionScene）源码分析

Android 上千实例源码分析以及开源分析

5 cocos2dx 3.0源码分析渲染 render

DialogFragment源码分析

S5PV210-uboot源码分析-uboot环境变量

YII 的源码分析(二)

[Android]Fragment源码分析(一) 构造

cocos2d-x 源码分析： control 源码分析（控制类组件 controlButton）