cocos2d-x扫光按钮加酷炫效果

 

 

今天用cocos2d-x做了一个扫光按钮，效果如下：

由于是录频生成Gif的，效果不太逼真。

做这个按钮的素材都是我自己用PS做的，有以下文件：

 

 

cocos2d-x代码头文件如下：

#ifndef __STARTBTN_H__
#define __STARTBTN_H__
#include "cocos2d.h"
using namespace cocos2d;
class HelloWorld;
class StartBtn :public cocos2d::Sprite
{
public:
	static StartBtn* create();
	virtual bool init();
	void timeout(float dt);
	void setEnabled(bool b);
	CC_SYNTHESIZE(HelloWorld*, _gameMain, GameMain);
	virtual bool onTouchBegan(cocos2d::Touch* touch, cocos2d::Event* event);
	virtual void onTouchEnded(cocos2d::Touch* touch, cocos2d::Event* event);
	virtual void onTouchCancelled(cocos2d::Touch* touch, cocos2d::Event* event);
	virtual void onTouchMoved(cocos2d::Touch* touch, cocos2d::Event* event);
private:
	bool isEnabled = true;
	Rect _rect;
};
#endif

源文件如下：

#include "StartBtn.h"
#include "HelloWorldScene.h"
StartBtn * StartBtn::create()
{
	StartBtn *sprite = new (std::nothrow) StartBtn();
	if (sprite && sprite->init())
	{
		sprite->autorelease();
		return sprite;
	}
	CC_SAFE_DELETE(sprite);
	return nullptr;
}

bool StartBtn::init()
{
	auto bound = Sprite::create("img/game/btn/btn_bound.png");
	bound->setTag(888);
	addChild(bound);
	auto btnBg=Sprite::create("img/game/btn/btn_bg.png");
	Sprite* start = Sprite::create("img/game/btn/start_game.png");
	_rect= Rect(-btnBg->getContentSize().width / 2, -btnBg->getContentSize().height / 2, btnBg->getContentSize().width, btnBg->getContentSize().height);
	addChild(btnBg);
	addChild(start);
	scheduleOnce(schedule_selector(StartBtn::timeout), 2.0f);
	auto touchListener = EventListenerTouchOneByOne::create();
	touchListener->setSwallowTouches(true);
	touchListener->onTouchBegan = CC_CALLBACK_2(StartBtn::onTouchBegan, this);
	touchListener->onTouchMoved = CC_CALLBACK_2(StartBtn::onTouchMoved, this);
	touchListener->onTouchEnded = CC_CALLBACK_2(StartBtn::onTouchEnded, this);
	touchListener->onTouchCancelled = CC_CALLBACK_2(StartBtn::onTouchCancelled, this);
	_eventDispatcher->addEventListenerWithSceneGraphPriority(touchListener, this);

	auto clip = ClippingNode::create();//创建裁剪节点  
	clip->setStencil(btnBg);//设置裁剪模板  
	clip->setAlphaThreshold(0);//设置透明度阈值  
	clip->setContentSize(Size(btnBg->getContentSize().width, btnBg->getContentSize().height));//设置裁剪节点大小      
	auto clipSize = clip->getContentSize();//获取裁剪节点大小  

	auto spark = Sprite::create("img/game/btn/guang.png");//创建闪亮精灵  
	spark->setPosition(Vec2(-clipSize.width / 2, 0));//设置闪亮精灵位置  
	clip->addChild(spark, 2);//添加闪亮精灵到裁剪节点  
	addChild(clip, 4);//添加裁剪节点  

	auto moveAction = MoveTo::create(1.5, Vec2(clipSize.width, 0));//创建精灵节点的动作  
	auto moveBack = MoveTo::create(0.0, Vec2(-clipSize.width, 0));
	auto delay = DelayTime::create(2.0f);
	auto seq = Sequence::create(moveAction, CallFunc::create([&, bound] {
		//外面光环
		auto seq2 = Sequence::create(Spawn::create(ScaleTo::create(1.0, 1.2), FadeOut::create(1.0), NULL), ScaleTo::create(0.2, 1), FadeIn::create(0.2), NULL);
		bound->runAction(seq2);
	}) ,  moveBack,delay,NULL);
	auto repreatAction = RepeatForever::create(seq);
	spark->runAction(repreatAction);//精灵节点重复执行动作  
	return true;
}

void StartBtn::timeout(float dt)
{
	//删除隐藏的小球
	log("%d", getChildren().size());
	for (auto ball : getChildren())
	{
		if ((ball->getOpacity() == 0 || !ball->isVisible())&& ball->getTag()!=888)
		{
			removeChild(ball,true);
		}
	}
	srand(time(nullptr));
	Size size = _rect.size;
	for (int i = 0; i < 15; i++)
	{
		Sprite* ball = Sprite::create("img/game/btn/ball.png");
		//随机位置生成15个小球向上走
		float x = 40 + rand() % 480 -size.width/2;
		float y=60+rand() % 50-size.height/2;
		ball->setPosition(x,y);
		addChild(ball);
		ball->runAction(Spawn::create(MoveTo::create(3.0f, Vec2(x+10,y+80)), FadeOut::create(3.0), NULL)) ;
	}
	scheduleOnce(schedule_selector(StartBtn::timeout), 2.0f);
}

void StartBtn::setEnabled(bool b)
{
	if (!b)
		setColor(Color3B::GRAY);
	isEnabled = b;
}

bool StartBtn::onTouchBegan(cocos2d::Touch * touch, cocos2d::Event * event)
{
	
	//触点事件
	if (!isVisible() || getOpacity() < 100)
	{
		return false;
	}
	if (!isEnabled)
		return false;
	Point posStart = this->convertTouchToNodeSpace(touch);
	//Rect rect = Rect(-btnBg->getContentSize().width/2, -btnBg->getContentSize().height/2, btnBg->getContentSize().width / 2, btnBg->getContentSize().height / 2);
	//("%f,%f,%f,%f,%f,%f",posStart.x,posStart.y, rect.origin.x, rect.origin.y, rect.size.width, rect.size.height);
	if (_rect.containsPoint(posStart))
	{
		runAction(Sequence::create(ScaleTo::create(0.5, 0.4), NULL));
		return true;
	}
	return false;
}

void StartBtn::onTouchEnded(cocos2d::Touch * touch, cocos2d::Event * event)
{
	runAction(Sequence::create(ScaleTo::create(0.5, 0.5), NULL));
	Point posStart = this->convertTouchToNodeSpace(touch);
//	Rect rect = Rect(-btnBg->getContentSize().width / 2, -btnBg->getContentSize().height , btnBg->getContentSize().width / 2, btnBg->getContentSize().height);
	if (_rect.containsPoint(posStart))
	{
		//执行主场景中的事件
		_gameMain->startGame();
	}
}

void StartBtn::onTouchCancelled(cocos2d::Touch * touch, cocos2d::Event * event)
{
}

void StartBtn::onTouchMoved(cocos2d::Touch * touch, cocos2d::Event * event)
{
}

 

以上就是这个效果的源码，如有错误欢迎指正！