cocos2dx之实现扑克牌翻转效果的三种方法
*************************************************************************************** 时间:2015-04-10 作者:Sharing_Li 转载注明出处:http://www.52php.cn/article/p-oxjestnm-rx.html ***************************************************************************************
最近写一款家乡的牌类游戏,自己玩玩,里面涉及到扑克牌的翻牌效果,这里简单来说一下: 一说到翻转,我马上想到了OrbitCamera这个家伙,虽然很少用,但知道它有这个效果,但代码写到一半发现事实情况是这样的:
我本意是打算将扑克牌背面转到90°,也就是与屏幕垂直,这个时候,再把扑克牌正面从90°位置转到0°即正面。但是同样是转到90°,各个背面的显示不一样。代码如下: for (int j = 1; j <= 16; j++) { m_cardBg.at(j - 1)->runAction(Sequence::create(DelayTime::create(1),OrbitCamera::create(0.05 + j / 20.0,1,90,0),NULL)); } 纳闷,然后上网查了查文档,说OrbitCamera是沿屏幕中心进行球面轨迹的旋转,乍一看不知道说的啥,OrbitCamera::create函数的参数也很多,然后分析了一下,好像知道了个三二一,见下图:
所谓的旋转90°也就是垂直球面指向球心。“上有政策,下有对策”,我这里弄了一个勉强的解决方案,也就是当动画运行到上图停止时,隐藏扑克牌背面,让事先隐藏(先用orbitcamera旋转90°再隐藏)的扑克牌正面图片显示出来,然后向相反的方向调用orbitcamera旋转90°。看效果图:
在看看代码实现: for (int j = 1; j <= 16; j++) { m_cardBg.at(j - 1)->runAction(Sequence::create(DelayTime::create(1),Hide::create(),CallFunc::create([=] { m_cardVec.at(j - 1)->runAction(Sequence::create( Show::create(),-90,NULL)); }),NULL)); m_cardVec.at(j - 1)->runAction(OrbitCamera::create(0.02,0)); } 基本上有模有样了,这就是第一种方法。第二种方法其实也是用的orbitcamera实现的,勉强凑个数。先看下效果图:
可以感觉的到,效果比之前的更流畅。并且只需在之前的代码基础上加上一行代码。第一种方法弄好后,我总感觉可以再优化,刚开始打算这样弄,以中间的一张图为比较对象,将每一张图的中点,球心,和中间一张图的中心,构成三角形,比较tan值,从而设置其要旋转的角度,但是最后失败了,效果不佳,放弃了。最后,我打算进入到OrbitCamera的源代码看看。最后看到OrbitCamera::update函数中调用了一个setEye函数,然后突然想到之前第二张分析图里的箭头都指向球心,感觉就像许多眼睛都盯着球心那个地方一样。然后继续跟踪:setEye—》ActionCamera::updateTransform—》Node::setAdditionalTransform,然后发现这句代码:_transformUpdated = _transformDirty = _inverseDirty = true;这个跟对象的绘制有关,然后在Node.cpp里找到visit函数,发现跟director在搞鬼,然后继续跳到director,然后真相大白了。见如下代码:
/** * @brief Possible OpenGL projections used by director */ enum class Projection { /// Sets a 2D projection (orthogonal projection). _2D,/// Sets a 3D projection with a fovy=60,znear=0.5f and zfar=1500. _3D,/// It calls "updateProjection" on the projection delegate. CUSTOM,/// Default projection is 3D projection. DEFAULT = _3D,}; void Director::setProjection(Projection projection) { Size size = _winSizeInPoints; setViewport(); switch (projection) { case Projection::_2D: { loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION); #if CC_TARGET_PLATFORM == CC_PLATFORM_WP8 if(getOpenGLView() != nullptr) { multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION,getOpenGLView()->getOrientationMatrix()); } #endif Mat4 orthoMatrix; Mat4::createOrthographicOffCenter(0,size.width,size.height,-1024,1024,&orthoMatrix); multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION,orthoMatrix); loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW); break; } case Projection::_3D: { float zeye = this->getZEye(); Mat4 matrixPerspective,matrixLookup; loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION); #if CC_TARGET_PLATFORM == CC_PLATFORM_WP8 //if needed,we need to add a rotation for Landscape orientations on Windows Phone 8 since it is always in Portrait Mode GLView* view = getOpenGLView(); if(getOpenGLView() != nullptr) { multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION,getOpenGLView()->getOrientationMatrix()); } #endif // issue #1334 Mat4::createPerspective(60,(GLfloat)size.width/size.height,10,zeye+size.height/2,&matrixPerspective); multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION,matrixPerspective); Vec3 eye(size.width/2,size.height/2,zeye),center(size.width/2,0.0f),up(0.0f,1.0f,0.0f); Mat4::createLookAt(eye,center,up,&matrixLookup); multiplyMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION,matrixLookup); loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW); break; } case Projection::CUSTOM: // Projection Delegate is no longer needed // since the event "PROJECTION CHANGED" is emitted break; default: CCLOG("cocos2d: Director: unrecognized projection"); break; } _projection = projection; GL::setProjectionMatrixDirty(); _eventDispatcher->dispatchEvent(_eventProjectionChanged); }然后我在初始化的时候加入下面的代码,问题就解决了:
Director::getInstance()->setProjection(cocos2d::DisplayLinkDirector::Projection::_2D); 记得动画播放完之后,要还原到默认值,也就是_3D,以免对其他部分的显示造成影响。最后看看第三种方法,用到了ScaleTo,大家可能疑惑为什么这个缩放函数可以进行旋转,当我们对精灵进行如下操作的时候,setScaleX(-1),作用是以Y轴为对称轴反转,为什么呢,因为-1就是从相反的方向进行缩放,如果是-2,就是从相反的方向缩放两倍。那么同理,ScaleTo就可以有翻牌的效果啦。看如下用ScaleTo实现的效果图:
代码如下:
for (int j = 1; j <= 16; j++) { m_cardBg.at(j - 1)->runAction(Sequence::create(DelayTime::create(1),ScaleTo::create(0.05 + j / 20.0,-1,1),CallFunc::create([=] { m_cardVec.at(j - 1)->runAction(Sequence::create( Show::create(),NULL)); }),NULL)); m_cardVec.at(j - 1)->setFlippedX(true); } 到这里结束了, 免费下载资源 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |