【Cocos2d-x】实现翻牌效果

翻牌效果可以使用CCOrbitCamera实现,这是一个CCAction,使精灵视角按照球面坐标轨迹 围绕屏幕中心进行旋转。【关于CCOrbitCamera】

翻牌需要两个精灵,一个表示牌的正面,一个表示牌的背面。当执行翻牌动作的时候:初始化正面的角度为向左90度、背面为0度——背面向右旋转90度——正面向右旋转90度,这就实现了一个翻牌的效果。

api说明:

t:动作时长

radius:球的半径

deltaRadius:球半径偏移量

angleZ:开始时z轴角度

deltaAngleZ:z轴角度偏移量

angleX:开始时x轴角度

deltaAngleX:x轴角度偏移量

static CCOrbitCamera* create(float t, float radius, float deltaRadius, float angleZ, float deltaAngleZ, float angleX, float deltaAngleX);

实现

PokerSprite.h

#ifndef __POKERSPRITE_H__
#define __POKERSPRITE_H__

#include "cocos2d.h"
USING_NS_CC;

/*
	具有翻牌效果的CCSprite
*/
class PokerSprite:public CCSprite
{
public:
	/**
	*	创建一个PokerSprite
	*	front	牌的正面
	*	back	牌的背面
	*/
	static PokerSprite* create(const char* front, const char* back);
	/**
	*	创建一个PokerSprite
	*	front	牌的正面
	*	back	牌的背面
	*/
	static PokerSprite* create(CCSprite* front, CCSprite* back);
	/* 翻牌
	 * duration  动作时长(秒)
	*/
	void open(float duration=1.5);
protected:
	bool initWithSprite(CCSprite* fornt, CCSprite* back);
	bool initWithTexture(CCTexture2D* fornt, CCTexture2D* back);
private:
	CCSprite* front; // 正面
	CCSprite* back;	 // 背面
};

#endif

PokerSprite.cpp

#include "PokerSprite.h"

PokerSprite* PokerSprite::create(const char* front, const char* back){
	PokerSprite* pSrpite = new PokerSprite();

	if (pSrpite->initWithTexture(CCTextureCache::sharedTextureCache()->addImage(front),CCTextureCache::sharedTextureCache()->addImage(back)))
	{
		pSrpite->autorelease();
		return pSrpite;
	}
	delete pSrpite;
	return NULL;
}

PokerSprite* PokerSprite::create(CCSprite* front, CCSprite* back){
	PokerSprite* pSrpite = new PokerSprite();

	if (pSrpite->initWithSprite(front,back))
	{
		pSrpite->autorelease();
		return pSrpite;
	}
	delete pSrpite;
	return NULL;
}

bool PokerSprite::initWithTexture(CCTexture2D* ptFront, CCTexture2D* ptBack){

	front = CCSprite::createWithTexture(ptFront);
	back = CCSprite::createWithTexture(ptBack);

	if (front && back && CCSprite::init())
	{
		//扑克牌正面
		front->setVisible(false);
		this->addChild(front);
		//扑克牌背面
		this->addChild(back);

		return true;
	}

	return false;
}

bool PokerSprite::initWithSprite(CCSprite* pFornt, CCSprite* pBack){

	if (front && back && CCSprite::init())
	{
		front = pFornt;
		back = pBack;

		//扑克牌正面
		front->setVisible(false);
		this->addChild(front);
		//扑克牌背面
		this->addChild(back);

		return true;
	}

	return false;
}

void PokerSprite::open(float duration){

	if (front && back)
	{
		front->stopAllActions();
		back->stopAllActions();

		// 正面z轴起始角度为90度(向左旋转90度),然后向右旋转90度
		CCOrbitCamera* orbitFront = CCOrbitCamera::create(duration*0.5,1,0,90,-90,0,0);
		// 正面z轴起始角度为0度,然后向右旋转90度
		CCOrbitCamera* orbitBack = CCOrbitCamera::create(duration*0.5,1,0,0,-90,0,0);

		front->setVisible(false);
		// 背面向右旋转90度->正面向左旋转90度
		back->runAction(CCSequence::create(CCShow::create(),orbitBack,CCHide::create(),
			CCTargetedAction::create(front,CCSequence::create(CCShow::create(),orbitFront,NULL)),NULL));
	}else{
		CCLOG("[ERROR] PokerSprite front or back not init.");
	}
}

调用示例

示例代码:

CCSize size = CCDirector::sharedDirector()->getVisibleSize();
//创建PokerSrpite,指定正面和背面所使用的图片路径
poker = PokerSprite::create("front.png", "back.png");

//创建PokerSrpite,指定正面和背面所使用的CCSprite
//CCSprite* front = CCSprite::create("front.png")
//front->addChild(img);
//poker = PokerSprite::create(front, CCSprite::create("back.png"));

