三消游戏就是合成三个点击即可消除的一类游戏，今天我们以这类游戏为例进行一个实例学习。就以时下很多玩家喜欢的万圣大作战为素材吧。
1.准备工作
前期步骤，比如配置环境，可以参考有关Cocos2d-x 3.0 WIN7+VS2012 平台搭建的知识，3.0的基本都通用的，至少3.2没问题。
建立一个项目
第一步，调整下分辨率。
在 AppDelegate.cpp 中的函数：
bool AppDelegate::applicationDidFinishLaunching() {
// initialize director
auto director = Director::getInstance();
auto glview = director->getOpenGLView();
if(!glview) {
glview = GLView::create("My Game");
director->setOpenGLView(glview);
glview -> setFrameSize(320,480);
}
glview->setDesignResolutionSize(480, 800, ResolutionPolicy::EXACT_FIT);
// turn on display FPS
director->setDisplayStats(true);
// set FPS. the default value is 1.0/60 if you don't call this
director->setAnimationInterval(1.0 / 60);
// create a scene. it's an autorelease object
auto scene = HelloWorld::createScene();
// run
director->runWithScene(scene);
return true;
}
2.界面的制作
然后，制作开始界面啦~
新建一个类 WelcomeScene
WelcomeScene.h:
#ifndef __WELCOME_SCENE_H__
#define __WELCOME_SCENE_H__
#include "cocos2d.h"
class WelcomeScene : public cocos2d::Layer
{
public:
static cocos2d::Scene* createScene();
virtual bool init();
void menuStartCallback( Ref* pSender );
CREATE_FUNC(WelcomeScene);
};
#endif // __WELCOME_SCENE_H__
噢，对了，这中间还有一件事情，先建立一个 GameDefine.h。这个头文件，用来放一些关于游戏的宏定义，这次用来放 画布的宽高，后面还用来放一些 其他定义。
#ifndef _Inkmoo_Elimination_h_
#define _Inkmoo_Elimination_h_
// 定义屏幕宽高，这与所做的图片有关
#define GAME_SCREEN_WIDTH 480
#define GAME_SCREEN_HEIGHT 800
#endif
现在，我们就可以在其他文件用这些放宏定义了。
WelcomeScene.cpp:
#include "WelcomeScene.h"
#include "GameDefine.h"
USING_NS_CC;
Scene* WelcomeScene::createScene() {
auto scene = Scene::create();
auto layer = WelcomeScene::create();
scene->addChild(layer);
return scene;
}
// 欢迎界面 初始化函数
bool WelcomeScene::init() {
// 先初始化父类，不成功返回false
if( !Layer::init() ) {
return false;
}
// 添加背景图片
auto sprite = Sprite::create("scene_sta.png");
sprite->setPosition(Point(GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT/2));
this->addChild(sprite);
// 添加开始按钮
auto startItem = MenuItemImage::create(
"btn_start01.png",
"btn_start02.png",
CC_CALLBACK_1(WelcomeScene::menuStartCallback, this));
startItem->setPosition(Vec2(GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT/6));
auto menu = Menu::create(startItem, NULL);
menu->setPosition(Vec2::ZERO);
this -> addChild( menu );
return true;
}
void WelcomeScene::menuStartCallback( Ref* pSender )
{
// 跳转到游戏界面
}
OK，开始界面做了，连带开始按钮都完成了，接下来就是 游戏界面啦!
GameScene.h:
#ifndef __GAME_SCENE_H__
#define __GAME_SCENE_H__
#include "cocos2d.h"
class GameScene : public cocos2d::Layer
{
public:
static cocos2d::Scene* createScene();
virtual bool init();
// 返回欢迎界面函数
void menuBackCallback( Ref* pSender );
CREATE_FUNC(GameScene);
};
#endif // __GAME_SCENE_H__
然后就是，cpp文件：
#include "GameScene.h"
#include "GameDefine.h"
#include "WelcomeScene.h"
USING_NS_CC;
Scene* GameScene::createScene() {
auto scene = Scene::create();
auto layer = GameScene::create();
scene->addChild(layer);
return scene;
}
// 欢迎界面 初始化函数
bool GameScene::init() {
// 先初始化父类，不成功返回false
if( !Layer::init() ) {
return false;
}
// 添加背景图片
auto sprite = Sprite::create("scene_bg.png");
sprite->setPosition(Point(GAME_SCREEN_WIDTH/2,GAME_SCREEN_HEIGHT/2));
this->addChild(sprite,-1);
// 添加返回按钮
auto backItem = MenuItemImage::create(
"btn_back01.png",
"btn_back02.png",
CC_CALLBACK_1(GameScene::menuBackCallback, this));
backItem->setPosition(Vec2(GAME_SCREEN_WIDTH-backItem->getContentSize().width/2,backItem->getContentSize().height/2));
auto menu = Menu::create(backItem, NULL);
menu->setPosition(Vec2::ZERO);
this -> addChild( menu );
return true;
}
// 返回函数，跳转到欢迎界面
void GameScene::menuBackCallback( Ref* pSender ) {
auto scene = WelcomeScene::createScene();
CCDirector::sharedDirector()->replaceScene(scene);
}
对了，不要忘了之前 欢迎界面的相应函数(开始按钮函数)，也要修改咯：
void WelcomeScene::menuStartCallback( Ref* pSender )
{
// 跳转到游戏界面
auto scene = GameScene::createScene();
CCDirector::sharedDirector()->replaceScene(scene);
}
OK，现在我们可以运行一下，欢迎界面，点击 >开始< 进入游戏界面，在游戏界面点击 >返回主菜单< 回到欢迎界面!
3.精灵相关
前面这些都是准备工作，太稀了，一点都不干啊。
接下来，要做的就是添加相应的精灵了。
这些精灵的材料都存在一张png里，用TexturePacker压缩即可。(如果不会用的话，请参考《Cocos2d-x 3.x使用plist和png制作动画》)
三消游戏，主要就是精灵的创造-移动-消除。
这些精灵在游戏界面的存储，类似于二维表格，向里面放精灵。
所以 精灵要有一个单独的类来管理，
SpriteShape.h:
#include "cocos2d.h"
#include "GameDefine.h"
USING_NS_CC;
class SpriteShape : public Sprite
{
public:
static SpriteShape* create( int row , int col );
CC_SYNTHESIZE(int, m_row, Row);
CC_SYNTHESIZE(int, m_col, Col);
CC_SYNTHESIZE(int, m_imgIndex, ImgIndex);
};
关于 create函数，这个函数就是根据传进来的 行列值，在相应位置创建精灵。
下面的 CC_SYNTHESIZE ,就是相当于自动生成两个函数，就以 CC_SYNTHESIZE(int,m_row,Row)来说，就是 定义一个int类型的保护型变量 m_row,再定义一个 setRow函数 和 getRow函数，可以对m_row操作。
接下来就是 精灵类的CPP：
#include "SpriteShape.h"
SpriteShape *SpriteShape::create(int row, int col)
{
SpriteShape *spr = new SpriteShape();
spr->m_row = row;
spr->m_col = col;
spr->m_imgIndex = rand() % TOTAL_SPRITE;
spr->initWithSpriteFrameName(spriteNormal[spr->m_imgIndex]);
spr->autorelease();
return spr;
}
这个函数实现方法，就是先定位这个精灵的位置，通过传参，然后再获取一个随机数，对应相应的图片，当然随机数范围要在种类数内。然后再根据随机数获取到图片。
关于这些精灵种类数和精灵图片，都存在了GameDefine中了：
// GameDefine.h
// 定义每个精灵大小与边框大小
#define SPRITE_WIDTH 48
#define BOADER_WIDTH 2
// 游戏精灵行数和列数
#define ROWS 8
#define COLS 8
// 精灵种类总数
#define TOTAL_SPRITE 6
// 普通的精灵
static const char *spriteNormal[TOTAL_SPRITE] = {
"icon1.png",
"icon2.png",
"icon3.png",
"icon4.png",
"icon5.png",
"icon6.png"
};
好了，精灵类创建完了，要在游戏界面显示出来了，之前有说过，游戏界面其实就是一个大二维表格，肯定先要创建这个表格，然后定义一个初始化地图函数，把表格都初始化，实现起来，也不是很难：
// GameScene.cpp
// 初始化地图
void GameScene::initMap( ) {
for( int r = 0 ; r < ROWS ; ++r ){
for( int c = 0 ; c < COLS ; ++c ){
createSprite(r,c);
}
}
}
// 创建精灵
void GameScene::createSprite( int row , int col ) {
// 先创建一个寿司
SpriteShape* spr = SpriteShape::create(row, col);
Point endPosition = positionOfItem(row, col);
spr -> setPosition( endPosition );
// 加入到spriteSheet中,等待绘制
spriteSheet -> addChild(spr);
// 数组相应位置，置上寿司对象
map[row][col] = spr;
}
// 根据行列，获取坐标值
Point GameScene::positionOfItem(int row , int col)
{
float x = mapLBX + (SPRITE_WIDTH + BOADER_WIDTH) * col + SPRITE_WIDTH / 2;
float y = mapLBY + (SPRITE_WIDTH + BOADER_WIDTH) * row + SPRITE_WIDTH / 2;
return Point(x, y);
}
现在，运行一下，精灵就出现在游戏界面啦。
4.再额外加一点改进
现在实现出来的这个样子有些太平面了，稍微2.1D一下，整个下落动作。
这个动作也很好做，就是在创建精灵的时候，放在原来位置上面的位置一些距离，然后通过一定速度进行下落到原来位置，就是加一个action。
// GameScene.cpp
// 创建精灵
void GameScene::createSprite( int row , int col ) {
// 先创建一个寿司
SpriteShape* spr = SpriteShape::create(row, col);
// 创建下落动画
Point endPosition = positionOfItem(row, col);
Point startPosition = Point(endPosition.x, endPosition.y + GAME_SCREEN_HEIGHT / 2);
spr->setPosition(startPosition);
float speed = startPosition.y / (1.5 * GAME_SCREEN_HEIGHT );
spr->runAction(MoveTo::create(speed, endPosition));
// 加入到spriteSheet中,等待绘制
spriteSheet -> addChild(spr);
// 数组相应位置，置上寿司对象
map[row][col] = spr;
}
Ok，现在可以运行下试一试啦~
