CCSprite利用Bezier（贝塞尔）做抛物线动作

阅读更多

 

如果我们想实现让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];  

}  

  附上运行效果图:

  

 

   左侧的矛是起始位置，后侧的是抛物线与旋转两个动作同时进行运动中的矛～

 

     好了，就讲这么多吧，今天样书出来了，比较海皮～哈哈