用Quick-Cocos2d-x搭建一个横版过关游戏的教程1

在学习了Quick-Cocos2d-x的环境搭建和目录结构之后，我们就可以动手开发一款游戏了。由于我个人比较喜欢横版过关类型的游戏，因此本教程将以搭建横版过关游戏为例进行详细讲解。

1. 创建工程

按照之前文章的描述，使用Quick的Player创建一个名为“Brave”的工程。打开工程后，初始显示的是HelloWorld界面。接下来，将资源包中的背景图片拷贝到工程的res目录下。

使用编辑器打开scripts/目录下的Lua文件，其目录结构如下：

打开config.lua文件，将其中的内容修改为如下代码：

-- 0 - disable debug info, 1 - less debug info, 2 - verbose debug info
DEBUG = 1

-- display FPS stats on screen
DEBUG_FPS = true

-- dump memory info every 10 seconds
DEBUG_MEM = false

-- load deprecated API
LOAD_DEPRECATED_API = false

-- load shortcodes API
LOAD_SHORTCODES_API = true

-- screen orientation
CONFIG_SCREEN_ORIENTATION = "landscape"

-- design resolution
CONFIG_SCREEN_WIDTH = 1136
CONFIG_SCREEN_HEIGHT = 640

-- auto scale mode
CONFIG_SCREEN_AUTOSCALE = "FIXED_HEIGHT"

在Quick中，有关屏幕等内容的适配基本都是通过config.lua文件来实现的。下面详细介绍这些参数的含义：

• DEBUG：用于配置Quick工程的调试信息状态。取值为0时，表示关闭调试信息；取值为1时，表示打印少量调试信息；取值为2时，表示打印详细的调试信息。
• DEBUG_FPS：布尔类型参数，用于控制是否在屏幕上显示FPS信息。
• DEBUG_MEM：布尔类型参数，决定是否每10秒钟打印一次内存信息。
• LOAD_DEPRECATED_API：布尔类型参数，指示是否加载已经废弃的API。
• LOAD_SHORTCODES_API：布尔类型参数，决定是否加载短代码。
• CONFIG_SCREEN_ORIENTATION：配置游戏中的屏幕方向，但该配置无法改变游戏对系统屏幕方向的设置。例如，在Android工程中配置为横屏，即使在此处设置为竖屏，游戏运行后仍会是横屏。此参数主要用于适配时使用。
• CONFIG_SCREEN_WIDTH：表示屏幕宽度，在横屏模式下，该值对应手机屏幕的高度。
• CONFIG_SCREEN_HEIGHT：表示屏幕高度，在横屏模式下，该值对应手机屏幕的宽度。
• CONFIG_SCREEN_AUTOSCALE：指定屏幕适配的方式，常见的取值有FIXED_WIDTH和FIXED_HEIGHT。

2. 给游戏添加角色

2.1 添加背景

完成游戏适配后，打开scenes目录下的MainScene.lua文件，在ctor()方法中添加以下代码：

-- 背景
local background = display.newSprite("image/background.png", display.cx, display.cy)
self:addChild(background)

打开Quick的Player，然后刷新Player，即可看到添加背景后的效果。

在Quick框架中，display文件包含了与显示相关的部分接口。例如，若要新建一个精灵，可以调用display.newSprite；类似的接口还有display.newLayer。基本的调用格式都是display.newXXX，其中“XXX”可以是sprite、layer、node、scene等。详细信息可查看display文件。此外，display还提供了许多实用的配置属性，具体如下：

• display.width 和 display.height：分别表示屏幕的宽度和高度。
• display.cx 和 display.cy：分别表示屏幕的x轴中间位置和y轴中间位置。
• display.left 和 display.right：分别表示屏幕的最左边和最右边（x轴坐标为0和display.width的点）。
• display.top 和 display.bottom：分别表示屏幕的顶部和底部（y轴坐标为0和display.height的点）。
• display.CENTER、display.LEFT_TOP、display.CENTER_TOP等：分别表示node的锚点位置。

另外，Quick对场景切换效果、游戏的暂停和恢复等常用且代码重复量较多的方法进行了一定程度的封装，大大提高了开发效率。

在Quick中使用图片时，若图片名称以#开头，则表示从SpriteFrameCache中读取；若不以#开头，则表示直接从文件读取。

2.2 添加玩家角色

作为横版过关游戏，玩家和敌人是不可或缺的元素。在scripts/app目录下创建一个名为roles的文件夹，并在该文件夹下创建一个Player.lua文件。文件结构如下：

打开Player.lua文件，添加以下代码：

local Player = class("Player", function()
local sprite = display.newSprite("#player1-1-1.png")
return sprite
end)

function Player:ctor()
end

return Player

上述代码创建了一个以CCSprite为基类的Player类。在Quick中创建新类非常简单，廖大提供了class方法，使用该方法即可轻松创建类。下面详细介绍创建类的具体方式：

local Player = class("Player", function()

若对class方法的实现感兴趣，可以打开Quick的functions.lua文件查看具体实现。这里仅介绍其使用方法，class方法有两个参数：第一个参数是类名；第二个参数可以通过两种形式传递，一种是传入一个函数，另一种是传入一个Quick的类或者Lua对象。当传入函数时，新创建的类会将该函数作为构造函数；当传入对象时，新创建的类会以该对象为父类派生而来。

创建完玩家类后，需要将玩家添加到当前场景中。在MainScene.lua文件开始的地方添加以下代码：

local Player = import("..roles.Player")

然后在MainScene:ctor()方法中添加以下代码：

self.player = Player.new() -- display.newSprite("#player1-1-1.png")
self.player:setPosition(display.left + self.player:getContentSize().width/2, display.cy)
self:addChild(self.player)

打开Quick的Player，刷新显示，即可看到玩家角色已添加到场景中。

2.3 添加敌人

添加敌人角色的步骤与添加玩家角色类似。在roles文件夹下新建一个Enemy1.lua文件，将display.newSprite('#player1-1-1.png')修改为display.newSprite('#enemy1-1-1.png')，其他代码与Player.lua保持一致。完成后的代码如下：

local Enemy1 = class("Enemy1", function()
return display.newSprite("#enemy1-1-1.png")
end)

function Enemy1:ctor()
end

return Enemy1

在MainScene.lua的文件头添加以下代码：

local Enemy1 = import("..roles.Enemy1")

在MainScene:ctor()方法中添加以下代码：

self.enemy = Enemy1.new()
self.enemy:setPosition(display.right - self.enemy:getContentSize().width/2, display.cy)
self:addChild(self.enemy)

添加完成后，刷新Quick的Player，即可看到敌人角色已添加到场景中。

总结

本文主要介绍了Quick工程的结构、如何创建新类以及如何将精灵添加到场景中。刚入门的同学可以参考本文，向场景中添加更多元素。在下一篇文章中，我们将介绍如何在场景中添加触摸事件、为角色添加动画等功能。