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

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

概述由于项目需要实现翻牌的效果,所以自己在完成的过程中将这篇文章写下来,想想还是觉得有点艰辛。 开始在网上找解决的办法找了很久,基本上就是一种解决方案,就是用CCOrbitCamera这个Action类来模拟实现翻牌的效果。 但是我在使用的效果中始终不如人意。 用CCOrbitCamera类实现倒是能实现,但是如果将牌移动到左上、左下或者其他不在屏幕中心的位置那这个效果就不行了,翻牌的位置就错误了,类 @H_404_0@ 由于项目需要实现翻牌的效果,所以自己在完成的过程中将这篇文章写下来,想想还是觉得有点艰辛。

@H_404_0@ 开始在网上找解决的办法找了很久,基本上就是一种解决方案,就是用CCOrbitCamera这个Action类来模拟实现翻牌的效果。

@H_404_0@ 但是我在使用的效果中始终不如人意。

@H_404_0@ 用CCOrbitCamera类实现倒是能实现,但是如果将牌移动到左上、左下或者其他不在屏幕中心的位置那这个效果就不行了,翻牌的位置就错误了,类似3D的了。

@H_404_0@ 找了半天终于知道是什么原因了,Cocos2dX里面有这样的一句话,

@H_404_0@ CCDirector::sharedDirector()->setProjection(kCCDirectorProjection3D);

@H_404_0@ 就是这个3D,Cocos2DX支持透视投影和正交投影两种模式,于是乎我把kCCDirectorProjection3D改成kCCDirectorProjection2D,对了,有感觉了。

@H_404_0@ 这样一设置翻牌的动作就不是3D感了,就是正常的这种翻牌的感觉了。

@H_404_0@ 但是项目中其他的图片出现了锯齿,这就不能忍了。

@H_404_0@ 在用了很多办法都不能消除锯齿的时候我尝试到去读Cocos2dx关于设置setProjection函数的内容,看是否能够将锯齿避免,让翻转变得自然。

@H_404_0@ 最终我失败了,确实还是太菜了不行。

@H_404_0@ 我于是找替代方案来实现翻牌的动作,就找到了CCScaleto来实现,这过程确实还是比较艰辛。

@H_404_0@ 下面我把两种方案的关键代码都贴出来,方便大家看看吧。

@H_404_0@ 1. 首先还是用CCOrbitCamera类实现翻牌的效果(我封装成了一个函数)。

@H_404_0@

[cpp] view plain copy voIDHelloWorld::showObtAniUSEOrbitCamera(CCSizevisibleSize) { if(m_pCardFront!=NulL){ this->removeChild(m_pCardFront); } if(m_pCardBack!=NulL){ this->removeChild(m_pCardBack); } //加载牌的正反两面 m_pCardFront=CCSprite::create("CardFront.png"); m_pCardBack=CCSprite::create("CardBack.png"); /*m_pCardFront->setposition(ccp(visibleSize.wIDth/2-100,visibleSize.height/2+100)); m_pCardBack->setposition(ccp(visibleSize.wIDth/2-100,visibleSize.height/2+100));*/ m_pCardFront->setposition(ccp(visibleSize.wIDth/2,visibleSize.height/2)); m_pCardBack->setposition(ccp(visibleSize.wIDth/2,visibleSize.height/2)); this->addChild(m_pCardFront,5); this->addChild(m_pCardBack,5); //动画序列(延时,显示,延时,隐藏) CCSequence*pBackSeq=CCSequence::create(CCDelayTime::create(0.5f),CCShow::create(),CCDelayTime::create(0.5f),CCHIDe::create(),NulL); //持续时间、半径初始值、半径增量、仰角初始值、仰角增量、离x轴的偏移角、离x轴的偏移角的增量 CCOrbitCamera*pBackCamera=CCOrbitCamera::create(1.0f,1,-90,0); CCSpawn*pSpawnBack=CCSpawn::create(pBackSeq,pBackCamera,NulL); m_pCardBack->runAction(pSpawnBack); //动画序列(延时,隐藏,延时,显示) CCSequence*pFrontSeq=CCSequence::create(CCDelayTime::create(0.5f),108); List-style:decimal-leading-zero outsIDe; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> CCOrbitCamera*pLandCamera=CCOrbitCamera::create(1.2f,-360,248)"> CCSpawn*pSpawnFront=CCSpawn::create(pFrontSeq,pLandCamera,108); List-style:decimal-leading-zero outsIDe; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> m_pCardFront->runAction(pSpawnFront); } @H_502_198@ 上面的注释写得比较详尽了,其实不难,就是背面显示的时候把正面隐藏,正面显示了把背面隐藏,就是这么个事。 @H_404_0@

@H_404_0@ 这里面有个-90,-360是旋转的角度,可以自己尝试改了看会有什么效果。

@H_404_0@ 下面是运行的效果图:

@H_404_0@

@H_404_0@

@H_404_0@ 就是这样由背面翻转到正面,但注意,在“3D模式”下,position是设置在屏幕中间才会有这个效果,如果设置在其他位置就不是这个效果了,可以自己试试。

@H_404_0@ 如果设置成2D模式就不会有这个情况了,但是不知道你自己的项目图片会不会出现锯齿,出现锯齿的情况我没有找到解决的办法。

@H_404_0@ 2. 用CCScaleto实现的翻转

@H_404_0@ 就是因为有锯齿的情况出现我又没解决到,所以我在需找替代方案,于是乎找到了CCScaleto来实现。

@H_404_0@ 下面是关键的代码:

@H_404_0@

copy voID
HelloWorld::showObtAniUseScaleto(CCSizevisibleSize)
//把牌反转了
m_pCardFront->setFlipX(true); m_pCardFront->setposition(ccp(visibleSize.wIDth/2-100,visibleSize.height/2+100)); m_pCardBack->setposition(ccp(visibleSize.wIDth/2-100,visibleSize.height/2+100)); //动画序列(延时,隐藏,延时,隐藏) CCScaleto*pScaleBack=CCScaleto::create(1.2f,-1,1); CCSpawn*pSpawnBack=CCSpawn::create(pBackSeq,pScaleBack,248)"> m_pCardBack->runAction(pSpawnBack); //动画序列(延时,显示,延时,显示) CCSequence*pFrontSeq=CCSequence::create(CCDelayTime::create(0.5f),248)"> CCScaleto*pScaleFront=CCScaleto::create(1.2f,108); List-style:decimal-leading-zero outsIDe; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> CCSpawn*pSpawnFront=CCSpawn::create(pFrontSeq,pScaleFront,248)"> m_pCardFront->runAction(pSpawnFront); } @H_502_198@
这里主要就是要先把牌的正面 setFlipX(true)这个函数来 翻转一下,然后再绕Y轴模拟个旋转出来,如果还是不怎么清楚还请看官自己写代码试试效果。 @H_404_0@

@H_404_0@ CCScaleto参数的设置主要就是为了绕Y来旋转,具体的各种情况也可以自己试试效果,实践是检验真理的唯一标准嘛,可以设置成(1,1),(1,-1)等等试试效果。

@H_404_0@ 好了,差不多就是这样一个情况。

@H_404_0@ 可以自己试试写个HelloWord调效果,加深印象。

总结

以上是内存溢出为你收集整理的Cocos2dx实现翻牌效果(CCScaleTo与CCOrbitCamera两种方式)全部内容,希望文章能够帮你解决Cocos2dx实现翻牌效果(CCScaleTo与CCOrbitCamera两种方式)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1051446.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存