用遮罩实现扑克牌翻牌的效果

最新推荐文章于 2021-01-14 04:13:30 发布
最新推荐文章于 2021-01-14 04:13:30 发布
阅读量1.7k 收藏 1
点赞数
分类专栏： Cocos2dx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huluoboyou/article/details/39430611
版权

项目中要实现扑克牌随着手指翻牌的效果，当时想到的是利用类似帧动画来做，后面一个同事也提到可以用遮罩效果来实现，基本思路就是这两个了，一个是类似帧动画来实现，一个是遮罩实现；其实感觉还有更好的方式，就是OpenGL绘制实现，类似IOS和Android的翻书页效果，可惜能力有限；

类似帧动画的实现效果，算是比较简单的，但是有一个问题就是图片太多了，最后生成的包也太大了，所以中途也变成了用遮罩来实现，遮罩我也不太熟悉，有需要的可以看下网上其他资料，好了，不多说了，贴代码，里面有比较详细的注释，相信大家都看得懂的；

先是.h文件：

#ifndef POKEREFFECT_H

#define POKEREFFECT_H


#include "cocos2d.h"

USING_NS_CC;


class PokerEffect :public Layer

{

public:

   static PokerEffect * create();

   virtual bool init();

    

private:

   virtual void onEnter();

   bool onBegin(Touch * touch,Event * event);

   void onMoved(Touch * touch,Event * event);

   void onEnded(Touch * touch,Event * event);

    

public:

   Sprite * maskedSpriteWithSprite(Sprite * textureSprite,Sprite * maskSprite, float Ratio);

    

private:

   Sprite * mMaskedCal;//被遮罩出来的精灵

   Sprite * mEffectSprite;//特效精灵

   Size mVisibleSize;//屏幕可视的大小

   float mOffset;// 手指点击的偏移

    

   Point mTouchPoint;//手指点击的坐标

   Point mSpritePoint;//精灵的坐标

   Point mFirstTouchPoint;//触屏的第一个点坐标

   Point mFirstImagePoint;//第一张图片的大小

    

   std::vector<float>  mOffsetPoint;//横向手指偏移量数组

   std::vector<float>  mMaskRatio;//横向遮罩比例

   std::vector<float>  mVerticalPoint;//竖向手指偏移量数组

   std::vector<float>  mVerticalMaskRatio;//竖向遮罩比例

    

   ssize_t mIsRefresh;//是否刷新

   bool isHorizontal;//是否横、竖

   bool isRotation;//是否旋转

    

   void initVector();//容器数值初始化

   void setCardPokerEffect(int i,bool isHorizontal);//横向或竖向翻牌

   void setCardRotation(Touch * touch);//牌旋转

};



#endif //


再是.cpp文件：

#include "PokerEffect.h"


PokerEffect* PokerEffect::create()

{

PokerEffect* pRet =new PokerEffect();

if (pRet && pRet->init())

{

pRet->autorelease();

return pRet;

}

else

{

delete pRet;

pRet =NULL;

returnNULL;

}

}


bool PokerEffect::init()

{

if (!Layer::init())

{

returnfalse;

}


mVisibleSize =Director::getInstance()->getWinSize();

    isHorizontal =true;

    isRotation = true;

    

Sprite * oo =Sprite::create("background.jpg");

oo -> setPosition(mVisibleSize.width /2, mVisibleSize.height /2);

oo -> setScale(mVisibleSize.height / oo->getContentSize().height);

this ->addChild(oo);


    initVector();

    

    mIsRefresh = 0;

    

    mEffectSprite =Sprite::create("01.png");

mEffectSprite ->setAnchorPoint(Point(0,1));

mEffectSprite ->setPosition(mVisibleSize.width /2 - mEffectSprite -> getContentSize().width /2, mVisibleSize.height /2 + mEffectSprite -> getContentSize().height /2);

mFirstImagePoint =mEffectSprite -> getPosition();

this ->addChild(mEffectSprite);


EventListenerTouchOneByOne * listener =EventListenerTouchOneByOne::create();

listener -> setSwallowTouches(true);

listener ->onTouchBegan = CC_CALLBACK_2(PokerEffect::onBegin,this);

listener ->onTouchMoved = CC_CALLBACK_2(PokerEffect::onMoved,this);

listener ->onTouchEnded = CC_CALLBACK_2(PokerEffect::onEnded,this);

_eventDispatcher->addEventListenerWithSceneGraphPriority(listener,this);


returntrue;

}


