仿真树叶飘落效果的实现(精灵旋转…
在分析了粒子特效实现的原理并在国内外论坛上爬了半天,最后边实验边修改,终于完成了一个可行的仿真感较强的立体的落叶效果,现在就拿出来跟大家分享一下。
原理->树叶飘落动作分析:
树叶下落过程分解为:下落+摆动+叶片自传。
也就是只要将这三个动作实现,并同时执行就可以实现树叶飘落的效果。
下面就拿出代码具体解析实现过程:
老规矩,先上.h的内容,.h就不多解释了:
- #ifndef __LEAF_H__
- #define __LEAF_H__
- #include "cocos2d.h"
- USING_NS_CC;
- class Leaf : public cocos2d::CCLayer
- {
- public:
- virtual bool init();
- void resetLeafPos(CCNode* sender);//叶片位置重置函数
- void playLeafAnim(CCSprite *spriteLeaf);//下落过程实现函数
- LAYER_NODE_FUNC(Leaf);
- };
- #endif // __LEAF_H__
接下来是具体的实现,为了我们能不断的产生自然、随和的落叶,我们分三步来完成:
1:第一次初始化;2:落叶动作的实现;3:下落动作完成重新设定落叶开始。
上代码,先看看用到的头文件:
- #include
- #include
- #include
- #include"Leaf.h"
- using namespace std;
- enum {TAG_LEAF1 = 101, TAG_LEAF2};
初始化树叶精灵的设定:
- "font-size:12px;">bool Leaf::init()
- {
- CCSprite *spriteLeaf1 = CCSprite::spriteWithFile("img_yezi_1.png");
- spriteLeaf1->setRotation(30);//旋转角度
- spriteLeaf1->setAnchorPoint(ccp(0.5, 3));//设置精灵锚点
- spriteLeaf1->setPosition(ccp(450, 500));//叶子1第一次初始位置
- spriteLeaf1->setScale(0.5);//设置叶片大小
- this->addChild(spriteLeaf1,100,TAG_LEAF1);
- this->playLeafAnim(spriteLeaf1);//调用play函数播实现叶动作
- CCSprite *spriteLeaf2 = CCSprite::spriteWithFile("img_yezi_2.png");
- spriteLeaf2->setRotation(50);
- spriteLeaf2->setAnchorPoint(ccp(0.5, 3));
- spriteLeaf2->setPosition(ccp(200, 540));
- spriteLeaf2->setScale(0.5);
- this->addChild(spriteLeaf2,101,TAG_LEAF2);
- this->playLeafAnim(spriteLeaf2);
- return true;
- }
将精灵的锚点设定在其高度的3倍的位置,加上旋转动作后,叶片会产生单摆的动作效果。再加上下落的动作,就会有树叶飘落的感觉了。
- "font-size:12px;">//叶子飘落动作
- void Leaf::playLeafAnim(CCSprite *spriteLeaf)
- {
- int iTag = spriteLeaf->getTag();
- CCLog("playtag%d", iTag);
- ccTime time, roTime;
- float fAngle1, fAngle2;
- if (iTag == TAG_LEAF1)
- {
- CCLog("tag1");
- time = 10;//叶子下落的时间
- roTime = 2.5;//叶子单向摆动一次时间
- fAngle1 = -80;//叶子逆时针摆动角度
- fAngle2 = 80;//顺时针摆动角度
- }
- else
- {
- CCLog("tag2");
- time = 14;
- roTime = 3.2;
- fAngle1 = -100;
- fAngle2 = 100;
- }
- CCLog("rotime�Angle1�Angle2%f",roTime, fAngle1,fAngle1);
- //随机生成叶子横向偏移值
- srand((UINT)GetCurrentTime());
- int iRandPos = rand() % 250;
- CCLog("Pianyi%d", iRandPos);
- //叶子所运动到的位置
- CCMoveTo *moveTo = CCMoveTo::actionWithDuration(time, ccp(CCDirector::sharedDirector()->getWinSize().width - iRandPos, 30));
- CCCallFuncN *actDone = CCCallFuncN::actionWithTarget(this, callfuncN_selector(Leaf::resetLeafPos));
- CCFiniteTimeAction *putdown = CCSequence::actions(moveTo, actDone, NULL);
- //叶子旋转动作
- CCRotateBy *rotaBy1 = CCRotateBy::actionWithDuration(roTime, fAngle1);
- CCRotateBy *rotaBy2 = CCRotateBy::actionWithDuration(roTime, fAngle2);
- //叶子翻转动作
- spriteLeaf->setVertexZ(60);//设置深度抬高60,避免出现使用CCOrbitCamera实现空间翻转时产生错位和遮挡等问题
- //CCDirector::sharedDirector()->setDepthTest(false);
- //关闭深度测试同样可以避免上述问题,不过,推荐使用深度设置setVertexZ来正确解决,因为有时你可能需要遮挡的效果,关闭深度测试后将造成遮挡效果的缺失
- CCOrbitCamera * orbit = CCOrbitCamera::actionWithDuration(8, 1, 0, 0, 360, 45, 0);
- //让树叶精灵始终执行三维翻转的动作
- CCRepeat *fz3d = CCRepeat::actionWithAction(orbit, -1);//无限循环执行叶片翻转的动作
- //CCRepeatForever *fz3d = CCRepeatForever::actionWithAction(orbit);
- //由于下面使用CCSpawn同时执行动作,所以不可以使用无限次数类型的动作,而因使用有线次数循环CCRepeat将循环次数设置为-1
- //用CCEaseInOut包装落叶摆动的动作,让树叶的进入、出现更自然(淡入淡出效果)
- CCEaseInOut *ease1 = CCEaseInOut::actionWithAction(rotaBy1, 3);
- CCEaseInOut *ease2 = CCEaseInOut::actionWithAction(rotaBy2, 3);
- //摆动动作合成
- CCFiniteTimeAction *seq2 = CCSequence::actions(ease1, ease2, NULL);//依次执行顺时针、逆时针摆动
- CCRepeat *baidong = CCRepeat::actionWithAction(seq2, -1);//摆动合成
- //动作执行->同时执行所有动作
- spriteLeaf->runAction(CCSpawn::actions(putdown, baidong, fz3d, NULL));
- }
现在叶子飘落的主干就设定完毕了,其实看上去并不复杂,就是三个动作:下落+摆动+翻转,未来使落叶更自然,我们尽可能的在数据可变的范围内使用随机参数,我这里用了系统时间做种子来产生随机数,但是我感觉产生的随机数还是不够理想,如果你有更好的种子,可以告诉我。其实还有很多参数可以在限定范围内使用随机数,由于时间关系我没有逐个去调试,而是直接设定了一个固定值。有时间你可以逐个设定实验,找到最佳的数据范围。
现在为了使我们的落叶能够源源不断的产生,我们还需要让落叶的产生和消亡循环起来:
- "font-size:12px;">//重置叶子的位置
- void Leaf::resetLeafPos(CCNode* sender)
- {
- int iTag = int(sender->getTag());//获得被重置叶片的标签
- int iZoder = int(sender->getZOrder());//获取被重置叶片的z轴值
- sender->removeFromParentAndCleanup(true);//清除已经落到底点的叶子
- char sImg[15] = "img_yezi_1.png";
- _snprintf(sImg, sizeof(sImg), "img_yezi_%d.png", iTag % 100);
- CCPoint pos;
- float fAngle;
- //随机生成叶子的起始位置
- srand((UINT)GetCurrentTime());
- int iRand = (rand() % 200);
- if (iTag == TAG_LEAF1)
- {
- pos = ccp(iRand, 600);
- fAngle = 30;
- }
- else
- {
- pos = ccp(iRand, 570);
- fAngle = 50;
- }
- //重新生成新的叶片,在起点处释放
- CCSprite *spriteLeaf = CCSprite::spriteWithFile(sImg);
- spriteLeaf->setScale(0.5);
- spriteLeaf->setAnchorPoint(ccp(0.5, 3));
- spriteLeaf->setRotation(fAngle);
- spriteLeaf->setPosition(pos);
- this->addChild(spriteLeaf, iZoder,iTag);
- this->playLeafAnim(spriteLeaf);//重置后的树叶再次执行飘落动作
- }
这样3d仿真的落叶的效果就基本实现了,为了节约时间,这里只写了2片叶子的情况,多片叶子的情况可以举一反三,多加几片叶子就行。这里需要注意的是在使用CCOrbitCamera来实现三维空间的翻转时,由于openGL绘图的关系,我们得将精灵的深度设置上浮,以避免openGL绘图时精灵的部分被后面的色彩遮挡。
解决遮挡问题可以直接关闭深度测试CCDirector::sharedDirector()->setDepthTest(false);
也可以设置精灵VertexZ上浮spriteLeaf->setVertexZ(60);
如果你的程序不需要深度测试,你大可以直接关了它,但是你不能确定是的程序是否每个地方都没有用到深度测试,所以,推荐设置VertexZ值来避免你的精灵被遮挡。VertexZ值的大小为你的精灵被挡住部分的像素值。
仿真树叶飘落效果的实现(精灵旋转…相关推荐
- css3动画与过渡效果结合出现的树叶飘落效果
* {padding: 0;margin: 0;}ul, ol {list-style: none;}a {text-decoration: none;color: #000;}section {he ...
- python随风飘落怎么画_树叶飘落动画制作 如何制作树叶飘落的动画?视频画面添加树叶随风飘落的动画效果...
最近真是有一点秋的凉意了呢~每天早上起床走出房间的时候,就能感觉到有点凉凉的气息,真好,酷暑终于过去了,希望不要再炎热了,啊哈哈.对于秋天,相信大家先想到的就是那种漫天的落叶了吧~那种秋风阵阵,落叶缤 ...
- HTML5效果:实现树叶飘落
实现如图所示的东西效果(落叶下落): html代码: <!DOCTYPE html> <html> <head> <title>HTML5树叶飘落动画& ...
- html5 树叶飘落,使用Html5实现树叶飘落的效果
实现如图所示的东西效果(落叶下落): html代码: !DOCTYPE htmlhtmlhead titleHTML5树叶飘落动画/title meta charset=utf-8 meta name ...
- html5落叶效果,使用Html5实现树叶飘落的效果
实现如图所示的东西效果(落叶下落): html代码: HTML5树叶飘落动画 这是基于webkit的落叶动画 css代码:body{ background-color: #4E4226; }#cont ...
- ue4树叶飘落动画_Android:使用属性动画制作器的类似于树叶的动画
ue4树叶飘落动画 在上一教程中,我们解释了属性动画通常如何工作. 现在,我们将进一步讲解如何创建属性动画,该动画将为ImageView产生类似于树叶飘落的效果,在其中我们显然将放置树叶的图像. 为此 ...
- java实现物体下落效果_手撸一个物体下落的控件,实现雪花飘落效果
效果图: 圣诞登录页.gif 参考文章: Android自定义View--从零开始实现雪花飘落效果 感谢原文作者,不仅实现了效果,并且写得非常详细,还做了优化.笔者参考原文作者的源码,做了一点修改,实 ...
- android 树叶飘落动画,逼真的HTML5树叶飘落动画
这是一款基于HTML5的树叶飘落动画,树叶都是图片,并非CSS3绘制,但是树叶飘落的动画效果非常逼真.这款HTML5树叶飘落动画是基于webkit内核的,也就是说要在webkit内核的浏览器上才能使用 ...
- html5给页面添加树叶特效,jQuery超酷页面树叶飘落装饰特效插件
这是一款效果非常炫酷的页面树叶飘落装饰特效jQuery插件.该jQuery插件可以在页面顶部生成各种树叶,这些树叶会随机飘落,在树叶飘落的过程中,使用鼠标点击它将会发生更加神奇的效果. 该jQuery ...
- java飘落的雪花_[Java教程]树叶飘落、雪花飘落等同时多个图片飘落
[Java教程]树叶飘落.雪花飘落等同时多个图片飘落 0 2018-07-10 04:00:54 snowfall.jquery.js是树叶等图片飘落的插件,但是只支持一种图片的飘落效果,但是我遇到的 ...
最新文章
- 【Linux就该这么学 20期培训笔记 01】部署虚拟环境安装linux系统
- 解决高版本SpringBoot整合swagger时启动报错:Failed to start bean ‘documentationPluginsBootstrapper‘ 问题
- oracle左连接数据会对不上吗,一周工作总结–左连接造成的一些问题-Oracle
- paper reading:[renormalization]Semi-supervised Classification with Graph Convolutional Networks
- 揭秘百万人围观的Facebook视频直播
- Flash学习资源下载列表
- Java调用微信支付代码
- 恒讯科技报告:2021-2026年泰国数据中心市场机会
- 【语音隐藏】基于matlab小波变换DWT结合离散余弦变换DCT音频数字水印嵌入提取【含Matlab源码 2131期】
- 海康摄像头字符叠加详解
- 3D游戏建模室内材质调整方法
- 使用poi导出excel表基础
- 【鸿蒙OS开发入门】18 - HDF驱动子系统:加速度计传感器 Driver层驱动代码分析
- 七款代码味道识别工具【简介】
- 使用for语句时的注意事项
- D-Link DIR-859的RCE漏洞 CVE-2019–17621
- 邻家汇:广告+精准营销助商超转型升级
- 贴吧顶贴php脚步,贴吧干货:利用代码无限顶贴
- 软件测试中的压力测试是什么?
- Windows 7 下安装TensorFlow