cocos2d-x 使游戏真正自适配屏幕分辨率的方法

心已赠人 2024-04-19 10:44 47阅读 0赞

此次笔记参照这篇博文，给出链接：http://dualface.github.com/blog/2012/08/17/cocos2d-x-2-dot-0-multi-resolution/，在原文的基础上我补充了适合我自己学习的内容，以使得整个学习笔记比较连贯。

之前深入研究HelloWorld项目的时候有提到过SetDesignResoultionSize()函数，比如：

CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320, kResolutionNoBorder);

在这个函数中前两个参数设定的是游戏资源图片的大小，第三个参数设定的是根据屏幕分辨率来缩放图片的方式，还记得吗？

但是之前我们使用这个函数的时候，是在main.cpp中设定了屏幕分辨率大小的，就是这句：

eglView->setFrameSize(960, 640);这样我们480\*320的图片就会按照这里的大小放大2倍来显示了。那么如何让游戏自适应不同的分辨率呢？

首先，在不同的分辨率下让玩家都能良好的运行游戏，需要满足一些要求：

1、背景图填满整个画面，尽量不出现黑边；

2、背景图的主要内容都要显示在屏幕上，尽可能少的剪裁图片；

3、背景图放大的话，比例不宜过大，否则图片会模糊；

4、游戏界面的文字标签、按钮等在任何分辨率下都要完整显示；

要满足这些要求，需要完成两个关键工作，制作满足多分辨率的背景图、合理定位用户界面的元素（标签、按钮等）。

先来看如何制作适合多分辨率的背景图，现在市面上各种设备的常见分辨率为：

![Center][]

根据这些常见的设备，确定了几个背景图的分辨率：

1、2048\*1536，专门针对New iPad的尺寸，设计师的原稿也是这个尺寸；

2、960\*720，针对iPhone和iPad的尺寸。在iPhone上显示，上下各裁剪40px，在iPad上按1.067放大显示，正好填满整个屏幕且不会模糊，从原稿导出时按照0.469比例缩小正好就是 960\*720；

3、854\*480，针对市面上安卓手机的尺寸。市面上安卓手机854\*480和800\*480是最常见的两种分辨率，原稿按照0.417比例缩小，裁掉上下多余部分就可以了；

4、1280\*800，针对高分辨率的安卓手机和平板设备，原稿按照0.625比例就可以得到了。

所以对于美术来说，背景图都按照2048\*1536的尺寸绘制，按比例导出四种不同分辨率的背景图就可以了。如果需要最大程度减小游戏的下载体积，那么可以只使用960\*720的素材，其实用着一套素材就可以应对各种不同的分辨率了，就是效果没有4套那么好而已。

下面几张图是2048\*1536原稿在各种不同设备上的可视区域，也是参照链接的那篇的。

![Center 1][]

![Center 2][]

![Center 3][]

![Center 4][]

![Center 5][]

![Center 6][]

![Center 7][]

之所以把这几张图弄上来是因为这几张图对于理解可是区域很有帮助。

接下来看看如何合理的制作用户界面。理解了可视区域，那么很自然的想到用户界面的元素必须能够放置在最小的可是区域中，下面界面的全部元素在各种分辨率下都能完整显示。

![Center 8][]

最小可视区域是960\*540，在这个范围内，无论分辨率是多少的设备都可以显示出这其中的内容。

引用上面链接博文中的对于不同分辨率设备定位界面元素的一种可行的方案，使用起来非常简单。

虚拟分辨率：为了简化程序开发，使用一个统一的虚拟坐标系来映射设备的屏幕，实验证明将屏幕宽度设定为960pt是很合理的。在讨论虚拟坐标系时，一律使用pt（point）作为单位，而不是px（pixel）

下图是各种设备分辨率与960pt宽度虚拟分辨率的对应关系：

![20130820025453937][]

根据参考点定位界面元素：

在游戏初始化时，引擎就会根据设备的实际分辨率，自动设定好对应的虚拟分辨率，并且确定屏幕上的几个参考点：

![20130820025543875][]

有了参考点，定位界面元素就很简单了。例如一个按钮的原点（按钮图片中心点）相对于屏幕左侧 40pt，相对于屏幕底部 30pt。那么在不同分辨率的设备上，这个按钮和屏幕左下角的距离都是差不多的。只要确保所有界面元素都使用参考点来定位，那么就绝不会出现在设备屏幕上看不到界面元素的情况。

下面是根据上面链接我自己更改的一个例子，在原来的GameStart项目上做了些改动，使之匹配不同的设备。在这里使用960\*720的一套素材搞定的，下面简单介绍一下。

首先在项目中添加一个SmartRes.h的头文件，内容如下，图上有注释：

![20130820025707218][]

![20130820025757562][]

![20130820030008421][]

接着再添加一个SmartRes.cpp文件，内容如下：

![20130820030649140][]

SmartRes类实现了设定虚拟屏幕和计算参考点的功能，图上我写了详细的注释。

接着我们修改GameStart.h文件如下：

![20130820030800953][]

再修改GameStart.cpp文件如下：

![20130820030959125][]

![20130820031103109][]

在之前的main.cpp中我们将设备屏幕做修改eglView->setFrameSize(1024, 600);然后来看看运行效果：

![20130820031218531][]

这几张图片是链接中的素材，你也可以自己找一张960\*720的jpg图，名字改成bg就可以了，在这里只是记录这种方法，好了，先到这里。

转帖：http://blog.sina.com.cn/s/blog\_7985987f01016gdw.html

[Center]: https://img-blog.csdn.net/20130820024246234?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTWlyYWdlNTIw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20130820024549515?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTWlyYWdlNTIw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: https://img-blog.csdn.net/20130820024736250?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTWlyYWdlNTIw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: https://img-blog.csdn.net/20130820024821703?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTWlyYWdlNTIw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: https://img-blog.csdn.net/20130820025025796?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTWlyYWdlNTIw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 5]: https://img-blog.csdn.net/20130820025123375?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTWlyYWdlNTIw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 6]: https://img-blog.csdn.net/20130820025220609?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTWlyYWdlNTIw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 7]: https://img-blog.csdn.net/20130820025304718?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTWlyYWdlNTIw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 8]: https://img-blog.csdn.net/20130820025348187?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTWlyYWdlNTIw/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[20130820025453937]: https://img-blog.csdn.net/20130820025453937
[20130820025543875]: https://img-blog.csdn.net/20130820025543875
[20130820025707218]: https://img-blog.csdn.net/20130820025707218
[20130820025757562]: https://img-blog.csdn.net/20130820025757562
[20130820030008421]: https://img-blog.csdn.net/20130820030008421
[20130820030649140]: https://img-blog.csdn.net/20130820030649140
[20130820030800953]: https://img-blog.csdn.net/20130820030800953
[20130820030959125]: https://img-blog.csdn.net/20130820030959125
[20130820031103109]: https://img-blog.csdn.net/20130820031103109
[20130820031218531]: https://img-blog.csdn.net/20130820031218531