Cocos2D游戏之旅（四）：卡牌翻转效果的实现（下）

晓石头的博客

邮箱：[email protected]

转载请注明出处，原文连接：http://blog.csdn.net/qiulanzhu/article/details/47356461

 

上篇讲解了用ScaleTo缩放卡牌，达到翻转的效果。

条条大道通罗马，RotateBy 旋转卡牌同样能够实现，而且效果更棒，就看你喜欢哪种了！

效果对比图

一、先谈思路：

用ScaleTo缩放卡牌实现翻转的思路移步：卡牌翻转效果的实现（上）

理解了ScaleTo 的思路，再看RotateBy 就一目了然了。

一共两张图片

1、正面

1、背面

产生卡牌盖住的效果：

第一步：将正面旋转90度；产生卡牌翻转到中间的效果

第二步：将一开始就旋转90度的背面再旋转90度，产生卡牌盖住的效果

 

产生卡牌翻开的效果：

第三步：将背面旋转90度，背面隐藏起来。

第四步：正面有270度旋转至360，恢复至卡牌打开的原状。

二、再说实现

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 = 0;
	touchable = 1;

	/* 创建第一个精灵 */
	sprite1 = Sprite::create("card.png");
	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旋转至90度，于是第二个精灵在一开始是看不见的*/
	sprite2->setRotationY(90);
	

	/* 触摸事件 */
	EventListenerTouchOneByOne* event = EventListenerTouchOneByOne::create();
	/* true表示触摸事件不向下传递，如果有两种重叠的卡牌，就只有第一张能接受到触摸事件。false则两张卡牌都能接受到触摸事件 */
	event->setSwallowTouches(true);

	event->onTouchBegan = [=](Touch* touch, Event* event){
		/* 取出绑定的精灵 */
		auto target = static_cast(event->getCurrentTarget());
		/* 将触摸点的屏幕坐标转换成openGL里的坐标 */
		Point point = Director::getInstance()->convertToGL(touch->getLocationInView());

		/* 判断触摸点是否在精灵范围内 */
		/* 在范围为则返回true，执行onTouchEnded，否则false,不执行onTouchEnded */
		/* touchable控制触摸是否有效，避免动作执行完成前又触摸，产生动作混乱的效果 */
		if (target->getBoundingBox().containsPoint(point) && 1 == touchable)
		{
			touchable = 0;
			return true;
		}
		else
		{
			return false;
		}
	};

	event->onTouchEnded = [=](Touch* touch, Event* event){
		switch (cardFlag % 4)
		{
			/* 旋转方式盖住卡牌 */
		case 0:
			sprite2->setRotationY(90);
			sprite2->setScaleX(1.0f);
			closeCard();
			break;

			/* 旋转方式打开卡牌 */
		case 1:
			openCard();
			break;

			/* 缩放方式盖住纸牌 */
		case 2:
			sprite2->setRotationY(0);
			sprite2->setScaleX(0.0f);
			closeCard2();
			break;

			/* 缩放方式打开纸牌 */
		case 3:
			openCard2();

		default:
			break;
		}
		cardFlag++;

		auto funcSettouchable = [&](){
			touchable = 1;
		};

		CallFunc* callFuncTouch = CallFunc::create(funcSettouchable);

		/* 用顺序动作保证动作完成后再让触摸有效 */
		/* touchable用于控制触摸是否有效 */
		Sequence* sequence = Sequence::create(CCDelayTime::create(1.2f), callFuncTouch, NULL);
		this->runAction(sequence);
	};

	/* 注册监听事件，绑定精灵1 */
	_eventDispatcher->addEventListenerWithSceneGraphPriority(event, sprite1);
	/* 注册监听事件，绑定精灵2，事件监听对象event复制了一份 */
	_eventDispatcher->addEventListenerWithSceneGraphPriority(event->clone(), sprite2);

    return true;
}

void HelloWorld::closeCard()
{
	/* x方向旋转90度的动作 */
	RotateBy* rotateToHide = RotateBy::create(0.6f, 0, 90);

	/* 创建卡牌旋转90度的回调函数 */
	auto funcScaleToShow = [&](){
		RotateBy* rotateToShow = RotateBy::create(0.6f, 0, 90);
		sprite2->runAction(rotateToShow);
	};

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

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

	sprite1->runAction(sequence);
}

void HelloWorld::openCard()
{
	/* x方向旋转90度的动作 */
	RotateBy* rotateToHide = RotateBy::create(0.6f, 0, 90);

	/* 创建卡牌旋转90度的回调函数 */
	auto funcScaleToShow = [=](){
		/* 这里如果不这只是270度，卡牌翻转后和原来的画面是左右颠倒的 */
		sprite1->setRotationY(270);
		RotateBy* rotateToShow = RotateBy::create(0.6f, 0, 90);
		sprite1->runAction(rotateToShow);
	};

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

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

	sprite2->runAction(sequence);
}


void HelloWorld::closeCard2()
{
	/* 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::openCard2()
{
	/* x方向拉伸至0的动作 */
	ScaleTo* scaleToHide = ScaleTo::create(0.6f, 0.0f, 1.0f);

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

	CallFunc* callFuncSpr1 = CallFunc::create(funcScaleToShow);

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

	sprite2->runAction(sequence);
}

源代码免积分下载地址：http://download.csdn.net/detail/qiulanzhu/8976341