[zz]Quick多分辨率适配

多种分辨率的适配一直都是一个蛋疼的问题，各家公司可能都有本身的一套方案。今天我为你们介绍的是咱们在多款游戏里实践后的解决方案，相对来讲成本和实现难度都较低，效果也很不错。

多种分辨率适配的原理

由于横屏和竖屏的原理彻底相同，因此本文先以竖屏为例，后文再说明横屏的处理。

制做一张 640×960 像素的图片，并传入设备查看：

1. 查看时将图片缩放到合适大小，确保图片左右两边正好填满整个屏幕。
2. 在不一样分辨率的设备上，这张图片的显示效果差别体如今图片上下是否可以填满屏幕。

例如在 480×800 的设备上，这张 640×960 图片会被缩小为 480×720 像素来显示，左右填满屏幕，上下出现黑边。

在一些常见分辨率中，图片的显示效果：

缩放比例 = 屏幕像素宽度 / 图片像素宽度

• 屏幕尺寸 _640x960 像素，缩放比例 100%，正好填满整个屏幕
• 屏幕尺寸 640×1136 像素，缩放比例 100%，上下有黑边
• 屏幕尺寸 _480x800 像素，缩放比例 _75%，图片缩放后尺寸 _480x720 像素，上下有黑边
• 屏幕尺寸 _480x854 像素，缩放比例 _75%，图片缩放后尺寸 _480x720 像素，上下有黑边
• 屏幕尺寸 768×1024 像素，缩放比例 120%，图片缩放后尺寸 768×1152 像素，无黑边，但图像上下有裁剪（超出屏幕没法显示）

上下有黑边是确定很差看的。那要保证填满屏幕，咱们只须要将图片作得更大一点就能够了。图片高度的计算：

图片高度 = 屏幕像素高度 / (屏幕像素宽度 / 图片像素宽度)

按照这个公式，上述分辨率，图片的高度应该是：

• 屏幕尺寸 _640x960 像素，图像高度 960 像素
• 屏幕尺寸 640×1136 像素，图像高度 1136 像素
• 屏幕尺寸 _480x800 像素，图像高度 1066.67 像素
• 屏幕尺寸 _480x854 像素，图像高度 1138.67 像素
• 屏幕尺寸 768×1024 像素，图像高度 853.3 像素

其中最大值是 1138.67，考虑制做方便，高度取值 1140。也就是说 640×1140 的图片能够彻底填满上述各类分辨率的屏幕。

在游戏里咱们也能够借鉴这种方式。无论屏幕多大，反正我把游戏场景的宽度都给定死，就是 640。那么在不一样设备上，要处理的问题就是场景高度的变化。以此为基础，适配多种分辨率的原理就很简单了：

1. 游戏场景的宽度固定。
2. 根据屏幕分辨率计算出游戏场景的高度。
3. 使用较大的背景图，确保任何分辨率下均可以填满屏幕。
4. 根据场景高度来定位显示内容。

虚拟分辨率

为了和设备屏幕分辨率区别开，我将游戏里使用的分辨率称为“虚拟分辨率”。

在“虚拟分辨率”中，坐标系的尺寸是“点”。后文称为“Point，缩写为 pt”。

根据前面计算图片高度的公式，在不一样设备上，虚拟分辨率的宽度是固定的，而高度则不一样。在 quick-cocos2d-x 里要实现这个虚拟分辨率的自动计算，只须要使用“FIXED_WIDTH”屏幕缩放策略。

打开 config.lua 文件，指定如下代码便可：

 

CONFIG_SCREEN_WIDTH     = 640
CONFIG_SCREEN_HEIGHT    = 960
CONFIG_SCREEN_AUTOSCALE = "FIXED_WIDTH"

1. CONFIG_SCREEN_WIDTH 和 CONFIG_SCREEN_HEIGHT 定义了一个“虚拟分辨率”的参考值。
2. 游戏引擎根据参考值和 CONFIG_SCREEN_AUTOSCALE 设置，最终计算出在设备上使用的“虚拟分辨率”。

咱们在 quick-cocos2d-x 启动时能够看到以下信息：

