零基础cocos2dx游戏开发之【水果消消乐】

本文链接：https://blog.csdn.net/cooclc/article/details/107219144

cocos2dx零基础实战【水果消消乐】

前言：

大家好，我是Lampard！！！

好久没有更新实战的博文，今天给大家分享一款游戏【水果消消乐】

本游戏是基于刘克男老师在2019年出版的【cocos2d-x游戏开发】里面提供的实战案例，修改而成

（向大家安利一下这本书，cocos开发新手拿到它可如获至宝，十分好用！！！）

本游戏不作商业用途，仅作学习使用，望周知。

接下来，将会一步一步的陪伴大家完成所有的步骤，文末会附上下载链接和资源，大家冲鸭~

消消乐大家肯定都玩过，就是通过消除相邻重复的水果来赚取积分，

当积分到达了当前关卡所要求的的最低积分时则证明通关，否则则游戏失败。

（一）先和大家展示一下游戏成品

本款游戏由三个场景构成：

一个是菜单场景，一个是游戏场景，还有一个是游戏胜利或者失败展示的场景。

点击开始按钮的时候，就会从登陆场景进入游戏场景，

游戏场景的右上角有一个target分数，下方有一个小车车时间进度条。

当玩家在进度条小时之前到达target分数则进入下一关，否则则切入失败界面。

（二）搭建环境

我们所需要的环境很简单，

分别是游戏引擎，python2的一个脚本环境，vs2017以及vs开发lua相关的BabeLua插件。

（1）python2.x

python下载可以直接在官网下面下载一个2.x版本的，然后只需要配置好环境变量就可以了

当使用win + R 打开cmd，输入python能够显示python信息，则证明环境变量配置好了。

(2)cocos引擎

引擎如果大家有cocos-quick的话可以直接用，如果没有的话可以在下面链接中下载~

cocos2d-quick游戏引擎下载

（3）vs2017

至于vs2017大家可以从官网上面下载，只需要安装时勾选cocos相关的内容就可以了

我觉得这篇文章的安装教程就写的很好

（4）BabeLua

最后是关于BabeLua插件，因为我们的vs一般是使用c++/c#这些高级语言进行开发

对于lua脚本语言我们需要安装插件来服务项目，记住BabeLua和Vs的版本一定要对应

BabeLua

（三）创建项目

（1）打开player3创建quick项目

当下载完cocos2d-quick引擎之后，我们就会出现一个player3的exe文件，

我们就是要在这个文件上面创建项目,配置游戏项目的信息。

首先我们选中新建项目按钮

然后在上面输入我们的项目信息

其中第一行是让你选择项目安装的位置，第二行是命名包体的名字

(值得一提的是，包体的命名规则一般是com.公司名.项目名)

勾选屏幕的模式，Portrait是竖屏，Landscape是横屏模式

最后点击右下角的create按钮就好啦，大家可以在自己的目录下找寻创建而成的项目。

（2）用Vs2017运行创建的项目

我们首先进入目录，找到我们工程命名的sln文件，双击就会使用vs2017进入项目

进入项目之后，只需要点击编译按钮就可以了。

编译的时候，我们可能会遇到报错，说game.rc的第十行不能解析

此时我们只需要把第十行的代码换成以下代码就可以了

#include <Windows.h>
#include <winres.h>

（3）用BabeLua插件创建Lua项目

在vs编译之后，若正常的情况下，我们就可以看到黑框框和 HelloWorld了。

但是我们发现，现在的代码还是C++构成的。说好的Lua呢？

不用急，我们之前下载的BabeLua插件这个时候就有用了。

点开Vs菜单栏的Lua插件，会展示上面的界面，以下步骤很重要！

1：填入代码存放的src路径：XXXX\newFruit\src

2：填入exe文件存放的路径：XXXX\newFruit\frameworks\runtime-src\proj.win32\Debug.win32

3: 填入3后自动会有数据，不用自己填

4：不用填

5：LuaProject的名字，自己随意命名

至此我们的环境和初始化步骤已经完全搞定，可以开心打代码啦！！！

（四）搭建menuScene

