Cocos2dx实现翻牌效果（CCScaleTo与CCOrbitCamera两种方式）

2024-04-06 04:32
文章标签 实现 方式 效果 两种 cocos2dx 翻牌 ccscaleto ccorbitcamera

本文主要是介绍Cocos2dx实现翻牌效果（CCScaleTo与CCOrbitCamera两种方式），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

由于项目需要实现翻牌的效果，所以自己在完成的过程中将这篇文章写下来，想想还是觉得有点艰辛。

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

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

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

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

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

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

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

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

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

最终我失败了，确实还是太菜了不行。

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

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

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

[cpp]  view plain copy
  1. void HelloWorld::showObtAniUseOrbitCamera( CCSize visibleSize )  
  2. {  
  3.     if (m_pCardFront != NULL){  
  4.         this->removeChild(m_pCardFront);  
  5.     }  
  6.     if (m_pCardBack != NULL){  
  7.         this->removeChild(m_pCardBack);  
  8.     }  
  9.     // 加载牌的正反两面  
  10.     m_pCardFront = CCSprite::create("CardFront.png");  
  11.     m_pCardBack  = CCSprite::create("CardBack.png");  
  12.     /*m_pCardFront->setPosition(ccp(visibleSize.width/2-100,visibleSize.height/2+100)); 
  13.     m_pCardBack->setPosition(ccp(visibleSize.width/2-100,visibleSize.height/2+100));*/  
  14.     m_pCardFront->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));  
  15.     m_pCardBack->setPosition(ccp(visibleSize.width/2,visibleSize.height/2));  
  16.     this->addChild(m_pCardFront,5);  
  17.     this->addChild(m_pCardBack,5);  
  18.     // 动画序列（延时，显示，延时，隐藏）  
  19.     CCSequence *pBackSeq = CCSequence::create(CCDelayTime::create(0.5f),CCShow::create(),CCDelayTime::create(0.5f),CCHide::create(),NULL);  
  20.     //持续时间、半径初始值、半径增量、仰角初始值、仰角增量、离x轴的偏移角、离x轴的偏移角的增量  
  21.     CCOrbitCamera *pBackCamera = CCOrbitCamera::create(1.0f, 1, 0, 0, -90, 0, 0);  
  22.     CCSpawn* pSpawnBack = CCSpawn::create(pBackSeq,pBackCamera,NULL);  
  23.     m_pCardBack->runAction(pSpawnBack);  
  24.   
  25.     // 动画序列（延时，隐藏，延时，显示）  
  26.     CCSequence *pFrontSeq = CCSequence::create(CCDelayTime::create(0.5f),CCHide::create(),CCDelayTime::create(0.5f),CCShow::create(),NULL);  
  27.     CCOrbitCamera *pLandCamera = CCOrbitCamera::create(1.2f, 1, 0, 0, -360, 0, 0);  
  28.     CCSpawn* pSpawnFront = CCSpawn::create(pFrontSeq,pLandCamera,NULL);  
  29.     m_pCardFront->runAction(pSpawnFront);  
  30. }  
上面的注释写得比较详尽了，其实不难，就是背面显示的时候把正面隐藏，正面显示了把背面隐藏，就是这么个事。

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

下面是运行的效果图：

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

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

2. 用CCScaleTo实现的翻转

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

下面是关键的代码：

[cpp]  view plain copy
  1. void HelloWorld::showObtAniUseScaleTo(CCSize visibleSize)  
  2. {  
  3.     if (m_pCardFront != NULL){  
  4.         this->removeChild(m_pCardFront);  
  5.     }  
  6.     if (m_pCardBack != NULL){  
  7.         this->removeChild(m_pCardBack);  
  8.     }  
  9.     // 加载牌的正反两面  
  10.     m_pCardFront = CCSprite::create("CardFront.png");  
  11.     m_pCardBack  = CCSprite::create("CardBack.png");  
  12.     // 把牌反转了  
  13.     m_pCardFront->setFlipX(true);  
  14.     m_pCardFront->setPosition(ccp(visibleSize.width/2-100,visibleSize.height/2+100));  
  15.     m_pCardBack->setPosition(ccp(visibleSize.width/2-100,visibleSize.height/2+100));  
  16.     this->addChild(m_pCardFront,5);  
  17.     this->addChild(m_pCardBack,5);  
  18.     // 动画序列（延时，隐藏，延时，隐藏）  
  19.     CCSequence *pBackSeq = CCSequence::create(CCDelayTime::create(0.5f),CCHide::create(),CCDelayTime::create(0.5f),CCHide::create(),NULL);  
  20.     CCScaleTo* pScaleBack = CCScaleTo::create(1.2f,-1,1);  
  21.     CCSpawn* pSpawnBack = CCSpawn::create(pBackSeq,pScaleBack,NULL);  
  22.     m_pCardBack->runAction(pSpawnBack);  
  23.   
  24.     // 动画序列（延时，显示，延时，显示）  
  25.     CCSequence *pFrontSeq = CCSequence::create(CCDelayTime::create(0.5f),CCShow::create(),CCDelayTime::create(0.5f),CCShow::create(),NULL);  
  26.     CCScaleTo* pScaleFront = CCScaleTo::create(1.2f,-1,1);  
  27.     CCSpawn* pSpawnFront = CCSpawn::create(pFrontSeq,pScaleFront,NULL);  
  28.     m_pCardFront->runAction(pSpawnFront);  
  29. }  

