MyException - 我的异常网
当前位置:我的异常网» 操作系统 » 跛脚蛤蟆笔记14-cocos2d-x-3.2 精灵按曲线运动

跛脚蛤蟆笔记14-cocos2d-x-3.2 精灵按曲线运动

www.MyException.Cn  网友分享于:2014-08-05  浏览:0次
瘸腿蛤蟆笔记14-cocos2d-x-3.2 精灵按曲线运动

上篇回顾

         上篇中,蛤蟆学习了如何使用ActionManager来控制精灵动作。我们可以随时随地的控制精灵的停止、开始。

         这次蛤蟆将学习如何让精灵按指定的曲线运行。

 

理论介绍

         其实按路线运行,说的简单一点就是路线上的几个关键点。我们需要将这些关键点弄成一个数组。然后就可以直接调用函数来实现了。因为cocos2d-x中本身就带有这种函数。

         首先我们先介绍下基数样条。基数样条是一连串单独的曲线,这些曲线连接起来形成一条较大的曲线。 样条由点的数组和张力参数指定。(张力应该是01之间,但是这不是必须的)。

         然后我们介绍下贝塞尔曲线,贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。于1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发,以稳定数值的方法求出贝兹曲线。做为混迹于IT行业的小伙伴必须得知道这个哦。虽然蛤蟆不是计算机专业的(蛤蟆学机械设计的,对于编程纯属好奇),也是知道这个线的。因为这个线我记得我们老师上计算机图形学的第一节课就讲到了。我们只需记住一点,贝塞尔曲线至少需要4个点,由于精灵的一开始位置就占了一个点,所以再需要3个点即可。

         CatmullRom样条,这个蛤蟆查不到资料,大家目前记住这个是一个将所有点连在一起的曲线即可,至于这个样条曲线有什么特性,我们以后有机会慢慢道来。

         接下去我们看下,这个类的继承关系。

         接下去我们谈论让精灵沿着这三种曲线运动的三个动作类主要(因为By可以改成To就变成另外的动作了)是:

CardinalSplineBy,CatmullRomBy,BezierTo 。类的继承关系如下图,注意哦,CatmullRomby其实是CardinalSplineBy的儿子,而CardinalSplineBy 又是CardinalSplineTo的儿子。

  而BezierTo却是 BezierBy的儿子。说明 by和 to不一定谁是谁的儿子,具体情况得具体分析。类继承如下图:




具体步骤

         我们还是使用HelloWolrd项目。依旧是在 

bool HelloWorld::init() 函数中加入代码:

       代码如下:

auto s = Director::getInstance()->getWinSize();   

    auto array = PointArray::create(20);   

   array->addControlPoint(Vec2(10,10));

   array->addControlPoint(Vec2(s.width/2-30,10));

   array->addControlPoint(Vec2(s.width/2-30,s.height-80));

   array->addControlPoint(Vec2(10,s.height-80));

   array->addControlPoint(Vec2(10,10));   

    auto action1 = CardinalSplineBy::create(3, array, 1);

    auto reverse1 = action1->reverse();

 

         auto array1 = PointArray::create(20); 

   array1->addControlPoint(Vec2(10, 10));

   array1->addControlPoint(Vec2(s.width/2-30, 10));

   array1->addControlPoint(Vec2(s.width/2-30, s.height-80));

   array1->addControlPoint(Vec2(10, s.height-80));

   array1->addControlPoint(Vec2(10, 10)); 

    auto action2 = CatmullRomBy::create(3,array1);

    auto reverse2 = action1->reverse();

 

         ccBezierConfig bezier;

   bezier.controlPoint_1 = Vec2(10,s.height/2);

   bezier.controlPoint_2 = Vec2(300,-s.height/2);

   bezier.endPosition = Vec2(300,100);

    auto bezierForward = BezierBy::create(3, bezier);

    auto bezierBack = bezierForward->reverse();

 

         auto grossini = Sprite::create("grossini.png");

         addChild(grossini,0, 2);

         grossini->setPosition(Vec2( origin.x+30, origin.y+30));

         grossini->runAction(Sequence::create(action1,reverse1,action2,reverse2,bezierForward,bezierBack,nullptr));

 

 

 

 

