Quick-Cocos2d-x初学者游戏教程2

上一章我们已经了解了Quick的一些基础知识，所以本章我们将开始深入到Quick内部，了解它内部的代码结构，同时在解析的过程中学到相应的原理，并学会如何修改、添加相应的代码文件，比如实现屏幕的分辨率适配。

前面我们创建了一个叫做parkour的游戏项目，其意思就是本人本来打算要做一个跑酷游戏的，但是因为这几天玩了一款叫做《el》的飞行游戏，非常有意境，并且几乎零差评，所以请允许我任性一下，善变的我不想做跑酷游戏了，而是想要挑战下这种类型的游戏。

《el》其实蛮类似跑酷游戏的，同时，它也很像前段时间超火的《Flappy bird》，喜欢这类游戏风格的童鞋不妨可以下载下来玩玩（我木有打广告，不是软文，不是）。

解析代码文件

正如上面所说的一样，本教程改做飞行游戏了。于是乎，我重新创建了一个叫做el的游戏项目。然后打开Sublime编辑器，把整个游戏项目都拖到该编辑器中，这样既方便代码编辑，又方便相关属性的查找。

下面我们就来打开新项目的src文件夹，一个一个的解析里面的lua文件吧。

1、config.lua

首先，打开config.lua文件，config文件中保存了游戏项目一些重要的属性配置，包括调试信息状态、屏幕大小、屏幕适配的方式等等。

下面是它现有属性的具体含义：

• DEBUG: 配置Quick工程的调试信息状态，0表示关闭，1表示打印少量调试信息，2表示打印标准调试信息。
• DEBUG_FPS: 是否显示模拟器左下角的FPS信息
• DEBUG_MEM: 是否要每10秒打印一次内存信息
• LOAD_DEPRECATED_API: 是否加载已经废弃了的API
• LOAD_SHORTCODES_API: 是否加载短代码
• CONFIG_SCREEN_ORIENTATION: 游戏中的屏幕方向，landscape横屏，portrait竖屏。
• CONFIG_SCREEN_WIDTH: 屏幕宽度，但屏幕方向为“landscape”横屏时，该属性表示屏幕的高度
• CONFIG_SCREEN_HEIGHT: 屏幕高度，但屏幕方向为“landscape”横屏时，该属性表示屏幕的宽度
• CONFIG_SCREEN_AUTOSCALE: 屏幕适配策略，如FIXED_WIDTH、FIXED_HEIGHT和FILL_ALL

这些属性都是创建项目时默认配置好的，当然我们可以根据项目需要对这些值进行修改，比如进行分辨率适配时。此外，在config文件中我们也可以加入自定义的一些属性，比如声音、字体、图片、网络配置等等常量和宏的定义。

既然都提起了分辨率适配，那么接下来我们就来看看如何进行分辨率适配吧。

分辨率适配原理

众所周知，现今市场中各种屏幕尺寸和分辨率的移动设备（特别是Android机）层出不穷，所以为了让我们开发的程序项目能够更好地适应这些设备的不同需求，它的分辨率适配就显的尤其的重要。

如果读者之前对Cocos2d-x的分辨率适配原理有一点的了解，那么我想这部分内容理解起来应该是很容易的，但考虑了下初学者，所以下面我们还是简单的说说原理吧。

Cocos2d-x以及Quick中图片显示到屏幕有下面两个逻辑过程，两个过程结合在一起，影响了最终的显示效果。

1. 资源布局到设计分辨率;
2. 设计分辨率布局到屏幕。

其中设计分辨率是指我们在config文件中设置的CONFIG_SCREEN_WIDTH 和 CONFIG_SCREEN_HEIGHT，它相当于一个参考分辨率。只有确定了我们的参考分辨率，才能得到我们的图片资源的缩放比例。

在第一个过程中，我们需要通过以下函数来完成相应的转换：

cc.Director:getInstance():setContentScaleFactor(value)

setContentScaleFactor方法决定了图片资源显示到屏幕的缩放因子，顾名思义就是决定了整个游戏内容放大或者缩小的比例系数。
它的参数由（背景图片资源宽高／设计分辨率宽高）得到，而不是通过（背景图片资源宽高／屏幕宽高）得来。这样也就避开了游戏开发者去直接关注移动设备的实际屏幕。

setContentScaleFactor通常会用两个方式来设置参数，不同的设置方法会有不同的缩放负作用。

