分享Cocos2d-x动作特效

Cocos2d-x提供了丰富的动作特效，例如网格动画、扭曲特效、3D瓷砖波动特效等。下面将详细介绍这些特效的实现代码。

代码实现

包含头文件

#include "ActionEffect.h"
#include "HelloWorldScene.h"

定义动作名称数组

static const char* _actionName[] = {
"CCFadeOutBLTiles",
"CCFadeOutDownTiles",
"CCFadeOutTRTiles",
"CCFadeOutUpTiles",
"CCFlipX3D",
"CCFlipY3D",
"CCJumpTiles3D",
"CCLens3D",
"CCLiquid",
"CCPageTurn3D",
"CCRipple3D",
"CCShaky3D",
"CCShakyTiles3D",
"CCShatteredTiles3D",
"CCShuffleTiles",
"CCSplitCols",
"CCSplitRows",
"CCTurnOffTiles",
"CCTwirl",
"CCWaves",
"CCWaves3D",
"CCWavesTiles3D"
};

创建场景

CCScene* ActionEffect::scene() {
CCScene* s = CCScene::create();
ActionEffect* layer = ActionEffect::create();
s->addChild(layer);
return s;
}

初始化场景

bool ActionEffect::init() {
CCLayer::init();
CCSize winSize = CCDirector::sharedDirector()->getWinSize();
CCNode* c = CCNode::create();
_c = c;

int actionCount = sizeof(_actionName) / sizeof(*_actionName);
for (int i = 0; i < actionCount; i++) {
CCLayerColor* layer;
if (i % 2 == 0) {
layer = CCLayerColor::create(ccc4(192, 192, 192, 255), winSize.width, winSize.height);
} else {
layer = CCLayerColor::create(ccc4(128, 128, 128, 255), winSize.width, winSize.height);
}
c->addChild(layer);
layer->setPosition(ccp(i * winSize.width, 0));

// 设置标题
const char* title = _actionName[i];
CCLabelTTF* label = CCLabelTTF::create(title, "Arial", 36);
layer->addChild(label, 1000);
label->setPosition(ccp(winSize.width / 2, winSize.height - 80));
}

CCScrollView* view = CCScrollView::create(winSize, c);
view->setDirection(kCCScrollViewDirectionHorizontal);
view->setContentSize(CCSize(winSize.width * actionCount, winSize.height));
addChild(view);
c->setPositionX((1 - actionCount) * winSize.width);

// 启用触摸
setTouchEnabled(true);
setTouchMode(kCCTouchesOneByOne);
return true;
}

触摸开始事件处理

bool ActionEffect::ccTouchBegan(CCTouch*, CCEvent*) {
return true;
}

测试动作函数

