Cocos2d-x 3.2制作三消类游戏《万圣大作战》5：消除特效以及音效的添加

03月

1754 0

做好前期的工作之后，今天到最后的几步，很快就可以开玩自己制作的三消游戏了，有没有一点小期盼呢？

1. 四消精灵的出现

消除只有三消是不是太无聊了呢? 当然了!

所以，一定要加四消甚至更多的，我这里就加一个四消，其他的大家可以根据这个往下做一下。

先说一下，这个怎么做：

所谓四消，就是如果一次消除4个，那么会有一个类似于彩蛋的精灵，下次该精灵被消除的时候，将会消除一整行或者一整列。

所以精灵会有三种状态——普通精灵、可以横向消除的精灵、可以纵向消除的精灵

// GameDefine.h

// 精灵的显示模式，Hor 横向消除一行，Ver纵向消除一列

enum DisplayMode{

DISPLAY_MODE_NORMAL = 0,

DISPLAY_MODE_HORIZONTAL,

DISPLAY_MODE_VERTICAL,

};

不要忘了，把6种精灵各自或纵向或横向的图片载入进去。

还要在精灵类中，做一个设置精灵状态函数

// SpriteShape.cpp

// 设置精灵状态

void SpriteShape::setDisplayMode(DisplayMode mode)

{

m_displayMode = mode;

SpriteFrame *frame;

switch (mode) {

case DISPLAY_MODE_VERTICAL:

frame = SpriteFrameCache::getInstance()->getSpriteFrameByName(sprVertical[m_imgIndex]);

break;

case DISPLAY_MODE_HORIZONTAL:

frame = SpriteFrameCache::getInstance()->getSpriteFrameByName(sprHorizontal[m_imgIndex]);

break;

default:

return;

}

setDisplayFrame(frame);

}

出现四消特殊精灵，肯定是在消除的地方，所以在消除函数中，进行接下来的改动

// 检测是否有精灵可以移除

void GameScene::checkAndRemoveSprite()