代码解释

         OK,现在蛤蟆来解释下代码:

auto s = Director::getInstance()->getWinSize();    //获取窗口大小

    auto array = PointArray::create(20);   //创建一个array数组。(这个ARRAY 会被VECTOR代替传说,不过现在还是可以的。如果哪天不能用了,蛤蟆出来告诉大家的。)

   array->addControlPoint(Vec2(10,10));//增加一个点

   array->addControlPoint(Vec2(s.width/2-30,10)); //增加一个点

   array->addControlPoint(Vec2(s.width/2-30,s.height-80)); //增加一个点

   array->addControlPoint(Vec2(10,s.height-80)); //增加一个点

   array->addControlPoint(Vec2(10,10));    //增加一个点

    auto action1 = CardinalSplineBy::create(3, array, 1);//增加动画, 第一参数表示时间,第二个参数是数组名,第三个参数是 张力。此处设置为1,,表示张力很大,动起来就是沿着正方形来的。

    auto reverse1 = action1->reverse();//创建一个相反的动画

 

    auto action2 = CatmullRomBy::create(3,array) ;//增加动画, 第一参数表示时间,第二个参数是数组名。这个CatmullRom不需要设置张力

    auto reverse2 = action1->reverse();//创建一个相反的动画

 

         ccBezierConfig bezier; //创建一个贝塞尔配置变量

   bezier.controlPoint_1 = Vec2(10,s.height/2); //创建一个贝塞尔配置变量

   bezier.controlPoint_2 = Vec2(300,-s.height/2); //创建一个贝塞尔配置变量

   bezier.endPosition = Vec2(300,100); //创建一个贝塞尔配置变量

    auto bezierForward = BezierBy::create(3, bezier); //创建一个贝塞尔配置变量

    auto bezierBack = bezierForward->reverse();//创建一个贝塞尔配置变量

 

         auto grossini = Sprite::create("grossini.png");

         addChild(grossini,0, 2);

         grossini->setPosition(Vec2( origin.x+30, origin.y+30));

         grossini->runAction(Sequence::create(action1,reverse1,action2,reverse2,bezierForward,bezierBack,nullptr)); //启动精灵运行,按顺序运行基数样条,基数样条返回,CatmullRom, CatmullRom返回,贝塞尔曲线,贝塞尔曲线返回。

 

总结

         本次,蛤蟆记录了曲线使用的3个方法,大家有兴趣可以择一深入之。当然啦,深入学习之后不要忘记告诉蛤蟆哈。沿着曲线运动是不是让人觉得有一种丈二和尚摸不着头的感觉。

文章评论

如何成为一名黑客
如何成为一名黑客
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
总结2014中国互联网十大段子
总结2014中国互联网十大段子
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
每天工作4小时的程序员
每天工作4小时的程序员
为什么程序员都是夜猫子
为什么程序员都是夜猫子
10个调试和排错的小建议
10个调试和排错的小建议
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
我是如何打败拖延症的
我是如何打败拖延症的
程序员应该关注的一些事儿
程序员应该关注的一些事儿
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
程序员和编码员之间的区别
程序员和编码员之间的区别
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
代码女神横空出世
代码女神横空出世
漫画:程序员的工作
漫画:程序员的工作
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
那些争议最大的编程观点
那些争议最大的编程观点
 程序员的样子
程序员的样子
旅行,写作,编程
旅行,写作,编程
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
中美印日四国程序员比较
中美印日四国程序员比较
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
我的丈夫是个程序员
我的丈夫是个程序员
老程序员的下场
老程序员的下场
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
程序员必看的十大电影
程序员必看的十大电影
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
程序员都该阅读的书
程序员都该阅读的书
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
编程语言是女人
编程语言是女人
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有