Cocos2D游戏之旅(三):卡牌翻转效果的实现(上)

前端之家收集整理的这篇文章主要介绍了Cocos2D游戏之旅(三):卡牌翻转效果的实现(上)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

晓石头的博客

邮箱:178673693@qq.com

转载请注明出处,原文连接:http://www.jb51.cc/article/p-fnfhtjde-vx.html

鼠标点击一次,卡牌盖住

再次点击,卡牌翻开


效果演示图

之前一直认为卡牌翻转是通过帧动画实现的,当看到@笨木头用ScaleTo做出来时候,再一次深刻体会到什么叫大道至简。

一、先谈思路

一共两张图片

1、正面


2、背面


第一步:将正面的宽度慢慢缩小至0;产生卡牌翻转到中间的效果

第二步:将一开始就把宽度缩小至0的背面放大到正常,产生卡牌盖住的效果

嘿嘿,是不是一种恍然大悟的感觉!^_^


二、再说实现

bool HelloWorld::init()
{
    if (!Layer::init())
    {
        return false;
    }
    Size visibleSize = Director::getInstance()->getVisibleSize();

	//添加背景
	CCSprite* bk = CCSprite::create("bk.png");
	bk->setPosition(Point(visibleSize.width / 2,visibleSize.height / 2));
	this->addChild(bk);

	//cardFlag为偶数时,表示牌翻开,否则盖上
	cardFlag = 0;

	//触摸事件
	EventListenerTouchOneByOne* event = EventListenerTouchOneByOne::create();
	event->setSwallowTouches(true);
	event->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan,this);
	event->onTouchMoved = CC_CALLBACK_2(HelloWorld::onTouchMoved,this);
	event->onTouchEnded = CC_CALLBACK_2(HelloWorld::onTouchEnded,this);
	_eventDispatcher->addEventListenerWithSceneGraPHPriority(event,this);

	/* 创建第一个精灵 */
	sprite1 = Sprite::create("card.jpg");
	sprite1->setPosition(Point(visibleSize.width / 2,visibleSize.height / 2));
	this->addChild(sprite1);

	/* 创建第二个精灵 */
	sprite2 = Sprite::create("bkCard.png");
	sprite2->setPosition(Point(visibleSize.width / 2,visibleSize.height / 2));
	this->addChild(sprite2);

	/* 第二个精灵默认x拉伸至0.0,于是第二个精灵在一开始是看不见的*/
	sprite2->setScaleX(0.0f);

    return true;
}


void HelloWorld::closeCard()
{
	/* x方向拉伸至0的动作 */
	ScaleTo* scaleToHide = ScaleTo::create(0.6f,0.0f,1.0f);

	/* 创建卡牌放大的回调函数 */
	auto funcScaleToShow = [=](){
		ScaleTo* scaleToShow = ScaleTo::create(0.6f,1.0f,1.0f);
		sprite2->runAction(scaleToShow);
	};

	/* 将回调函数封装为动作 */
	CallFunc* callFuncSpr2 = CallFunc::create(funcScaleToShow);

	/* 依次执行动作 */
	Sequence* sequence = Sequence::create(scaleToHide,callFuncSpr2,NULL);

	sprite1->runAction(sequence);
}

void HelloWorld::openCard()
{
	/* x方向拉伸至0的动作 */
	ScaleTo* scaleToHide = ScaleTo::create(0.6f,1.0f);

	auto funcScaleToShow = [=](){
		ScaleTo* scaleToShow = ScaleTo::create(0.6f,1.0f);
		sprite1->runAction(scaleToShow);
	};

	CallFunc* callFuncSpr1 = CallFunc::create(funcScaleToShow);
	Sequence* sequence = Sequence::create(scaleToHide,callFuncSpr1,NULL);

	sprite2->runAction(sequence);
}

bool HelloWorld::onTouchBegan(Touch *touch,Event *unused_event)
{
	return true;
}
void HelloWorld::onTouchMoved(Touch *touch,Event *unused_event)
{

}

void HelloWorld::onTouchEnded(Touch *touch,Event *unused_event)
{
	/* cardFlag为偶数则盖住卡牌,基数则打开卡牌 */
	if (0 == cardFlag%2)
	{
		closeCard();
	}
	else
	{
		openCard();
	}
	cardFlag++;
}

代码免积分下载地址:

代码一:卡牌翻转效果的实现(只有当鼠标点中卡牌才翻转)

http://download.csdn.net/detail/qiulanzhu/8957267


代码二:卡牌翻转效果的实现(有点击事件就翻转)

http://download.csdn.net/detail/qiulanzhu/8954611


对比学习会对触摸事件有更深入的理解。

猜你在找的Cocos2d-x相关文章