这里主要就是要先把牌的正面 setFlipX(true)这个函数来 翻转一下，然后再绕Y轴模拟个旋转出来，如果还是不怎么清楚还请看官自己写代码试试效果。

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

好了，差不多就是这样一个情况。

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

这篇关于Cocos2dx实现翻牌效果（CCScaleTo与CCOrbitCamera两种方式）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/878995。

相关文章

Java实现字节字符转bcd编码

Java实现字节字符转bcd编码

《Java实现字节字符转bcd编码》BCD是一种将十进制数字编码为二进制的表示方式,常用于数字显示和存储,本文将介绍如何在Java中实现字节字符转BCD码的过程,需要的小伙伴可以了解下... 目录前言BCD码是什么Java实现字节转bcd编码方法补充总结前言BCD码（Binary-Coded Decima
阅读更多...
python获取指定名字的程序的文件路径的两种方法

python获取指定名字的程序的文件路径的两种方法

《python获取指定名字的程序的文件路径的两种方法》本文主要介绍了python获取指定名字的程序的文件路径的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 最近在做项目，需要用到给定一个程序名字就可以自动获取到这个程序在Windows系统下的绝对路径，以下
阅读更多...
SpringBoot全局域名替换的实现

SpringBoot全局域名替换的实现

《SpringBoot全局域名替换的实现》本文主要介绍了SpringBoot全局域名替换的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录 项目结构⚙️ 配置文件application.yml️ 配置类AppProperties.Ja
阅读更多...
Python实现批量CSV转Excel的高性能处理方案

Python实现批量CSV转Excel的高性能处理方案

《Python实现批量CSV转Excel的高性能处理方案》在日常办公中,我们经常需要将CSV格式的数据转换为Excel文件,本文将介绍一个基于Python的高性能解决方案,感兴趣的小伙伴可以跟随小编一... 目录一、场景需求二、技术方案三、核心代码四、批量处理方案五、性能优化六、使用示例完整代码七、小结一、
阅读更多...
Java实现将HTML文件与字符串转换为图片

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现：html 转图片完整代码场景 1：转换本地 HTML 文件为图片场景 2：转换 H
阅读更多...
C#使用Spire.Doc for .NET实现HTML转Word的高效方案

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1
阅读更多...
C#实现一键批量合并PDF文档

C#实现一键批量合并PDF文档

《C#实现一键批量合并PDF文档》这篇文章主要为大家详细介绍了如何使用C#实现一键批量合并PDF文档功能,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言效果展示功能实现1、添加文件2、文件分组（书签）3、定义页码范围4、自定义显示5、定义页面尺寸6、PDF批量合并7、其他方法
阅读更多...
SpringBoot实现不同接口指定上传文件大小的具体步骤

SpringBoot实现不同接口指定上传文件大小的具体步骤

《SpringBoot实现不同接口指定上传文件大小的具体步骤》：本文主要介绍在SpringBoot中通过自定义注解、AOP拦截和配置文件实现不同接口上传文件大小限制的方法,强调需设置全局阈值远大于... 目录一  springboot实现不同接口指定文件大小1.1 思路说明1.2 工程启动说明二 具体实施2
阅读更多...
Python实现精确小数计算的完全指南

Python实现精确小数计算的完全指南

《Python实现精确小数计算的完全指南》在金融计算、科学实验和工程领域,浮点数精度问题一直是开发者面临的重大挑战,本文将深入解析Python精确小数计算技术体系,感兴趣的小伙伴可以了解一下... 目录引言：小数精度问题的核心挑战一、浮点数精度问题分析1.1 浮点数精度陷阱1.2 浮点数误差来源二、基础解决
阅读更多...
Java实现在Word文档中添加文本水印和图片水印的操作指南

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java：高效Word文档处理的利器代码实战：使用Java为Wo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2