// 设置位置
poker->setPosition(ccp(size.width0.5, size.height0.5));

// 添加到Layer
addChild(poker);

//调用翻牌动作
poker->open();

项目地址:https://coding.net/u/linchaolong/p/Cocos2d-x_PokerSprite/git

时间: 2024-10-24 23:00:38

【Cocos2d-x】实现翻牌效果的相关文章

【JQuery插件】扑克正反面翻牌效果

里面有两个demo,支持X横向和Y纵向翻转两个效果. 对元素的布局有一定的讲究,需要分析一下demo的css. 默认翻转速度为80,不要大于100ms. <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>[JQuery插件]扑克正反面翻牌效果</ti

拣宝--进行时--翻牌效果展示

拣宝网作为中国首家新型购物模式的网站,以“免费赠送”为宗旨,与多家知名品牌商家进行合作,为拣宝者提供价格不等不同种类的产品,拣宝者可以通过抽奖的方式获得自己需要的产品.同时网站上还提供了合作商家网站的商品链接.拣宝者可以打开链接进行购物.这种新型的购物模式一出现就受就到人们广泛的关注和喜爱.每天都有上万的拣宝者进入拣宝网站浏览抽奖产品参与抽奖活动,中奖的拣宝者都会晒出自己所免费获得的宝贝,分享喜悦的获奖心情.据统计,每天中奖额度达几十万元.如此大的诱惑,使得拣宝者每天乐此不疲的参与抽奖活动.作为

HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果.就是鼠标移到元素上,感觉能够看到元素背后的信息. 大家假设制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放在使用该实例制作的相冊之后都能够尝试下,哈~ 效果图: 实例用到的一些CSS3的新属性:  a.-webkit-perspective: 800px; perspective (透视,视角):属性定义 3D 元素距视图的距离.以像素计.该属性同意您改变 3D 元素查看 3D 元素的视图. 决定了你

使用JS与CSS3的翻转实现3D翻牌效果

之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用--3D翻牌效果. 这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角,需要在父级元素上添加类名viewport-flip或者直接添加如下CSS: -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective的中文意思是:透视,视角!该属性的存在与否决定了你所看到的是2次元的还是3次元的,也就是是2

Cocos2d-x实现简易翻牌效果

翻牌效果网上找了好多,复杂点的有自己重写一个sprite类来实现,简单的就利用引擎自带的动作CCOrbitCamera来实现,但是存在一些问题,图片旋转之后变反了. 我在用的只是一个简单的翻牌效果,点击之后图片翻牌,翻到一半之后图片切换到另外一面,再继续剩下的旋转. 注:下面的代码只能翻牌一次,第二次就会乱了,当然,我需要的也只是翻牌一次而已. 简单的加载图片: pSprite = CCSprite::create("iv_card_1.png"); pSprite->setPo

【CSS3 DEMO】扑克正反面翻牌效果

用到两个属性: 一个是动画时间 transition-duration: 0.8s; -moz-transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; 一个是3d transform: rotate3d(0,1,0,-180deg); -webkit-transform: rotate3d(0,1,0,-180deg); -moz-transform: rotate3d

Cocos2d-x实现简单的翻牌效果

触发器互联网影响找了很多.有自己的点重写一个复杂的sprite类来实现.简单的操作来对引擎的使用CCOrbitCamera实现,但是,也存在一些问题,后变反了. 我在用的仅仅是一个简单的翻牌效果,点击之后图片翻牌,翻到一半之后图片切换到另外一面.再继续剩下的旋转. 注:以下的代码仅仅能翻牌一次,第二次就会乱了.当然,我须要的也仅仅是翻牌一次而已. 简单的载入图片: pSprite = CCSprite::create("iv_card_1.png"); pSprite->setP

backface-visibility制作翻牌效果

今天案例的灵感来自于下图: 这次没有仿着做这个案例,我只是做了一下翻牌效果,成品如下 html代码 <section> <div>正面</div> <div>反面</div> </section> css样式 backface-visibility不能放在div:nth-child(2)反面中,需放在div中,不然转的时候会看到正面 div:nth-child(1){ background:pink; } div:nth-child(

Cocos2dx实现翻牌效果(CCScaleTo与CCOrbitCamera两种方式)

由于项目需要实现翻牌的效果,所以自己在完成的过程中将这篇文章写下来,想想还是觉得有点艰辛. 开始在网上找解决的办法找了很久,基本上就是一种解决方案,就是用CCOrbitCamera这个Action类来模拟实现翻牌的效果. 但是我在使用的效果中始终不如人意. 用CCOrbitCamera类实现倒是能实现,但是如果将牌移动到左上.左下或者其他不在屏幕中心的位置那这个效果就不行了,翻牌的位置就错误了,类似3D的了. 找了半天终于知道是什么原因了,Cocos2dX里面有这样的一句话, CCDirecto