boolPokerEffect::onBegin(Touch * touch,Event * event)

{

mTouchPoint = touch ->getLocation();

    setCardRotation(touch);

    

returntrue;

}

voidPokerEffect::onMoved(Touch * touch,Event * event)

{

mOffset = touch->getLocation().y -mTouchPoint.y ;

int i =0;


if (mOffset >0)

{

for (; i <mOffsetPoint.size(); i++)

{

if (mOffset <=mOffsetPoint.at(i))

break;

}

}


if (mIsRefresh == i)

return;


    if (mSpritePoint.y <=mFirstTouchPoint.y < (mSpritePoint.y +mEffectSprite -> getContentSize().height /10)) {

        setCardPokerEffect(i,isHorizontal);

    }

}


voidPokerEffect::onEnded(Touch * touch,Event * event)

{

}


voidPokerEffect::onEnter()

{

Layer::onEnter();


mMaskedCal =this -> maskedSpriteWithSprite(

Sprite::create("01.png"), 

Sprite::create("mask_bg.png")

,1);

mMaskedCal ->setPosition(mVisibleSize.width /2, mVisibleSize.height /2);

mMaskedCal ->setVisible(false);

this ->addChild(mMaskedCal);

// mMaskedCal -> setTag(101);


}


// 设置牌旋转

voidPokerEffect::setCardRotation(Touch * touch)

{

//    mTouchPoint = Point(0, touch -> getLocation().y - mOffsetPoint.at(mIsRefresh));

   mFirstTouchPoint = touch -> getLocation();

    mSpritePoint =Director :: getInstance() ->convertToGL(mEffectSprite ->getPosition());

    

    if (mFirstTouchPoint.y >= (mSpritePoint.y + mEffectSprite -> getContentSize().height /5)

        && mEffectSprite ->getBoundingBox().containsPoint(mFirstTouchPoint)) {

       if (isRotation) {

           if (isHorizontal) {

                mEffectSprite ->setPosition(Point(mVisibleSize.width /2 + mEffectSprite -> getContentSize().width /3, mVisibleSize.height /2 + mEffectSprite -> getContentSize().height /2));

               mEffectSprite -> setRotation(90);

               mEffectSprite -> setTag(1);

               isHorizontal = false;

                

            }else {

               this -> removeChildByTag(1);

               this -> removeChildByTag(2);

               mEffectSprite = Sprite::create("01.png");

               mEffectSprite -> setAnchorPoint(Point(0,1));

                mEffectSprite ->setPosition(mVisibleSize.width /2 - mEffectSprite -> getContentSize().width /2, mVisibleSize.height /2 + mEffectSprite -> getContentSize().height /2);

                mFirstImagePoint =mEffectSprite -> getPosition();

               this -> addChild(mEffectSprite);

               isHorizontal = true;

            }

        }

    }

    

}


// 设置翻牌的动画

voidPokerEffect::setCardPokerEffect(int i,bool isHorizontal)