# CONFIG_SCREEN_AUTOSCALE      = FIXED_WIDTH
# CONFIG_SCREEN_WIDTH          = 640.00
# CONFIG_SCREEN_HEIGHT         = 1066.67

此处的 CONFIG_SCREEN_HEIGHT 就由引擎作了调整，再也不是 config.lua 里指定的参考值。最终，CONFIG_SCREEN_WIDTH 和 CONFIG_SCREEN_HEIGHT 就是游戏场景的虚拟分辨率尺寸。

内容的定位

quick-cocos2d-x 在引擎初始化的时候就算好了一些特定的坐标值，咱们在游戏里能够用这些坐标值当作“参考点”来定位咱们的内容。

# display.width                = 640.00
# display.height               = 1066.67
# display.cx                   = 320.00
# display.cy                   = 533.33
# display.left                 = 0.00
# display.right                = 640.00
# display.top                  = 1066.67
# display.bottom               = 0.00

• display.width, display.height 是虚拟分辨率的尺寸
• display.cx, display.cy 是屏幕中心的坐标
• display.left, display.right, display.top, display.bottom 是屏幕四个角的坐标

有了这些“参考点”，定位内容就很简单了。

例如要在屏幕右上角放置一个按钮图片，用如下代码便可：

local x = display.right - 100 -- 图片中心在屏幕右边往左 100pt
local y = display.top   - 100 -- 图片中心在屏幕顶部往下 100pt
local sprite = display.newSprite("Button.png") -- 建立 sprite 对象用于显示图片
sprite:setPosition(x, y) -- 设置这个 sprite 对象的坐标

要在屏幕上显示一张背景图，确保图片中心和屏幕中心重叠：

local bg = display.newSprite("Background.png")
bg:setPosition(display.cx, display.cy)

因此只要合理使用“参考点”，咱们游戏里的全部内容都能作到自动适应任何分辨率。

可视区域

前面在用内容填充屏幕时，有一个问题就是不一样设备上，同一张图片可以被用户看到的内容是不一样的。在 640×1136 这样的设备上，用户能够看到所有内容。而在 768×1024 这样的设备，上下被裁剪掉的内容就比较多。

可以被用户看到的内容区域，就是场景的可视区域。这个区域正好就是“虚拟分辨率”的尺寸。

因为不一样设备的可视区域高度有变化，咱们在设计 UI 时，就要考虑到最小可视区域问题。按照 FIXED_WIDTH 的算法，目前市面上的全部设备里，最小可视区域应该就是 iPad 了，其“虚拟分辨率”只有 640×853。

但若是死板的把 UI 局限在最小可视区域中，不一样设备上的体验就很差，由于上下太多屏幕空间被浪费了。因此在 UI 设计时，就要让一些内容是“动态尺寸”的。

例以下面的界面中，底部的工具栏是固定高度，蓝色区域的高度则是根据虚拟分辨率计算的：

local toolbarHeight = 130 -- 工具栏高度 130
local padding       = 50  -- 全部的留白 50

-- 计算出内容区域的高度
local contentHeight = display.height - toolbarHeight - padding

因为 quick-cocos2d-x 支持“九宫格”图片，因此这类高度不肯定的区域，制做起来没有任何难度，稍稍练习一下就能掌握。

美术素材的准备

在理解原理后，最后一个难点就是美术素材的制做了。

美术素材主要有两类：背景图、场景元素。

对于背景图，设计师按照 1536×2280 来制做，缘由是：

1. 640×960 的参考虚拟分辨率，背景图最大尺寸是 640×1140，翻倍后是 1280×2280。
2. 考虑到可能会为 iPad 单独作优化，因此图片宽度放大到 1536。由于 Retina iPad 的屏幕分辨率是 1536×2048。

背景图制做时，也要考虑到最小可视区域问题，确保背景的主要内容在不一样分辨率下都可以被看到。若是是比较复杂的背景，也能够分为多层叠加。

例如一张背景是由远景和近处的人物构成。那么能够将远景和人物分为两张图。远景屏幕居中显示，人物则以程序进行定位，确保任何分辨率下，人物的头部都能完整显示的。这样能够取得很好的显示效果。