• 用（资源高／设计分辨率高）的高度比作为参数，也就是内容的缩放因子，这样保证了背景资源的垂直方向在设计分辨率范围内的全部显示，但在水平方向上可能会溢出屏蔽或留有黑边。
• 用（资源宽／设计分辨率宽）的宽度比作为内容缩放因子，保证了背景资源的水平方向在设计分辨率范围内的全部显示，但在垂直方向上可能会超出屏蔽范围或留有黑边。

第二个过程中，我们需要通过以下函数接口完成转换：

setDesignResolutionSize(width, height, cc.ResolutionPolicy)

setDesignResolutionSize方法会在display.lua中被调用，所以这里我们不用管它，只需要注意它的参数设置就好。
其中参数 width 和 height 指的是设计分辨率的宽、高，cc.ResolutionPolicy 是分辨率适配策略，它们分别由config.lua文件中的 CONFIG_SCREEN_WIDTH、CONFIG_SCREEN_HEIGHT 和 CONFIG_SCREEN_AUTOSCALE来设置。
Quick中CONFIG_SCREEN_AUTOSCALE的值有三种情况：

• FIXED_WIDTH：保持传入的设计分辨率宽度不变，根据屏幕分辨率修正设计分辨率的高度。
• FIXED_HEIGHT：保持传入的设计分辨率高度不变，根据屏幕分辨率修正设计分辨率的宽度。
• FILL_ALL：保证了设计区域总有一个方向铺满屏幕，另一个方向可能超出屏幕或留有黑边。

以上两个过程相辅相成，它们相互影响，所以做好分辨率适配必须确保两步坚固。
说到这里我不得不提的是，在做分辨率适配的时候，常有人忽略以上的第一个过程，因此作为小白的我还是会经常遇到那么一些人问：为什么我的分辨率适配护好了还是有黑边，还是有问题？
对此我要说：请设置内容缩放因子。

下面我们以本教程游戏作为例子，看看具体的实现方法。

分辨率适配的实现

本教程将做一个横屏的飞行游戏，我们需要做到让背景图在高度方向上全部显示，所以显然地，如果高度方向上全部显示，那么在宽度方向上必然会做出一些牺牲（要么被裁减，要么留黑边（留黑边的问题可以通过将图片宽度做得更宽一点来解决））。

要实现这上述目标，需要保证各过程都是在宽度方向上裁减。所以我们给出了以下的实现过程：

1、首先我们选择 1136 x 640 的图片资源，这样宽高比够大，能确保在某些极端的分辨率下也能完整不留黑边的显示整个游戏画面。

2、接着打开src/config.lua，设置配置信息，如下：

CONFIG_SCREEN_ORIENTATION = "landscape"

CONFIG_SCREEN_WIDTH  = 480

CONFIG_SCREEN_HEIGHT = 320

CONFIG_SCREEN_AUTOSCALE = "FIXED_HEIGHT"

CONFIG_SCREEN_ORIENTATION这个配置告诉 Quick 引擎，游戏是横屏的。该参数是拿来适配的时候使用的。

注意：如果使用 Cocos Code IDE 调试程序，那么请确保config.json配置文件的isLandscape 字段值为true，两者保持一致。反正，若游戏是竖屏，那么请确保isLandscape值为false。

对于 CONFIG_SCREEN_WIDTH 和 CONFIG_SCREEN_HEIGHT 的配置，其实我觉得只要配置好 CONFIG_SCREEN_AUTOSCALE 和内容缩放因子，那就不会有什么问题。

因为是横屏游戏，所以我们选择了 FIXED_HEIGHT 作为适配模式——让 Y 轴方向能完全显示在屏幕上。

3、最后，打开src/app/MyApp.lua，修改run()方法，加入内容缩放因子。

function MyApp:run()

    cc.FileUtils:getInstance():addSearchPath("res/")

    cc.Director:getInstance():setContentScaleFactor(640 / CONFIG_SCREEN_HEIGHT)

    self:enterScene("MainScene")

end

因为我们选择了FIXED_HEIGHT。故此，计算内容缩放因子时，其参数为：资源高度 / 屏幕分辨率高度。关于MyApp:run()方法，我们后面将做详细的讲解。

好了，本章我们就到这里吧！也不知道是不是我太啰嗦，写了这么多居然才讲了一个.lua文件，看来下章开始不能再啰嗦了。另外，以上分辨率适配的验证将在后面添加资源图片的时候得到验证。