在开题的时候我们提及过，本游戏是由三个场景组成的：

分别是菜单场景，游戏主场景以及游戏结算场景。

现在我们先搭建最简单的登录场景，话不多说上代码。

（1）修改MyApp.lua

我们游戏的入口是在MyApp.lua里面执行的

我们要把enterScene里面的参数改成自己写的MenuScene

require("config")
require("cocos.init")
require("framework.init")

local MyApp = class("MyApp", cc.mvc.AppBase)

function MyApp:ctor()
    MyApp.super.ctor(self)
end

function MyApp:run()
    cc.FileUtils:getInstance():addSearchPath("res/")
    self:enterScene("MenuScene")  -- 这里要改成MenuScene
end

return MyApp

（2）编写菜单场景

我们首先要将图片音效资源放入res目录下，该资源会在文末一起免费提供。

然后我们创建一张背景图和一个切换场景按钮，然后给他们设置好位置。

然后我们还需要给按钮设置点击事件，其中使用到了addTouchEventListener这个方法

当点击了该按钮之后，我们就会执行后续的回调函数，切换到PlayScene中

local MenuScene = class("MenuScene", function()
    return display.newScene("MenuScene")
end)

function MenuScene:ctor()
    -- 加载背景图
    display.newSprite("mainBG.png")
	    :pos(display.cx, display.cy)
	    :addTo(self)

	-- 增加按钮和按钮响应的事件
	local btn = ccui.Button:create("startBtn_N.png", "startBtn_S.png", "", 1)
		:pos(display.cx, display.cy / 2)
		:addTo(self)

    btn:addTouchEventListener(function(ref, eventType)
		if cc.EventCode.ENDED == eventType then
            -- 切换场景且播放切场景特效
			local playScene = import("app.scenes.PlayScene"):new()
			display.replaceScene(playScene, "turnOffTiles", 0.5)
		end
	end)
end

function MenuScene:onEnter()
end

function MenuScene:onExit()
end

return MenuScene

"turnOffTiles" -- 是一个切换场景的特效，cocos场景之间有许多的场景切换方式

→→可以看看我之前写过的场景切换特效博文

至此我们的菜单场景就已经写好啦，让我们看看效果：

（五）水果的Item类

（1）构造水果类

在我们讲逻辑场景之前，我们先把一个水果类写好。我们的游戏当中，会出现许许多多的水果

它们的坐标不相同，图片不相同。如果每一个水果都用我们之前的newSprite方式去写则太累了

我们可以用简单的工厂模式，把水果封装成一个类，把坐标和图片当做参数去构造。

local FruitItem = class("FruitItem", function(x, y, fruitIndex)
	fruitIndex = fruitIndex or math.round(math.random() * 1000) % 8 + 1
	local sprite = display.newSprite("#fruit"  .. fruitIndex .. '_1.png')
	sprite.fruitIndex = fruitIndex
	sprite.x = x
	sprite.y = y
	sprite.isActive = false
	return sprite
end)

（2）设置水果的高亮状态

我们在点击存在同类相邻的水果时候，就会把相邻的水果显示成高亮模式。

这样子能够让玩家更方便的看出能够消除的水果，以及增加游戏体验。

function FruitItem:setActive(active)
    self.isActive = active
    local frame
    if (active) then
        frame = display.newSpriteFrame("fruit"  .. self.fruitIndex .. '_2.png')
    else
        frame = display.newSpriteFrame("fruit"  .. self.fruitIndex .. '_1.png')
    end

    self:setSpriteFrame(frame)
    if (active) then
        self:stopAllActions()
        local scaleTo1 = cc.ScaleTo:create(0.1, 1.1)
        local scaleTo2 = cc.ScaleTo:create(0.05, 1.0)
        self:runAction(cc.Sequence:create(scaleTo1, scaleTo2))
    end
end

我们使用self.isActive字段记录水果的高亮状态，当不同状态的时候显示不同的图片。

当是高亮状态的时候，我们还会顺序执行比例变换的动作，先变大再变小，增加点击触感。

ps：

cc.ScaleTo()是比例大小变化的函数

cc.Sequence()是让动作按顺序执行的函数