场景元素的制做要麻烦一些。首先，确保最小可视区域中，可以容纳一个场景的全部内容。其次，在更大屏幕上，一些场景元素（主要是 UI）要能够拉伸。基本原则是按照 640×960 翻倍，也就是 1280×1920 的尺寸来制做。一些须要拉伸的元素则作成九宫格，或者多张图的拼接。

设计师按照 1280×1920 的分辨率制做出效果图，开发人员再根据实际状况，对部分元素进行相对定位。

设计师的图像按照 100% 尺寸导出后，还须要用 Texture Packer 等工具作进一步处理。这里的处理除了打包，最主要的就是将图像缩小为 50%。这样 1536×2280 的背景图就变成了 768×1140；1280×1920 的场景就变成了 640×960。

最终，咱们仅用一套素材，就适应了全部设备。而且为 Retina iPad 和其余超高分辨率设备留下了优化的空间。

针对 iPad 的优化

因为 iPad 的屏幕宽度超过了 640，因此整个场景都会被放大一点。这样带来了两个问题：

1. 有一些轻微的模糊。
2. 场景上下的内容被裁剪较多。

要解决这个问题有两种方案：

1. 以 768×1024 为参考虚拟分辨率。
2. 单独为 iPad 设置虚拟分辨率。

第一种方法最简单。只要按照前文所述，从新计算出新的图片尺寸，并以此为基础让美术制做就能够了。不过缺点也很突出：

1. 图片的尺寸大大增长。背景图须要制做为 1536×2728，场景元素的参考分辨率是 1536×2048。这直接致使最终生成的图片尺寸变大，占用的内存增多。光是背景图，就要增长 20%。
2. 只有在 iPad 上才是不缩放显示，在其余全部设备上，场景都会缩小后显示。这对于一些文字内容，在手机上阅读起来就比较困难。虽然能够放大字体，但由于缩放的存在，字体也没法作到特别清晰。

考虑到手机用户远远多过 iPad 用户，咱们的游戏仍是以手机用户的体验为优先考虑。因此咱们采用第二种方式来优化 iPad 体验。

在游戏启动时，检测到若是是 iPad，则使用 768×1024 的虚拟分辨率。这样作比较麻烦的地方就是程序要作很多调整，确保场景元素在 640x???? 和 768×1024 两种虚拟分辨率下均可以正常显示。

从实践看，熟练的开发人员一周左右就能够作好一款休闲游戏（大概就是每天爱消除那种复杂度）的 iPad 优化。美术素材方面，除了极少数 UI 元素要作一些调整或为 iPad 单独制做一份外，其余素材均可以继续沿用。对开发成本的影响极小。

针对超高分辨率设备的优化

Retina 显示屏幕的 iPad 和一些高端 Android 手机或平板，都提供了极高的分辨率。在这些设备上要得到最好的显示效果，就必须使用超高分辨率的素材。这也是本文前面提到美术素材制做时，为何要求极高的分辨率。

不过由于超高分辨率的素材，游戏体积几乎是翻倍增长，这很是不利于游戏的传播。因此比较实际的作法仍是单独出一个版本供用户下载，或者游戏启动后检测到超高分辨率设备，再提醒用户下载资源。

这些设备的优化对程序没什么影响，由于虚拟分辨率仍然是 640×960 为基准。只须要在程序启动时，用如下代码通知引擎使用了超高分辨率的素材：

CCDirector:sharedDirector():setContentScaleFactor(2)

处理横屏

横屏的处理其实至关简单，就是把“FIXED_WIDTH”换成“FIXED_HEIGHT”。这样虚拟分辨率里，高度就变成固定的了，而宽度根据设备发生变化。至于美术素材的制做、内容定位，和竖屏的方法彻底同样。

总结

这一套方案，咱们已经用在好几个游戏里面了。不论是从成本、最终效果上看，都很不错。

对于时间、预算都很紧张的小团队来讲，连 iPad 优化那一步均可以放到后续版原本作。首先把大量手机用户的需求知足后，再来优化 iPad 体验。

最后，本文所述方案也彻底能够用在原版 cocos2d-x 中。由于原版 cocos2d-x 也具备 FIXED_WIDTH 和 FIXED_HEIGHT 两种屏幕适配策略。