博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CCSprite利用Bezier(贝塞尔)做抛物线动作并让CCSprite同时播放两个Action动作!
阅读量:5773 次
发布时间:2019-06-18

本文共 2576 字,大约阅读时间需要 8 分钟。

原文地址:

        如果我们想实现让CCSprite进行抛物线运动的话,那么我想童鞋们首先会想到利用Box2d或者其他物理引擎去为CCSprite创建物理世界中对应的刚体进行实现,但是反过来想,对于不熟悉Box2d或者其他物理引擎的童鞋,肯定不方便,那么Himi今天为大家介绍另外一种不实用物理引擎实现CCSprite抛物线方式;

        这里我直接将封装好的方法贴上来,注释都在代码中了:

//  抛物线    -Himi   //mSprite:需要做抛物线的精灵  //startPoint:起始位置  //endPoint:中止位置  //dirTime:起始位置到中止位置的所需时间  - (void) moveWithParabola:(CCSprite*)mSprite startP:(CGPoint)startPoint endP:(CGPoint)endPoint dirTime:(float)time{ float sx = startPoint.x; float sy = startPoint.y; float ex =endPoint.x+50; float ey =endPoint.y+150; int h = [mSprite contentSize].height*0.5;     ccBezierConfig bezier; // 创建贝塞尔曲线   bezier.controlPoint_1 = ccp(sx, sy); // 起始点   bezier.controlPoint_2 = ccp(sx+(ex-sx)*0.5, sy+(ey-sy)*0.5+200); //控制点   bezier.endPosition = ccp(endPoint.x-30, endPoint.y+h); // 结束位置      CCBezierTo *actionMove = [CCBezierTo actionWithDuration:time bezier:bezier];     [mSprite runAction:actionMove];  }

之前在Android上我也有讲解过贝塞尔曲线的博文,但是Android中不同于cocos2d封装这个,在cocos2d中的Bezier是封装为了精灵动作,让精灵按照贝塞尔曲线的路线去运动;那么以上封装的代码中对于抛物线运动来说最重要的一点就是创建贝塞尔曲线的第二个点,这个点控制着精灵路径的所经过的最高点,这里务必要知道;

 

    这种实现方式虽然没有物理系统对刚体施加力来的真实,但是!我想这段代码的实用性还是很大的,至少不需要使用box2d引擎相关知识,最重要的优点是不会存在上一章介绍的代码混编带来的编译错误~

//----  OK,下面来介绍第二个知识点:

        很多童鞋学习cocos2d,一般不经常更新的动画,会使用cocos2d封装的动作,例如旋转、渐变、位移等等,那么一旦使用动作后,肯定就有需要两个动作一起播放的需求,那么基本上童鞋们大脑中第一闪现的就是利用cocos2d的动作序列  CCSequence,但是效果不理想,原因很简单,因为顾名思义,既然是动作序列,那就是按照动作的顺序一个动作一个动作的进行播放,也就是说利用动作序列只能达到连续播放动作,无法同时播放动作的目的;

        那么在这里给大家一个方法能让两个动作同时播放的方法:

         这里为了讲解方便,我在刚才封装的贝塞尔曲线上的方法上进行修改,添加一个旋转的动作,让贝塞尔曲线运动与旋转动作同时播放,这里Himi使用一根“矛”的图片作用示意图来说明,因为矛与箭的运动方式最常用的动作肯定是一边旋转一边抛物线位移,这样才更加真实;

        OK,看下封装角度后的抛物线并同时旋转方法如下:

      

//  抛物线运动并同时旋转    -Himi   //mSprite:需要做抛物线的精灵  //startPoint:起始位置  //endPoint:中止位置  //startA:起始角度  //endA:中止角度  //dirTime:起始位置到中止位置的所需时间  - (void) moveWithParabola:(CCSprite*)mSprite startP:(CGPoint)startPoint endP:(CGPoint)endPoint startA:(float)startAngle endA:(float)endAngle dirTime:(float)time{ float sx = startPoint.x; float sy = startPoint.y; float ex =endPoint.x+50; float ey =endPoint.y+150; int h = [mSprite contentSize].height*0.5; //设置精灵的起始角度   sprite.rotation=startAngle;     ccBezierConfig bezier; // 创建贝塞尔曲线   bezier.controlPoint_1 = ccp(sx, sy); // 起始点   bezier.controlPoint_2 = ccp(sx+(ex-sx)*0.5, sy+(ey-sy)*0.5+200); //控制点   bezier.endPosition = ccp(endPoint.x-30, endPoint.y+h); // 结束位置      CCBezierTo *actionMove = [CCBezierTo actionWithDuration:time bezier:bezier]; //创建精灵旋转的动作   CCRotateTo *actionRotate =[CCRotateTo actionWithDuration:time angle:endAngle]; //将两个动作封装成一个同时播放进行的动作   CCAction * action = [CCSpawn actions:actionMove, actionRotate, nil];     [mSprite runAction:action];  }

附上运行效果图:

 

 

转载地址:http://yiaux.baihongyu.com/

你可能感兴趣的文章
递归调用 VS 循环调用
查看>>
使用sstream读取字符串中的数字(c++)
查看>>
树莓派下实现ngrok自启动
查看>>
javascript静态类型检测工具—Flow
查看>>
MachineLearning-Sklearn——环境搭建
查看>>
node学习之路(二)—— Node.js 连接 MongoDB
查看>>
《深入理解java虚拟机》学习笔记系列——垃圾收集器&内存分配策略
查看>>
通过XAML Islands使Windows桌面应用程序现代化
查看>>
Javascript 深入浅出原型
查看>>
简单之极,搭建属于自己的Data Mining环境(Spark版本)
查看>>
Ruby 2.5.0概览
查看>>
如何通过解决精益问题提高敏捷团队生产力
查看>>
Apache下.htaccess文件配置及功能介绍
查看>>
Magento XML cheatsheet
查看>>
Egg 2.19.0 发布,阿里开源的企业级 Node.js 框架
查看>>
Kubernetes 弹性伸缩全场景解析 (四)- 让核心组件充满弹性 ...
查看>>
使用MySQLTuner-perl对MySQL进行优化
查看>>
Swoole 4.1.0 正式版发布,支持原生 Redis/PDO/MySQLi 协程化 ...
查看>>
开发网络视频直播系统需要注意的地方
查看>>
haproxy mysql实例配置
查看>>