使用Quick-Cocos2d-x搭建一个横版过关游戏(一) CCStore

我们打开config.lua文件，将里面的内容改成下面的：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

-- 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 deprecatedAPI

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

给游戏添加角色

添加背景

这样的话游戏的适配就做好了，接下来打开scenes下的MainScene.lua文件。 在MainScene.lua文件的ctor()中添加下面两行代码

1

2

3

-- 背景

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的锚点位置。

另外还有scene切换的效果、游戏的暂停和恢复等等一系列我们经常使用，代码重复量较多的方法，都在Quick中进行了一定程度的封装，大大方便了我们在开发过程中的使用。

在Quick中使用图片有个规则，如果使用的图片是以#开头的话表示是从SpriteFrameCache中读取，如果没有使用#开头的话表示是直接从文件读取。

添加玩家角色

作为一个横版过关游戏，玩家和敌人当然都是必不可少的。在scripts/app下添加一个文件夹，取名roles,在roles下添加一个Player.lua文件。添加后的文件结构是这样的：

打开Player.lua文件，添加以下内容：

1

2

3

4

5

6

7

8

9

10

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

    local sprite = display.newSprite("#player1-1-1.png")

    returnsprite

end)

 

function Player:ctor()

 

end

 

returnPlayer

上面的代码中添加了一个以CCSprite为基类的Player类。在Quick中添加新的类的方式就是这么简单。是不是有点小激动呢。好了，添加完玩家类之后，我们要把玩家添加到当前场景中了。

在Quick中创建一个类很简单，廖大已经给我们留好了一个class方法，只需要使用这个方法就能轻松的创建一个类。我们来看下具体的创建方式： 首先第一句:

1

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

如果有同学对实现比较感兴趣的话可以打开Quick的functions.lua文件，里面有class方法的具体实现。我们这里只做使用的讲解。class方法有两个参数，第一个参数是类名。第二参数可以通过两种形式传递参数，一种是传入一个函数，另一种方式是传入一个Quick的类或者是Lua对象。当传入函数时，新创建的类会以传入的函数作为构造函数。当传入的是一个对象时，会以传入的对象为父类派生下来。

在类创建完成后必须要返回你所创建的类变量，这样外部的脚本调用时才能知道这个类的存在。

添加玩家角色到场景中

打开MainScene.lua文件，在MainScenen:ctor()中添加下面代码：

1

2

3

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)

在文件开始的地方添加:

1

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

打开Quick的Player，刷新显示，你会看到这样的结果：

添加敌人

和添加玩家角色类似，我们添加一个敌人角色，在roles下新建个Enemy1.lua，将display.newSprite('#player1-1-1.png')改成display.newSprite('#enemy1-1-1.png'),其他同Player.lua中的代码一样，完成后的代码如下：

1

2

3

4

5

6

7

8

9

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

    returndisplay.newSprite("#enemy1-1-1.png")

end)

 

function Enemy1:ctor()

 

end

 

returnEnemy1

在MainScene.lua的文件头加入

1

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

在MainScene:ctor()中加入

1

2

3

self.enemy = Enemy1.new()

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

self:addChild(self.enemy)

添加完后，刷新Quick的Player，你将会看到下面的画面：

我们打开config.lua文件，将里面的内容改成下面的：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

-- 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 deprecatedAPI

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

给游戏添加角色

添加背景

这样的话游戏的适配就做好了，接下来打开scenes下的MainScene.lua文件。 在MainScene.lua文件的ctor()中添加下面两行代码

1

2

3

-- 背景

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的锚点位置。

另外还有scene切换的效果、游戏的暂停和恢复等等一系列我们经常使用，代码重复量较多的方法，都在Quick中进行了一定程度的封装，大大方便了我们在开发过程中的使用。

在Quick中使用图片有个规则，如果使用的图片是以#开头的话表示是从SpriteFrameCache中读取，如果没有使用#开头的话表示是直接从文件读取。

添加玩家角色

作为一个横版过关游戏，玩家和敌人当然都是必不可少的。在scripts/app下添加一个文件夹，取名roles,在roles下添加一个Player.lua文件。添加后的文件结构是这样的：

打开Player.lua文件，添加以下内容：

1

2

3

4

5

6

7

8

9

10

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

    local sprite = display.newSprite("#player1-1-1.png")

    returnsprite

end)

 

function Player:ctor()

 

end

 

returnPlayer

上面的代码中添加了一个以CCSprite为基类的Player类。在Quick中添加新的类的方式就是这么简单。是不是有点小激动呢。好了，添加完玩家类之后，我们要把玩家添加到当前场景中了。

在Quick中创建一个类很简单，廖大已经给我们留好了一个class方法，只需要使用这个方法就能轻松的创建一个类。我们来看下具体的创建方式： 首先第一句:

1

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

如果有同学对实现比较感兴趣的话可以打开Quick的functions.lua文件，里面有class方法的具体实现。我们这里只做使用的讲解。class方法有两个参数，第一个参数是类名。第二参数可以通过两种形式传递参数，一种是传入一个函数，另一种方式是传入一个Quick的类或者是Lua对象。当传入函数时，新创建的类会以传入的函数作为构造函数。当传入的是一个对象时，会以传入的对象为父类派生下来。

在类创建完成后必须要返回你所创建的类变量，这样外部的脚本调用时才能知道这个类的存在。

添加玩家角色到场景中

打开MainScene.lua文件，在MainScenen:ctor()中添加下面代码：

1

2

3

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)

在文件开始的地方添加:

1

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

打开Quick的Player，刷新显示，你会看到这样的结果：

添加敌人

和添加玩家角色类似，我们添加一个敌人角色，在roles下新建个Enemy1.lua，将display.newSprite('#player1-1-1.png')改成display.newSprite('#enemy1-1-1.png'),其他同Player.lua中的代码一样，完成后的代码如下：

1

2

3

4

5

6

7

8

9

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

    returndisplay.newSprite("#enemy1-1-1.png")

end)

 

function Enemy1:ctor()

 

end

 

returnEnemy1

在MainScene.lua的文件头加入

1

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

在MainScene:ctor()中加入

1

2

3

self.enemy = Enemy1.new()

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

self:addChild(self.enemy)

添加完后，刷新Quick的Player，你将会看到下面的画面：

---------------------

Quick-Cocos2d-x 3.3中的CCStore使用说明

CocoaChina论坛2014-12-22 16:54:451631 次阅读

本文简要介绍Quick-Cocos2d-x 3.3中针对iOS的iap功能封装的CCStore。

1. CCStore源码和导出的Lua的api在哪里

a）iaptest2/frameworks/runtime-src/Classes/quick-src/extra/store/CCStore.h

b）iaptest2/src/framework/cc/sdk/Store.lua

是的，iaptest2就是项目目录。

2. 首先，在当前版本中要想正常使用CCStore需要修改两个地方

a）图中标明的两处替换为cc.Store

b）图中三处变量添加cc前缀

修改完毕，现在就可以正常使用了

3. 关于iOS工程如何开启iap支持
可以参考下面的帖子的前面的部分，这里不做啰嗦，因为Quick的iOS工程终极也是iOS工程，没区别。参考帖子：http://www.tairan.com/archives/5515

4. 现在我假定看官们已经开启了iOS工程的iap支持，也在itunesconnect添加了测试商品以及测试账号

本文的代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

function MainScene:ctor()

    --初始化商店

    Store.init(handler(self, self.storeCallback)) --function(event) self:storeCallback(event) end)

  

    --载入商品

    Store.loadProducts({"com.originaljoy.iaptest.222coin",

            "com.originaljoy.iaptest.11coin",

            "com.originaljoy.iaptest.111coin",

            "com.originaljoy.iaptest2.1111coin"

               }, handler(self, self.loadCallback))

  

    --添加一个购买按钮

    self.btn = cc.ui.UIPushButton.new("ui_btn_start.png")

    :onButtonClicked(function(event)

        print("购买商品")

        Store.purchase("com.originaljoy.iaptest2.1111coin")

    end)

    :pos(display.cx, display.cy)

    :addTo(self)

end

  

---商店的回调

function MainScene:storeCallback(transaction)

    --处理购买中的事件回调，如购买成功

    if transaction.transaction.state == "purchased" then

    print("buy success")

    Store.finishTransaction(transaction.transaction)

    end

end

  

---载入商品的毁掉

function MainScene:loadCallback(products)

    --返回商品列表

    dump(products)

end

5.store的api使用

a）Store.init(listener)

初始化商店，并设置回调函数。回调函数用来处理各种store事件，接受一个参数event

event包含一个字段，transaction! transaction就是事件的完整内容，下图就是一次购买成功后回调的transaction

b）Store.loadProducts(productsId, listener)

载入商品列表，并设置回调

回调函数接受一个参数，就是商品列表，包括可用和不可用的商品，如图

c）Store.purchase(productId)

购买一个商品，传入商品id！购买事件将会在store的回调中接收

d）Store.finishTransaction(transaction)

移除一个事件。如果你购买一个商品成功后，不移除对应的事件，再次购买会有如下提示：

this in-app purchase has already been bought it will be restored for free

以上就是重要的几个函数的使用了！

使用完的感受就是：用Quick，就这么简单！（有任何问题请在原帖与作者联系）

活动推广：

【线上活动】两小时学会用Cocos2d-lua 开发游戏

【教程征集令】Cocos引擎中文官网有奖征集优秀原创Cocos教程 奖品丰厚！