{

SpriteShape *spr;

// 设定寿司的忽视检查，之前可能有精灵设置忽视检查，但这次检查要将之前所有的检查都不能忽视

for( int r = 0 ; r < ROWS ; ++r ) {

for( int c = 0 ; c < COLS ; ++c ) {

spr = map[r][c];

if( !spr ) {

continue;

}

spr -> setIgnoreCheck(false);

}

for( int r = 0 ; r < ROWS ; ++r ) {

for( int c = 0 ; c < COLS ; ++c ) {

spr = map[r][c];

// 如果该位置没有精灵

if( !spr ) {

continue;

}

// 如果该精灵需要被移除

if( spr -> getIsNeedRemove() ) {

continue;

}

// 如果该精灵是新生成的精灵

if ( spr -> getIgnoreCheck() ) {

continue;

}

// 纵向相同精灵List

std::list< SpriteShape *> colChainList;

getColChain( spr , colChainList );

// 横向相同精灵List

std::list< SpriteShape *> rowChainList;

getRowChain( spr , rowChainList );

std::list< SpriteShape *> longerList;

if( colChainList.size() >= rowChainList.size() ) {

if( colChainList.size() < 3 ) {

continue;

}

longerList = colChainList;

isRow = false;

}

else if( rowChainList.size() > colChainList.size() ) {

if( rowChainList.size() < 3 ) {

continue;

}

longerList = rowChainList;

isRow = true;

}

std::list::iterator itList;

// 标志是否需要设定忽视检查的精灵

bool isSetedIgnoreCheck = false;

for( itList = longerList.begin() ; itList != longerList.end() ; ++itList ) {

spr = ( SpriteShape * )* itList;

if( !spr ) {

continue;

}

if( longerList.size() > 3 ) {

if ( spr == staSprite || spr == endSprite ) {

isSetedIgnoreCheck = true;

spr->setIgnoreCheck(true);

spr->setIsNeedRemove(false);

spr->setDisplayMode( isRow ? DISPLAY_MODE_HORIZONTAL :DISPLAY_MODE_VERTICAL );

continue;

}

markRemove( spr );

}

// 如何是自由掉落产生的4消, 取最后一个变化为特殊精灵

if (!isSetedIgnoreCheck && longerList.size() > 3) {

spr -> setIgnoreCheck(true);

spr -> setIsNeedRemove(false);

spr->setDisplayMode( isRow ? DISPLAY_MODE_HORIZONTAL :DISPLAY_MODE_VERTICAL );

}

// 消除标记了的精灵

removeSprite();

}

运行一下，可以看到效果。

这样下来，我们已经可以在消除后，出现一些特殊的精灵，但是效果什么的还没实现。

2. 精灵的消除效果

我们先做一下单个精灵消除的效果吧，

单精灵消除，在explodeSprite中改动，之前只有精灵缩小动作，这次再加一个圆环放大：

// GameScene.cpp explodeSprite函数

// 精灵的爆炸移除

void GameScene::explodeSprite( SpriteShape* spr ) {

float time = 0.2;

// 精灵的动作

spr->runAction(Sequence::create(

ScaleTo::create(time, 0.0),

CallFuncN::create(CC_CALLBACK_1(GameScene::actionEndCallback, this)),

NULL));

// 爆炸效果圆圈的动作

auto circleSprite = Sprite::create("circle.png");

addChild(circleSprite, 10);

circleSprite->setPosition(spr->getPosition());

circleSprite->setScale(0);// start size

circleSprite->runAction(Sequence::create(ScaleTo::create(time, 1.0),

CallFunc::create(CC_CALLBACK_0(Sprite::removeFromParent, circleSprite)),

NULL));

}

然后就是横向或纵向的消除效果，这里我设置了单独两个函数

// GameScene.cpp explodeSpriteH、explodeSpriteV函数

// 精灵的横向消除

void GameScene::explodeSpecialH(Point point)

{

// 先设置相应的变量

float scaleX = 4 ;

float scaleY = 0.7 ;

float time = 0.3;

Point startPosition = point;

float speed = 0.6f;

auto colorSpriteRight = Sprite::create("colorHRight.png");

addChild(colorSpriteRight, 10);

Point endPosition1 = Point(point.x - GAME_SCREEN_WIDTH, point.y);

colorSpriteRight->setPosition(startPosition);

colorSpriteRight->runAction(Sequence::create(ScaleTo::create(time, scaleX, scaleY),

MoveTo::create(speed, endPosition1),

CallFunc::create(CC_CALLBACK_0(Sprite::removeFromParent, colorSpriteRight)),

NULL));

auto colorSpriteLeft = Sprite::create("colorHLeft.png");

addChild(colorSpriteLeft, 10);

Point endPosition2 = Point(point.x + GAME_SCREEN_WIDTH, point.y);

colorSpriteLeft->setPosition(startPosition);

colorSpriteLeft->runAction(Sequence::create(ScaleTo::create(time, scaleX, scaleY),

MoveTo::create(speed, endPosition2),

CallFunc::create(CC_CALLBACK_0(Sprite::removeFromParent, colorSpriteLeft)),

NULL));

}

// 精灵的纵向消除

void GameScene::explodeSpecialV(Point point)

{

float scaleY = 4 ;

float scaleX = 0.7 ;

float time = 0.3;

Point startPosition = point;

float speed = 0.6f;

auto colorSpriteDown = Sprite::create("colorVDown.png");

addChild(colorSpriteDown, 10);

Point endPosition1 = Point(point.x , point.y - GAME_SCREEN_HEIGHT);

colorSpriteDown->setPosition(startPosition);

colorSpriteDown->runAction(Sequence::create(ScaleTo::create(time, scaleX, scaleY),

MoveTo::create(speed, endPosition1),

CallFunc::create(CC_CALLBACK_0(Sprite::removeFromParent, colorSpriteDown)),

NULL));

auto colorSpriteUp = Sprite::create("colorVUp.png");

addChild(colorSpriteUp, 10);

Point endPosition2 = Point(point.x , point.y + GAME_SCREEN_HEIGHT);

colorSpriteUp->setPosition(startPosition);

colorSpriteUp->runAction(Sequence::create(ScaleTo::create(time, scaleX, scaleY),

MoveTo::create(speed, endPosition2),

CallFunc::create(CC_CALLBACK_0(Sprite::removeFromParent, colorSpriteUp)),

NULL));

}

设定这两个函数后，还要在消除的时候判断消除的精灵种类

// GameScene.cpp removeSprite函数

// 移除精灵

void GameScene::removeSprite()

{

// 做一套移除的动作

isAction = true;

for( int r = 0 ; r < ROWS ; ++r ) {

for( int c = 0 ; c < COLS ; ++c ) {

SpriteShape* spr = map[r][c];

if( !spr ) {

continue;

}

if( spr -> getIsNeedRemove() ) {

isFillSprite = true;

if( spr -> getDisplayMode() == DISPLAY_MODE_HORIZONTAL)

{

explodeSpecialH( spr -> getPosition() );

}

else if ( spr -> getDisplayMode() == DISPLAY_MODE_VERTICAL)

{

explodeSpecialV( spr -> getPosition() );

}

explodeSprite( spr );

}

消除效果已经做完了，运行一下试一试吧

3. 最高分的记录

记录最高分，用到了分数的本地存储，

如果对于如何实现不是很了解，可以先看一下这个：Cocos2d-x 之简单数据存储——Userdefault

现把相关的基本设定放在GameDefine.h

// GameDefine.h

// 分数存储

#define userDefault CCUserDefault::sharedUserDefault()

然后在游戏主界面中显示出来

// GameScene.cpp init函数

if(!userDefault->getIntegerForKey("Int")){

userDefault->setIntegerForKey("Int",0);

}

// 最高分

auto labelHScore = Label::createWithTTF(config, "Highest: 0");

labelHScore -> setPosition(Vec2( GAME_SCREEN_WIDTH - labelHScore->getContentSize().width , GAME_SCREEN_HEIGHT - labelHScore->getContentSize().height ));

labelHScore -> setString( StringUtils::format("Highest: %d ",userDefault->getIntegerForKey("Int")));

this->addChild(labelHScore);

最后还要在结束界面，进行一个小彩蛋，

如果是新纪录，放出一个动画，并且更新最高分

// GameOverScene.cpp setScore函数

void GameOver::setScore( int sc )

{

auto labelScore = (Label *)this -> getChildByTag(13);

labelScore -> setString( StringUtils::format(" %d ",sc));

if( userDefault->getIntegerForKey("Int") < sc ){

// 新纪录

auto newRecord = Sprite::create("sprite_newRecord.png");

newRecord -> setPosition(Point( GAME_SCREEN_WIDTH/3.05 , GAME_SCREEN_HEIGHT/1.22));

newRecord->setScale(10.0f);// start size

newRecord->runAction(ScaleTo::create(1.2f, 1.0));

this->addChild(newRecord);

userDefault->setIntegerForKey("Int",sc);

}

4. 音乐、音效的添加

一个游戏，音乐音效之类还是挺关键的，在这游戏里面添加音乐和音效吧

一些基础的东西，看这个:Cocos2d-x 3.0 背景音乐与音效

当然，第一步还是要在 GameDefine进行设定

// GameDefine.h

// 音乐音效

#include "SimpleAudioEngine.h"

#define SOUND_KEY "sound_key"

#define MUSIC_KEY "music_key"

然后在每个需要背景音乐的地方，重写虚函数

virtual void onEnterTransitionDidFinish();

virtual void cleanup();

分别在精灵消除、横向纵向消除、游戏结束界面时候出现新纪录等，这些都需要音效，具体内容还是看源码吧，我就不列出来了。

结语：

最后一篇搞定了，现在可以玩自己三消游戏啦。

又搞定了一个小游戏教程，从上一个2048到这一个三消游戏;

之前在写这些文章，有很多话想在最后结语说，但现在又什么都说不出来了。

总之，依旧奋斗下去吧，

套用之前那句话 —— 永远年轻，永远热泪盈眶

Cocos2d-x 3.2制作三消类游戏《万圣大作战》5：消除特效以及音效的添加

新手指南

我是老师

我是学生

账户管理

关于我们