{

   if (i < 10)

    {

       if (i < 1) {

           isRotation = true;

        }else {

           isRotation = false;

        }

        

       mIsRefresh = i;

       if (isHorizontal) {

           mEffectSprite -> removeFromParent();

           mEffectSprite = Sprite::create(String::createWithFormat("%02d.png", i + 1) -> getCString());

           mEffectSprite -> setAnchorPoint(Point(0,1));

            mEffectSprite ->setPosition(mFirstImagePoint);

           this -> addChild(mEffectSprite);

            

           mMaskedCal -> removeFromParent();

            mMaskedCal =this -> maskedSpriteWithSprite(

                                                       Sprite::create("J01.png"),

                                                       Sprite::create("mask_bg.png"),

                                                       mMaskRatio.at(i));

           mMaskedCal -> setAnchorPoint(Point(0,0));

            mMaskedCal ->setPosition(mFirstImagePoint.x, (mFirstImagePoint.y - mEffectSprite -> getContentSize().height) - (1 - mMaskRatio.at(i)) *mMaskedCal -> getContentSize().height /2);

           this->addChild(mMaskedCal);

            

        }else {

           mEffectSprite -> removeFromParent();

           mEffectSprite = Sprite::create(String::createWithFormat("p%02d.png", i + 1) -> getCString());

            mEffectSprite ->setPosition(Point(mVisibleSize.width /2 - mEffectSprite -> getContentSize().width /2, mFirstImagePoint.y));

           mEffectSprite -> setAnchorPoint(Point(0,1));

           mEffectSprite -> setTag(2);

           this -> addChild(mEffectSprite);

            

           mMaskedCal -> removeFromParent();

            mMaskedCal =this->maskedSpriteWithSprite(

                                                     Sprite::create("J02.png"),

                                                     Sprite::create("mask_bg_vert.png"),

                                                     mVerticalMaskRatio.at(i));

           mMaskedCal -> setAnchorPoint(Point(0,0.5));

            mMaskedCal ->setPosition(mVisibleSize.width /2 - mEffectSprite -> getContentSize().width /2 + 25,

                                     mEffectSprite -> getPosition().y -mEffectSprite -> getContentSize().height +mMaskedCal-> getContentSize().height *mVerticalMaskRatio.at(i) /2

                                      );

           this -> addChild(mMaskedCal);

            

        }

    }

}


// 初始化数值

voidPokerEffect::initVector()

{

    //横向手指移动的距离

    mOffsetPoint.push_back(0);

    mOffsetPoint.push_back(20);

    mOffsetPoint.push_back(90);

    mOffsetPoint.push_back(110);

    mOffsetPoint.push_back(150);

    mOffsetPoint.push_back(220);

    mOffsetPoint.push_back(270);

    mOffsetPoint.push_back(300);

    mOffsetPoint.push_back(310);

    

    // 横向偏移量

    mMaskRatio.push_back(0);

    mMaskRatio.push_back(0);

    mMaskRatio.push_back(0);

    mMaskRatio.push_back(0);

    mMaskRatio.push_back(0);

    mMaskRatio.push_back(0.075);

    mMaskRatio.push_back(0.175);

    mMaskRatio.push_back(0.3);

    mMaskRatio.push_back(0.475);

    mMaskRatio.push_back(1);

    

    //竖向手指移动的距离

    //   mVerticalPoint.push_back(0);

    //   mVerticalPoint.push_back(20);

    //   mVerticalPoint.push_back(70);

    //   mVerticalPoint.push_back(120);

    //   mVerticalPoint.push_back(200);

    //   mVerticalPoint.push_back(250);

    //   mVerticalPoint.push_back(300);

    //   mVerticalPoint.push_back(350);

    //   mVerticalPoint.push_back(400);

    

    // 竖向偏移量

    mVerticalMaskRatio.push_back(0);

    mVerticalMaskRatio.push_back(0);

    mVerticalMaskRatio.push_back(0);

    mVerticalMaskRatio.push_back(0.055);

    mVerticalMaskRatio.push_back(0.1);

    mVerticalMaskRatio.push_back(0.155);

    mVerticalMaskRatio.push_back(0.2);

    mVerticalMaskRatio.push_back(0.245);

    mVerticalMaskRatio.push_back(0.445);

    mVerticalMaskRatio.push_back(1);

}


// 创建遮罩

Sprite *PokerEffect::maskedSpriteWithSprite(Sprite *textureSprite,Sprite *maskSprite , float Ratio)

