cocos2dx之实现扑克牌翻转效果的三种方法

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了cocos2dx之实现扑克牌翻转效果的三种方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

***************************************************************************************

时间：2015-04-10

作者：Sharing_Li

转载注明出处：http://www.jb51.cc/article/p-oxjestnm-rx.html

***************************************************************************************


最近写一款家乡的牌类游戏，自己玩玩，里面涉及到扑克牌的翻牌效果，这里简单来说一下：

一说到翻转，我马上想到了OrbitCamera这个家伙，虽然很少用，但知道它有这个效果，但代码写到一半发现事实情况是这样的：

我本意是打算将扑克牌背面转到90°，也就是与屏幕垂直，这个时候，再把扑克牌正面从90°位置转到0°即正面。但是同样是转到90°，各个背面的显示不一样。代码如下：

[cpp] view plain copy
  1. for(intj=1;j<=16;j++){
  2. m_cardBg.at(j-1)->runAction(Sequence::create(DelayTime::create(1)
  3. ,OrbitCamera::create(0.05+j/20.0,1,90,0),NULL));
  5. }

纳闷，然后上网查了查文档，说OrbitCamera是沿屏幕中心进行球面轨迹的旋转，乍一看不知道说的啥，OrbitCamera::create函数的参数也很多，然后分析了一下，好像知道了个三二一，见下图：

所谓的旋转90°也就是垂直球面指向球心。“上有政策，下有对策”，我这里弄了一个勉强的解决方案，也就是当动画运行到上图停止时，隐藏扑克牌背面，让事先隐藏（先用orbitcamera旋转90°再隐藏）的扑克牌正面图片显示出来，然后向相反的方向调用orbitcamera旋转90°。看效果图：

在看看代码实现：

copy

    ,Hide::create()
  1. {
  2. m_cardVec.at(j-1)->runAction(Sequence::create(
  3. Show::create(),
  4. OrbitCamera::create(0.05+j/20.0,-90,248)"> }),NULL));
  6. m_cardVec.at(j-1)->runAction(OrbitCamera::create(0.02,0));
  7. 基本上有模有样了，这就是第一种方法。第二种方法其实也是用的orbitcamera实现的，勉强凑个数。先看下效果图：

    可以感觉的到，效果比之前的更流畅。并且只需在之前的代码基础上加上一行代码。第一种方法弄好后，我总感觉可以再优化，刚开始打算这样弄，以中间的一张图为比较对象，将每一张图的中点，球心，和中间一张图的中心，构成三角形，比较tan值，从而设置其要旋转的角度，但是最后失败了，效果不佳，放弃了。最后，我打算进入到OrbitCamera的源代码看看。最后看到OrbitCamera::update函数中调用了一个setEye函数，然后突然想到之前第二张分析图里的箭头都指向球心，感觉就像许多眼睛都盯着球心那个地方一样。然后继续跟踪：setEye—》ActionCamera::updateTransform—》Node::setAdditionalTransform，然后发现这句代码：_transformUpdated=_transformDirty=_inverseDirty=true;这个跟对象的绘制有关，然后在Node.cpp里找到visit函数，发现跟director在搞鬼，然后继续跳到director，然后真相大白了。见如下代码：

    /**
  1. *@briefPossibleOpenGLprojectionsusedbydirector
  2. */
  3. enumclassProjection
  4. {
  5. ///Setsa2Dprojection(orthogonalprojection).
  6. _2D,
  7. ///Setsa3Dprojectionwithafovy=60,znear=0.5fandzfar=1500.
  8. _3D,0); background-color:inherit">///Itcalls"updateProjection"ontheprojectiondelegate.
  9. CUSTOM,0); background-color:inherit">///Defaultprojectionis3Dprojection.
  10. DEFAULT=_3D,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> };

    voidDirector::setProjection(Projectionprojection)
  1. Sizesize=_winSizeInPoints;
  2. setViewport();
  3. switch(projection)
  4. caseProjection::_2D:
  5. loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);
  6. #ifCC_TARGET_PLATFORM==CC_PLATFORM_WP8
  7. if(getOpenGLView()!=nullptr)
  8. multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION,getOpenGLView()->getOrientationMatrix());
  9. }
  10. #endif
  11. Mat4orthoMatrix;
  12. Mat4::createOrthographicOffCenter(0,size.width,size.height,-1024,1024,&orthoMatrix);
  13. multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION,orthoMatrix);
  14. loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
  15. break;
  16. }
  17. caseProjection::_3D:
  18. floatzeye=this->getZEye();
  19. Mat4matrixPerspective,matrixLookup;
  20. #ifCC_TARGET_PLATFORM==CC_PLATFORM_WP8
  21. //ifneeded,weneedtoaddarotationforLandscapeorientationsonWindowsPhone8sinceitisalwaysinPortraitMode
  22. GLView*view=getOpenGLView();
  23. if(getOpenGLView()!=nullptr)
  24. #endif
  25. //issue#1334
  26. Mat4::createPerspective(60,(GLfloat)size.width/size.height,10,zeye+size.height/2,&matrixPerspective);
  27. Vec3eye(size.width/2,size.height/2,zeye),center(size.width/2,0.0f),up(0.0f,1.0f,0.0f);
  28. Mat4::createLookAt(eye,center,up,&matrixLookup);
  29. loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
  30. break;
  31. caseProjection::CUSTOM:
  32. //ProjectionDelegateisnolongerneeded
  33. //sincetheevent"PROJECTIONCHANGED"isemitted
  34. default:
  35. CCLOG("cocos2d:Director:unrecognizedprojection");
  36. _projection=projection;
  37. GL::setProjectionMatrixDirty();
  38. _eventDispatcher->dispatchEvent(_eventProjectionChanged);
  39. }
然后我在初始化的时候加入下面的代码，问题就解决了：

    Director::getInstance()->setProjection(cocos2d::DisplayLinkDirector::Projection::_2D);

记得动画播放完之后，要还原到默认值，也就是_3D，以免对其他部分的显示造成影响。最后看看第三种方法，用到了ScaleTo，大家可能疑惑为什么这个缩放函数可以进行旋转，当我们对精灵进行如下操作的时候，setScaleX(-1)，作用是以Y轴为对称轴反转，为什么呢，因为-1就是从相反的方向进行缩放，如果是-2，就是从相反的方向缩放两倍。那么同理，ScaleTo就可以有翻牌的效果啦。看如下用ScaleTo实现的效果图：



代码如下：

    Hide::create()
  1. ScaleTo::create(0.05+j/20.0,248)"> m_cardVec.at(j-1)->setFlippedX(true);
  2. }

到这里结束了， 免费下载资源 原文链接：https://www.f2er.com/cocos2dx/340411.html

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

创建自定义的Cocos2d-x场景
操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
给vs2010安装上cocos2d-x的模版
开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
cocos2dx 物理碰撞
https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
cocos2d-js 自定义事件监听派发
转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
cocos常用 实用 公共函数 lua代码
公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
cocos creator box2d
title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
（转）让quick-cocos2d-x支持加密的plist文件
前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
（转）quick-cocos2d-x图片资源加密(续)
摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
Cocos Creator 动态改变sprite图片
首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签