Cocos2d-x 2.0 自适应多种分辨率

Dear 丶 2022-08-03 12:50 55阅读 0赞

转载自http://dualface.github.com/blog/2012/08/17/cocos2d-x-2-dot-0-multi-resolution/ [点击打开链接][Link 1]

cocos2d-x 2.0 提供一个极有价值的新特征: setDesignResolutionSize() 。

这个函数用于指定一个 OpenGL 视图，然后将这个视图映射到设备屏幕上。根据不同的设定，视图会自动缩放显示内容，为 cocos2d-x 自适应多种分辨率提供了基本支持。

不过要真正实现自适应分辨率，从场景设计、美术制作到程序编写，都需要遵循一套规范，才能极大减少工作量。

> 注意：本文假定游戏是横向显示的。

## 明确自适应多种分辨率的需求 ##

要让游戏在不同分辨率下都获得良好的用户体验，应该满足这几个要求：

*  背景图填满整个画面，不出现黑边；
 *  背景图的主要内容都显示在屏幕上，尽可能少的裁剪图片（减少超出屏幕可视区域的部分）；
 *  如果背景图需要放大，尽可能减小放大的比例，避免放大后出现明显的模糊；
 *  用户界面的文字标签、按钮在任何分辨率下都应该完整显示，并且容易交互。

上述需求实际上可以分解为两部分：

*  如何制作满足多种分辨率的背景图；
 *  如何定位用户界面元素（标签、按钮等）。

## 制作适合多种分辨率的背景图 ##

在开始制作背景图前，我们看看市面上各种设备（480 像素分辨率的老设备 2012 的游戏应该可以无视了）常见的像素分辨率（resolution in pixels）：

经过几个游戏的实践，我们确定了几个背景图的分辨率：

*  2048px \* 1536px
    
    专门针对 New iPad，设计师的原稿也是这个尺寸。
 *  960px \* 720px
    
    这个分辨率针对 iPhone 和 iPad 设备。在 iPhone 上 1:1 显示，上下各剪裁掉 40px。而在 iPad 上按 1.067 放大显示，正好填满整个屏幕，并且用户看不到模糊。从 2048px 的原稿导出 PNG 时，按照 0.469 比例缩小正好就是 960px \* 720px。
 *  854px \* 480px
    
    市面上的 Android 手机，854px \* 480px 和 800px \* 480px 是最常见的两种分辨率。2048px 的原稿按照 0.417 比例缩小，然后裁减掉上下多余部分就可以得到需要的 PNG 图片。
 *  1280px \* 800px
    
    应付高分辨率的 Android 手机和平板设备，在各种分辨率下都可以获得很好的显示效果。2048px 的原稿按照 0.625 比例缩小，然后裁减掉上下多余部分就可以得到需要的 PNG 图片。

对于美术来说，背景图都按照 2048px \* 1536px 的尺寸绘制。然后用脚本配合 ImageMagick 就可以自动导出四种分辨率的背景图片。

如果需要最大程度减小游戏的下载体积，那么可以只使用 960px \* 720px 的素材。并且参考本文后面示例程序的做法，用一套素材应付各种不同的分辨率。

唯一需要注意的问题就是：确保画面中的主要内容在各种设备上都位于屏幕的可视区域中。

下面几个图展示 2048px 原稿在不同设备上的可视区域：

[![multires_01.png][]][multires_01.png]

[![multires_02.png][]][multires_02.png]

[![multires_03.png][]][multires_03.png]

[![multires_04.png][]][multires_04.png]

[![multires_05.png][]][multires_05.png]

[![multires_06.png][]][multires_06.png]

[![multires_07.png][]][multires_07.png]

Photoshop 源文件下载地址: [multires.psd][]

## 制作适合各种分辨率的用户界面元素 ##

相比背景图，界面元素的制作只需要考虑一点：必须能够放置在最小的可视区域中。如下图界面底部有一排按钮，这些按钮在各种分辨率下都能完整显示：

[![multires_ui01.png][]][multires_ui01.png]

在导出界面元素的 PNG 图片时，仍然使用脚本文件和 ImageMagick 按照特定比例自动缩放。