{


maskSprite->setPosition(textureSprite->getContentSize().width / 2, textureSprite->getContentSize().height /2);

maskSprite->setScaleY(Ratio);

Point textureSpritePoint =Point(textureSprite->getContentSize().width /2, textureSprite->getContentSize().height /2 * Ratio);

textureSprite->setPosition(textureSpritePoint);


    /*****************RenderTexture实现的四个步骤*****************/

    

    //1、创建RenderTexture类，以像素为单位，指定你想要绘制的纹理的宽度和高度

RenderTexture *rt =RenderTexture::create(textureSprite->getContentSize().width, maskSprite->getContentSize().height);


//2、调用RenderTexture的begin方法来初始化渲染操作

rt->begin();


    //{src color,destination color}   把将要画上去的颜色为“源颜色”，把原来的颜色称为“目标颜色”,“目标颜色”为屏幕：黑色，“源颜色”为maskSprite（即白色的图片，但是四角Alpha值减小），{GL_ONE,GL_ZERO}可知目标颜色*GL_ZERO,源颜色*GL_ONE,得到的为源颜色

BlendFunc blenfuc1 = {GL_ONE, GL_ZERO };

maskSprite->setBlendFunc(blenfuc1);


    //“目标颜色”为屏幕：上面计算后的颜色，“源颜色”为textureSprite，{GL_DST_ALPHA,GL_ZERO}可知目标颜色*GL_ZERO,源颜色*GL_DST_ALPHA（屏幕的Alpha值）

BlendFunc blenfuc2 = {GL_DST_ALPHA, GL_ZERO };

textureSprite->setBlendFunc(blenfuc2);


    //3、调用OpenGl函数来绘制实际的内容，这些OpenGl调用的最终都会绘制到屏幕之外去，而不会影响游戏中现在渲染的图像。

    //如果想要渲染一个节点的话，可以直接调用某个节点的visit方法，如sprite—>visit()，然后这个函数会自动发射一些OpenGl函数指针给图形硬件去显示

maskSprite->visit();

textureSprite->visit();

    

    //4、调用RenderTexture的end方法来借宿绘制操作，一旦你完成之后，rendertexture有一个sprite属性，你可以把它当Sprite来用

    rt->end();

Sprite *retval =Sprite::createWithTexture(rt->getSprite()->getTexture());

retval->setFlippedY(true);//同时翻转y，因为纹理创建出来是倒的

    

return retval;

}


额，第一次写博客，不知道文件图片怎么弄，我把类文件和图片资源上传了，给个地址：http://download.csdn.net/detail/huluoboyou/7947075

