屏幕适配的解决方法

Dear 丶 2022-08-06 02:05 244阅读 0赞

本文并不想讲关于屏幕适配的概念或者大道理，如果还不了解cocos2d-x屏幕适配的，请先看这篇文章：[http://www.cocoachina.com/gamedev/cocos/2014/0516/8451.html][http_www.cocoachina.com_gamedev_cocos_2014_0516_8451.html] 。本文有一些内容和图片是引用这篇文章的。看了那么多网上关于屏幕适配的文章，还是觉得似懂非懂，所以最好的方法就是自己一步步做好适配。

一、根据屏幕尺寸选择“最”合适的图片。

如果根据屏幕尺寸来选择一样大小的图片，那么美工要哭了，因为对于安卓机，各种各样的分辨率啊，不仅美工要哭了，程序员也要哭了。所以，我们只能选择最合适的图片，比如320\*500分辨率和300\*480分辨率的屏幕可以使用320\*480的图片。

1、在Cocos2d-x自带的解决方案中就有针对iphone、ipad和ipadhd所做的适配方案，在工程cpp-empty-test有例子。

// AppMacros.h
    #define DESIGN_RESOLUTION_480X320	0
    #define DESIGN_RESOLUTION_1024X768   1
    #define DESIGN_RESOLUTION_2048X1536  2
    
    // 要切换设计方案，改变这一行即可
    #define TARGET_DESIGN_RESOLUTION_SIZE  DESIGN_RESOLUTION_480X320
    
    typedef struct tagResource
    {
      cocos2d::Size size;		// 尺寸
      char directory[100];	// 资源路径
    }Resource;
    
    static Resource smallResource  =  { cocos2d::Size(480, 320),   "iphone" };
    static Resource mediumResource =  { cocos2d::Size(1024, 768),  "ipad"   };
    static Resource largeResource  =  { cocos2d::Size(2048, 1536), "ipadhd" };
    
    #if (TARGET_DESIGN_RESOLUTION_SIZE == DESIGN_RESOLUTION_480X320)
    static cocos2d::Size designResolutionSize = cocos2d::Size(480, 320);
    #elif (TARGET_DESIGN_RESOLUTION_SIZE == DESIGN_RESOLUTION_1024X768)
    static cocos2d::Size designResolutionSize = cocos2d::Size(1024, 768);
    #elif (TARGET_DESIGN_RESOLUTION_SIZE == DESIGN_RESOLUTION_2048X1536)
    static cocos2d::Size designResolutionSize = cocos2d::Size(2048, 1536);
    #else
    #error unknown target design resolution!
    #endif
    
    // 480*320的字体大小是24号，根据当前的分辨率来修改字体大小
    #define TITLE_FONT_SIZE  (cocos2d::Director::getInstance()->getOpenGLView()->getDesignResolutionSize().width / smallResource.size.width * 24)

从上面可以看出，cocos2d-x定义了三种大小，分别是iphone(480\*320)，ipad(1024\*768)，ipadhd(2048\*1536)，一般用得比较多的是iphone和ipad。

我们再看一下资源文件夹，工程->Resource下：

![Jvaeia.png][]

iphone目录：

![mIBjIv.png][]

ipad目录：

![6JbYN3.png][]

ipadhd目录：

![6BnAze.png][]

也就是说，在这三个文件夹里面有三套不同大小分辨率的图片，我们之后根据屏幕大小来选择对应的图片就行了。

2、实现怎么根据屏幕大小来选择图片。

新建一个工程，再将AppMacros.h文件拷贝过去。

// AppDelegate.cpp
    bool AppDelegate::applicationDidFinishLaunching() {
        // initialize director
        auto director = Director::getInstance();
        auto glview = director->getOpenGLView();
        if(!glview) {
      glview = GLView::create("My Game");
        glview->setFrameSize(480, 320);	// 在这里设置创建窗口的尺寸，手机上这个就不用啦，因为手机有固定的屏幕
      director->setOpenGLView(glview);
        }
    
      auto screenSize = glview->getFrameSize();	// 获取屏幕尺寸
      std::vector<std::string> searchPaths;
    
      // 这里是实现的重点，比较屏幕的高和设定的三种适配尺寸的高，选择合适的图片
      // 然后将对应图片的路径添加到搜索路径中，那么cocos2d-x就会到该目录去寻找图片
      if (screenSize.height > middleResource.size.height)
      {
        searchPaths.push_back(largeResource.directory);
      }else if (screenSize.height > smallResource.size.height)
      {
        searchPaths.push_back(middleResource.directory);
      }else
      {
        searchPaths.push_back(smallResource.directory);
      }
      
      FileUtils::getInstance()->setSearchPaths(searchPaths);
    
        // turn on display FPS
        director->setDisplayStats(true);
    
        // set FPS. the default value is 1.0/60 if you don't call this
        director->setAnimationInterval(1.0 / 60);
    
        // create a scene. it's an autorelease object
        auto scene = HelloWorld::createScene();
    
        // run
        director->runWithScene(scene);
    
        return true;
    }

3、改变窗口尺寸来看效果：

窗口尺寸500\*300：

![rumUVn.png][]

因为高300小于320，所以使用480\*320的图片。这时候看到的是左右有黑边，上下被截了一点。没事，下面会讲怎么解决。

窗口尺寸700\*300：

![QZviyy.png][]

还是用480\*320分辨率的，都是300的错。

窗口尺寸800\*480：

![YjaqEb.png][]这次用的是1024\*768的了，因为320<480<768。

在500\*300尺寸中我们看到图片左右因为不够宽而出现黑边，而上下因为太大了而被截取了一部分，那么要怎么解决这个问题呢？往下看。

二、图片与屏幕“完美”融合

为了使图片能与屏幕“完美”融合，Cocos2d-x提供了一组相关的接口和5种分辨率适配的策略。

首先了解一下三种分辨率：

资源分辨率：也就是图片分辨率，下面宽Resource Width简写为RW，高Resource Height简写为RH。

设计分辨率：也就是我们设定区域的分辨率，下面宽Design Width简写为DW，高Design Height简写为DH。

屏幕分辨率：也就是窗口分辨率，下面宽Screen Width简写为SW，高Screen Height简写为SH。

Cocos2d-x的图片显示有下面两个过程：

从资源分辨率到设计分辨率，从设计分辨率到屏幕分辨率。

![Y3QvUf.png][]

这个过程就是：

1、先选定目标的设计分辨率，在AppMacros.h中我们定义了三种分辨率，分别是480\*320,1024\*768,2048\*1536：

![rARbyu.png][]

![6N3YZ3I.png][]

2、从资源分辨率到设计分辨率

通过setContentScaleFactor()函数来缩放图片的分辨率，以适应设计分辨率的大小。这个函数的参数不是通过资源宽/屏幕宽、资源高/屏幕高得来的，而是通过资源宽/设计分辨率宽、资源高/设计分辨率高得来的。这样我们就可以不关注屏幕尺寸，先根据现有的资源跟选好的设计分辨率来做好适配。

在上面800\*480尺寸的图中可以看到，图片四边都被截取了，原因就是没有做好图片的缩放，接下来我们先用setContentScaleFactor()来做图片缩放。

设计分辨率选择的是480\*320，窗口分辨率480\*321，这样用的就是1024\*768分辨率的图片了：

if (screenSize.height > middleResource.size.height)
      {
        searchPaths.push_back(largeResource.directory);
        director->setContentScaleFactor(largeResource.size.height/designResolutionSize.height);
      }else if (screenSize.height > smallResource.size.height)
      {
        searchPaths.push_back(middleResource.directory);
        // 缩放因子是资源宽/设计分辨率宽
        director->setContentScaleFactor(middleResource.size.height/designResolutionSize.height);	
      }else
      {
        searchPaths.push_back(smallResource.directory);
        director->setContentScaleFactor(smallResource.size.height/designResolutionSize.height);
      }

效果：

![ziY3u2N.png][]

用高度比作为内容缩放因子，保证了背景资源的垂直方向在设计分辨率范围内的全部显示。

修改缩放因子为资源宽/设计宽：

// 缩放因子是资源宽/设计分辨率宽
    director->setContentScaleFactor(middleResource.size.width/designResolutionSize.width);

![m6R3aq.png][]

用宽度比作为内容缩放因子，保证了背景资源的水平方向在设计分辨率范围内的全部显示。

可以参考一下这张图，我的是横屏的，这张图画的是竖屏的，不过原理一样：

![emA3y2.png][]

3、从设计分辨率到屏幕分辨率

设计分辨率是我们自定义分辨率方案，图片根据设计分辨率做好了缩放效果了，如果跟屏幕分辨率适配，说白了就是一厢情愿。最后一步就是使用setDesignResolutionSize()函数来实现设计分辨率到屏幕分辨率的完美适配了：

void GLViewProtocol::setDesignResolutionSize(float width,	// DW
                           float height,	// DH
                           ResolutionPolicy resolutionPolicy)	// 适配策略

五种适配策略：

enum class ResolutionPolicy
    {
        
      EXACT_FIT,
      NO_BORDER,
      SHOW_ALL,
      FIXED_HEIGHT,
      FIXED_WIDTH,
    
      UNKNOWN,
    };

先看不使用适配策略的情况，在第2中，设置窗口分辨率为960\*640：

![UBfU7jZ.png][]

接着，我们使用setDesignResolutionSize()函数来适配设计分辨率和屏幕分辨率：

glview->setDesignResolutionSize(designResolutionSize.width, designResolutionSize.height, ResolutionPolicy::EXACT_FIT);

效果：

![muARru.png][]

这时候就是我们想要的效果了。

上面说到共有五种分辨率适配的策略，其实就是从设计分辨率适配到屏幕分辨率时，图片拉伸的策略：

1、 ResolutionPolicy::SHOW\_ALL

屏幕宽、高分别和设计分辨率宽、高计算缩放因子，取较(小)者作为宽、高的缩放因子。保证了设计区域全部显示到屏幕上，但可能会有黑边。

2、 ResolutionPolicy::EXACT\_FIT

屏幕宽 与 设计宽比 作为X方向的缩放因子，屏幕高 与 设计高比 作为Y方向的缩放因子。保证了设计区域完全铺满屏幕，但是可能会出现图像拉伸。

3、 ResolutionPolicy::NO\_BORDER

屏幕宽、高分别和设计分辨率宽、高计算缩放因子，取较(大)者作为宽、高的缩放因子。保证了设计区域总能一个方向上铺满屏幕，而另一个方向一般会超出屏幕区域。

如图：

![yueEV3.png][]

ResolutionPolicy::NO\_BORDER是之前官方推荐使用的方案，他没有拉伸图像，同时在一个方向上撑满了屏幕，但是新加入的两种策略将撼动ResolutionPolicy::NO\_BORDER的地位。

ResolutionPolicy::FIXED\_HEIGHT和ResolutionPolicy::FIXED\_WIDTH都是会在内部修正传入设计分辨率，以保证屏幕分辨率到设计分辨率无拉伸铺满屏幕。

4、 ResolutionPolicy::FIXED\_HEIGHT

保持传入的设计分辨率高度不变，根据屏幕分辨率修正设计分辨率的宽度。

适合高方向需要撑满，宽方向可裁减的游戏，结合setContentScaleFactor(RH/DH)使用。

5、 ResolutionPolicy::FIXED\_WIDTH

保持传入的设计分辨率宽度不变，根据屏幕分辨率修正设计分辨率的高度。

适合宽方向需要撑满，高方向可裁减的游戏，结合setContentScaleFactor(RW/DW)使用。

如图：

![FfAv6v.png][]

屏幕适配的就讲到这里了，由于本人口才不好，所以有些地方可能表达不够清晰，请见谅。

http://www.tuicool.com/articles/v2euIr原文连接

[http_www.cocoachina.com_gamedev_cocos_2014_0516_8451.html]: http://www.cocoachina.com/gamedev/cocos/2014/0516/8451.html
[Jvaeia.png]: /images/20220806/6eba73c34acd4bcea5fe355e760a0520.png
[mIBjIv.png]: /images/20220806/0a6ed90890504fb9adcc0b215866a3fc.png
[6JbYN3.png]: /images/20220806/83dffe1b864e47029aa4b78afde71856.png
[6BnAze.png]: /images/20220806/31fd0ddc3ba14c07b369b48786025901.png
[rumUVn.png]: /images/20220806/cf61c7e08b6449db9cdb32fa7426c8e3.png
[QZviyy.png]: /images/20220806/daf9a6b0d97a45e4ae6e0328918a6e46.png
[YjaqEb.png]: /images/20220806/f7a69d70804747b3ad507c5dac5d92c9.png
[Y3QvUf.png]: /images/20220806/81211aedba684d278c945ae95b858390.png
[rARbyu.png]: /images/20220806/6682977024b64e238a42cf91ccae4397.png
[6N3YZ3I.png]: /images/20220806/d2c284d213a34575803a5f4776a48bf6.png
[ziY3u2N.png]: /images/20220806/2f3ffbbcab4047a581b8f1c3e8b1cca7.png
[m6R3aq.png]: /images/20220806/5525697792364e5eb3843dc80ca0ab52.png
[emA3y2.png]: /images/20220806/30675ed4e888476a981ade33834bb522.png
[UBfU7jZ.png]: /images/20220806/ae75a5c2cdc441ecb5c8f7dc8b21cb76.png
[muARru.png]: /images/20220806/b4e8963505af4667b349c9377de6c9e7.png
[yueEV3.png]: /images/20220806/adee4bebb30b460b8ddfdd3ca800cc69.png
[FfAv6v.png]: /images/20220806/f11aa949e5e8406fb3da72964a504c4b.png