## 在各种分辨率的屏幕上定位界面元素 ##

准备好了美术素材，接下来的挑战就是如何在不同分辨率的设备中定位界面元素。

为了解决这个问题，我们做了大量的尝试，最终找到一种可行的解决方案，而且使用起来非常简单。

### 虚拟分辨率 ###

为了简化程序的开发，我们使用一个统一的虚拟坐标系来映射设备的屏幕。经过几个产品的实践，证明将屏幕宽度设定为 960pt 是很合理的。

特别注意：在讨论虚拟坐标系时，一律使用 pt（Point）作为单位，而不是 px（Pixel）。

下面的表格整理了各种设备分辨率与 960pt 宽度虚拟分辨率的对应关系：

<table style="color:rgb(51,51,51); margin:10px 0px 0px; padding:0px; background-color:rgb(221,221,221); border:1px solid rgb(204,204,204); border-spacing:0px; font-family:Helvetica,Verdana,sans; font-size:16px; line-height:32px; text-align:justify"> 
 <thead style="margin:0px; padding:0px"> 
 <tr style="margin:0px; padding:0px"> 
 <th style="margin:0px; padding:0px 15px; background-color:rgb(204,204,204)">Device</th> 
 <th style="margin:0px; padding:0px 15px; background-color:rgb(204,204,204)">Width</th> 
 <th style="margin:0px; padding:0px 15px; background-color:rgb(204,204,204)">Height</th> 
 <th style="margin:0px; padding:0px 15px; background-color:rgb(204,204,204)">Virtual Width</th> 
 <th style="margin:0px; padding:0px 15px; background-color:rgb(204,204,204)">Virutal Height</th> 
 <th style="margin:0px; padding:0px 15px; background-color:rgb(204,204,204)">Scale</th> 
 </tr> 
 </thead> 
 <tbody style="margin:0px; padding:0px"> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">iPad</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">1024px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">768px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">960pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">720pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">1.066666667</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; background-color:rgb(213,213,213)"> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">New iPad</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">2048px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">1536px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">960pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">720pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">2.133333333</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">iPhone</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">960px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">640px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">960pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">640pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">1.0</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; background-color:rgb(213,213,213)"> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">Android Phone 1</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">800px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">480px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">960pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">576pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">0.833333333</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">Android Phone 2</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">854px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">480px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">960pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">540pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">0.889583333</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; background-color:rgb(213,213,213)"> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">Android Phone 3</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">1280px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">720px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">960pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">540pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">1.333333333</td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">Android Pad 1</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">1024px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">600px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">960pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">562pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">1.066666667</td> 
 </tr> 
 <tr style="margin:0px; padding:0px; background-color:rgb(213,213,213)"> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">Android Pad 2</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">1280px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">800px</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">960pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">600pt</td> 
 <td style="margin:0px; text-align:center; padding:10px 16px!important">1.333333333</td> 
 </tr> 
 </tbody> 
</table>

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

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

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

只要确保所有界面元素都使用参考点来定位，那么就绝不会出现在设备屏幕上看不到界面元素的情况。

## 示例程序 ##

为了方便大家进行测试，本文的示例工程已经编译成 Windows 可执行文件。运行时可以用下列命令行启动以便测试不同分辨率：

命令行参数

或者双击 test\_multires.cmd 直接查看不同分辨率的运行效果。

其他：

*  示例程序只包含按照 960px \* 720px 制作的素材。
 *  示例程序可执行文件以及源代码下载：[multires.demo1.win32.zip][]

## 补充说明 ##

本文前面描述了如何创建适合不同分辨率的图片，但最后的示例程序并没有考虑这一点，而是用一套素材就搞定了多种分辨率。实际上，我个人推荐使用一套素材适应多种分辨率，最多再为 New iPad 单独准备一套素材，这样可以显著减少工作量。

如果一定要按照不同分辨率使用不同的素材，那么在显示图片时需要调用 setScale() 调整图片的缩放比例。这样做的原因是 setDesignResolutionSize() 设置虚拟分辨率后，会指定一个全局的缩放比例，所有的图片即便是 scale = 100%，也会自动缩放。所以当图片尺寸和虚拟分辨率不一致时，我们就需要手动调整图片缩放比例了。

假设设备分辨率是 1280px \* 720px，虚拟分辨率是 960pt \* 540pt，背景图是 1280px \* 800px。要确保背景图 1:1 显示在屏幕上，参考如下代码：

让图片按 1:1 显示在屏幕上

<table style="margin:0px; padding:0px; border:none; border-spacing:0px"> 
 <tbody style="margin:0px; padding:0px"> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:10px 16px!important"><pre style="white-space: pre-wrap; word-wrap: break-word; margin-top: 0px; margin-bottom: 0px; padding: 0px 15px 0px 0px; border-right-width: 1px; border-style: none solid none none; border-right-color: rgb(204, 204, 204); font-family: Menlo, Monaco, 'Andale Mono', 'lucida console', 'Courier New', monospace; line-height: 1.5; overflow-x: auto; text-align: right; font-size: 14px !important;">&lt;span class="line-number" style="margin: 0px; padding: 0px;"&gt;1&lt;/span&gt;
&lt;span class="line-number" style="margin: 0px; padding: 0px;"&gt;2&lt;/span&gt;
&lt;span class="line-number" style="margin: 0px; padding: 0px;"&gt;3&lt;/span&gt;
&lt;span class="line-number" style="margin: 0px; padding: 0px;"&gt;4&lt;/span&gt;
&lt;span class="line-number" style="margin: 0px; padding: 0px;"&gt;5&lt;/span&gt;
&lt;span class="line-number" style="margin: 0px; padding: 0px;"&gt;6&lt;/span&gt;
</pre></td> 
 <td style="margin:0px; padding-left:15px; width:680px; overflow-x:auto; padding-top:10px!important; padding-right:16px!important; padding-bottom:10px!important"> <pre style="white-space:pre-wrap; word-wrap:break-word; margin-top:0px; margin-bottom:0px; padding:0px; border:none; font-family:Menlo,Monaco,'Andale Mono','lucida console','Courier New',monospace; line-height:1.5; overflow-x:auto; font-size:14px!important"><code style="margin:0px; padding:0px; border:none; font-family:Menlo,Monaco,'Andale Mono','lucida console','Courier New',monospace; font-size:0.9em">const CCSize&amp; winSize = CCDirector::sharedDirector()-&gt;getWinSize();
float scale = CCEGLView::sharedOpenGLView().getScaleX();
CCSprite* bg = CCSprite::create("bg.jpg")
bg-&gt;setPosition(ccp(winSize.width / 2, winSize.height / 2));
bg-&gt;setScale(1.0f / scale); // 这里重置图片缩放比例，确保图片按 1:1 显示在屏幕上
addChild(bg);
</code></pre> </td> 
 </tr> 
 </tbody> 
</table>

\-EOF-

[Link 1]: http://dualface.github.com/blog/2012/08/17/cocos2d-x-2-dot-0-multi-resolution/
[multires_01.png]: http://dualface.github.com/upload/cocos2d-x-2.0-multires/multires_01.png
[multires_02.png]: http://dualface.github.com/upload/cocos2d-x-2.0-multires/multires_02.png
[multires_03.png]: http://dualface.github.com/upload/cocos2d-x-2.0-multires/multires_03.png
[multires_04.png]: http://dualface.github.com/upload/cocos2d-x-2.0-multires/multires_04.png
[multires_05.png]: http://dualface.github.com/upload/cocos2d-x-2.0-multires/multires_05.png
[multires_06.png]: http://dualface.github.com/upload/cocos2d-x-2.0-multires/multires_06.png
[multires_07.png]: http://dualface.github.com/upload/cocos2d-x-2.0-multires/multires_07.png
[multires.psd]: http://dualface.github.com/upload/cocos2d-x-2.0-multires/multires.psd
[multires_ui01.png]: http://dualface.github.com/upload/cocos2d-x-2.0-multires/multires_ui01.png
[multires.demo1.win32.zip]: http://dualface.github.com/upload/cocos2d-x-2.0-multires/multires.demo1.win32.zip