huluoboyou
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
[CocosCreator]扑克翻牌效果
11-01
CocosCreator扑克翻牌效果,利用mask组件特性. http://blog.csdn.net/pppxxx1983/article/details/78411157
cocoscreator 翻牌效果
04-12
cocoscreator 翻牌效果cocoscreator 翻牌效果cocoscreator 翻牌效果
Test3(cocos creator + TypeScript 实现翻牌效果)
04-25
cocos creator + TypeScript 实现翻牌效果，本教程演示版本creator V2.07
FlipTimerView-优雅的数字翻牌效果.zip
09-23
PreviewFlipTimerView library for AndroidGetting startedAdd it in your root build.gradle at the end of repositories:allprojects { repositories { ... maven { url 'https://jitpack.io' } } }Step 2. Add the dependencydependencies {         implementation 'com.github.anugotta:FlipTimerView:v1.3' }UsageAdd the CountDownClock in your layoutAPItimerProgramCountdown.startCountDown(99999999)         timerProgramCountdown.setCountdownListener(object : CountDownClock.CountdownCallBack {             override fun countdownAboutToFinish() {                 //TODO Add your code here             }             override fun countdownFinished() {                 Toast.makeText(this@MainActivity, "Finished", Toast.LENGTH_SHORT).show()                 timerProgramCountdown.resetCountdownTimer()             }         })
ios 扑克牌效果轮播_ios图片轮播效果
weixin_31221157的博客
01-14 156
@optional- (void)didClick:(NSInteger)index;@end@interface shufflingView : UIView{float _automaticScrollDelay;ImageCarouselStyleType _carouselViewStyle;}@property(nonatomic, strong) NSArray *picDataArr...
遮罩实现手指翻牌效果
09-20
"遮罩实现手指翻牌效果"是一个典型的增强用户体验的技术应用，它结合了遮罩技术和手势识别，使用户可以通过手指动作实现卡片翻转，增加互动性和趣味性。下面我们将详细探讨这一技术实现的原理和步骤。 首先，我们要...
moviepy音视频剪辑：使用mask遮罩实现视频叠加透明效果.rar
09-16
在Python的世界里，moviepy是一个强大的库，它允许开发者进行复杂的音视频编辑任务，包括添加遮罩（mask）来实现这种效果。本篇文章将深入探讨如何使用moviepy来创建和应用mask，实现视频的透明叠加。 首先，了解...
Qt之实现遮罩窗口，实现了窗口遮罩效果
07-24
在Qt编程中，实现遮罩窗口（mask window）是一种常见的需求，主要用于在界面操作时提供视觉提示或防止用户误操作。遮罩窗口通常是一个半透明的覆盖层，它允许底层窗口的部分可见，但限制用户的交互。本文将详细介绍...
Android实现遮罩层（蒙板）效果
08-26
Android 实现遮罩层（蒙板）效果是指在 Android 开发中使用遮罩层来实现progressbar 的填充效果。遮罩层（蒙板）效果是通过控制任意一张图片的显示百分比来实现遮罩效果的。下面我们将详细介绍 Android 实现遮罩层...
ios 扑克牌效果轮播_缩放效果的轮播图 iOS
weixin_35681725的博客
01-14 415
111.gif做个一个缩放的轮播图，基本实现功能。简单的记录下思路:因为屏幕展示有三张图，所以传入的图片要先添加4张，左边两张(倒数第二张，倒数第一张)，右边两张(第一张，第二张)1、实现图片缩放功能(主要代码)-(void)scaleImagevWithCenterX:(CGFloat)centerx{for (UIImageView *imagev in self.imgViewArr) {/...
ios应用源码之发一个模拟扑克 开局和出牌的动画效果 pocker_fortest 2018127
12-07
ios应用源码之发一个模拟扑克 开局和出牌的动画效果 pocker_fortest
利用iOS开发实现翻转扑克牌动画的方法
08-29
主要给大家介绍了关于利用iOS开发实现翻扑克牌动画的方法，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来跟着小编一起学习学习吧。
扑克牌Carousel效果
11-10
在IOS上实现的扑克牌Carousel效果，是在【code4app.com】下载的，转给大家。
Java模拟扑克牌洗牌发牌过程
01-28
改程序为用JAVA语言模拟扑克牌洗牌、发牌的过程，经测试，可以运行。
WPF制作的3D翻牌记忆游戏
10-14
游戏规则是先在规定的时间内（可以设置）记忆所有纸牌的位置，然后由电脑提示要找出的纸牌，直到找出所有纸牌为止。翻出鬼牌，会盖上所有已经找出的纸牌，翻错纸牌会盖上当前种类已翻出的纸牌。游戏目前没有测出问题，如发现问题，请在评论里留言。
cocos2d-x 翻牌效果 动画 flip card effect
D&J
05-06 1172
//*** .h class FakeRotateY : public cocos2d::RotateTo { public: /* creates the action / static FakeRotateY* create(float duration, float startAngle, float dstAngle, float depth); /* c
CSS实现LOL皮肤简单3D翻牌效果
法拉驴出品
12-28 406
效果预览 HTML &lt;body background=800.jpg style=background-repeat:no-repeat;background-size:100% 100%;&gt; &lt;audio autoplay loop="loop"&gt; &lt;source src="冰雪节.mp3"&gt; &lt;/audio&gt; &lt;!-- 代码部分b
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值