void ActionEffect::testAction(int idx, CCLayerColor* layer) {
CCSize winSize = CCDirector::sharedDirector()->getWinSize();
CCSprite* sprite = (CCSprite*)layer->getUserObject();
if (sprite == NULL) {
sprite = CCSprite::create("HelloWorld.png");
layer->setUserObject(sprite);
layer->addChild(sprite);
}
sprite->setPosition(ccp(winSize.width / 2, winSize.height / 2));
CCMoveBy* moveBy = CCMoveBy::create(4, ccp(0, sprite->getContentSize().height / 2 - winSize.height / 2));

const char* an = _actionName[idx];
CCAction* action = NULL;

// 根据动作名称创建不同的动作特效
if (an == "CCFadeOutBLTiles") {
// 网格从右上到左下部消失
// 第一个参数：时间
// 第二个参数：网格大小
action = CCFadeOutBLTiles::create(5, CCSize(16, 12));
} else if (an == "CCFadeOutDownTiles") {
// 网格从上到下折叠消失
// 第一个参数：时间
// 第二个参数：网格大小
action = CCFadeOutDownTiles::create(5, CCSize(16, 12));
} else if (an == "CCFadeOutTRTiles") {
// 网格从左下到右上消失
action = CCFadeOutTRTiles::create(5, CCSize(16, 12));
} else if (an == "CCFadeOutUpTiles") {
// 网格从下到上消失
action = CCFadeOutUpTiles::create(5, CCSize(16, 12));
} else if (an == "CCFlipX3D") {
// 创建一个X轴3D反转特效
action = CCFlipX3D::create(5);
} else if (an == "CCFlipY3D") {
// 创建一个Y轴3D反转特效
action = CCFlipY3D::create(5);
} else if (an == "CCJumpTiles3D") {
// 网格跳动特效
// 参数：时间, 网格大小, 次数, 振幅
action = CCJumpTiles3D::create(5, CCSize(16, 12), 56, 5.0f);
} else if (an == "CCLens3D") {
// 凸透镜特效
// 参数：时间, 网格大小, 圆心坐标, 圆半径
action = CCLens3D::create(5, CCSize(16, 12), ccp(winSize.width / 2, winSize.height / 2), 100);
} else if (an == "CCLiquid") {
// 液体特效
// 参数：时间, 网格大小, 速度, 振幅
action = CCLiquid::create(56, CCSize(16, 12), 56, 2.0f);
} else if (an == "CCPageTurn3D") {
// 3D翻页特效
action = CCPageTurn3D::create(5, CCSize(16, 12));
} else if (an == "CCRipple3D") {
// 创建一个3D水波特效
// 参数：时间, 网格大小, 坐标, 半径, 速度, 振幅
action = CCRipple3D::create(10, CCSize(16, 12), ccp(winSize.width / 2, winSize.height / 2), 100, 10, 50.0f);
} else if (an == "CCShaky3D") {
// 创建一个3D晃动的效果
// 参数：时间, 晃动网格大小, 晃动范围, Z轴是否晃动
action = CCShaky3D::create(10, CCSize(16, 12), 2, true);
} else if (an == "CCShakyTiles3D") {
// 创建一个3D瓷砖晃动的效果
// 参数：时间, 晃动网格大小, 晃动范围, Z轴是否晃动
action = CCShakyTiles3D::create(5, CCSize(16, 12), 2, true);
} else if (an == "CCShatteredTiles3D") {
// 创建一个3D破碎瓷砖特效
// 参数：时间, 晃动网格大小, 晃动范围, Z轴是否晃动
action = CCShatteredTiles3D::create(1, CCSize(16, 12), 7, true);
} else if (an == "CCShuffleTiles") {
// 瓷砖洗牌特效
// 参数：时间, 网格大小, 随机数
action = CCShuffleTiles::create(5, CCSize(16, 12), CCRANDOM_0_1() * 10000);
} else if (an == "CCSplitCols") {
// 多行消失特效（垂直）
// 参数：时间，行数
action = CCSplitCols::create(5, 9);
} else if (an == "CCSplitRows") {
// 多行消失特效（水平）
// 参数：时间，行数
action = CCSplitRows::create(5, 9);
} else if (an == "CCTurnOffTiles") {
// 方块消失
// 参数：时间, 网格大小, 随机数
action = CCTurnOffTiles::create(5, CCSize(16, 12));
} else if (an == "CCTwirl") {
// 创建一个扭曲特效
// 时间, 网格大小, 坐标, 扭曲次数, 振幅
action = CCTwirl::create(5, CCSize(16, 12), ccp(winSize.width / 2, winSize.height / 2), 5, 5.0f);
} else if (an == "CCWaves") {
// 创建一个波动效果
// 参数：时间, 晃动网格大小, 波动速度, 振幅, 是否水平波动, 是否垂直波动
action = CCWaves::create(5, CCSize(16, 12), 5, 5.0f, true, false);
} else if (an == "CCWaves3D") {
// 创建一个3D波动效果
// 参数：时间, 晃动网格大小, 波动速度, 振幅
action = CCWaves3D::create(5, CCSize(16, 12), 5, 5.0f);
} else if (an == "CCWavesTiles3D") {
// 创建一个3D瓷砖波动效果
// 参数：时间, 晃动网格大小, 波动速度, 振幅
action = CCWavesTiles3D::create(5, CCSize(16, 12), 5, 5.0f);
}

if (action) {
sprite->runAction(action);
}
}

触摸结束事件处理

void ActionEffect::ccTouchEnded(CCTouch* t, CCEvent*) {
CCPoint ptStart = t->getStartLocation();
CCPoint ptEnd = t->getLocation();
if (ptStart.getDistanceSq(ptEnd) <= 25) {
// 点击事件
// 转换ptStart为ScrollView中的Container的坐标
// 再判断被点击的LayerColor
CCPoint ptInContainer = _c->convertToNodeSpace(ptStart);
CCArray* arr = _c->getChildren(); // 所有的layercolor
for (int i = 0; i < sizeof(_actionName) / sizeof(*_actionName); i++) {
CCLayerColor* layer = (CCLayerColor*)arr->objectAtIndex(i);
if (layer->boundingBox().containsPoint(ptInContainer)) {
testAction(i, layer);
break;
}
}
}
}

以上代码展示了如何使用Cocos2d-x创建各种动作特效，通过滚动视图展示不同的特效，并在点击时触发相应的特效。你可以根据自己的需求调整参数，实现不同的视觉效果。