action实现 cocos
2019-01-27 19:09:07 fatfish_ 阅读数 544

自定义Action

学习自定义Action的最好方法是去查看Cocos Creator中常用动作的写法。比如cc.MoveTo继承了cc.MoveBy,而cc.MoveBy则进一步继承了cc.ActionInterval
可以从cocos-creator的引擎源码找到cc.MoveBy的相关定义:

cc.MoveBy = cc.Class({
    name: 'cc.MoveBy',
    extends: cc.ActionInterval,

    ctor:function (duration, deltaPos, deltaY) {
        this._positionDelta = cc.v2(0, 0);
        this._startPosition = cc.v2(0, 0);
        this._previousPosition = cc.v2(0, 0);

        deltaPos !== undefined && cc.MoveBy.prototype.initWithDuration.call(this, duration, deltaPos, deltaY);	
    }
    ...
})

如果需要自定义Action只需要按照自己的需求仿照cc.MoveBy的定义写一个就行了。如实现cc.ActionInterval类的initWithDurationstartWithTargetupdate方法。「sprite 圆形运动,圆周运动」给出了自定义一个圆周运动的三种方案,其中第一种方案就是集成cc.ActionInterval,自定义Action的方法。这里不再赘述。

特殊需求 - 用TypeScript自定义Action

因为自己做cocos creator时用的ts语言,在写法上与之前提到的略有不同。目的是实现精灵绕某一点旋转一定的角度。

需求

  1. 根据精灵自身旋转角度和给定半径确定精灵圆周运动的圆心。
  2. 在精灵圆周运动过程中自动调整精灵自身的旋转角度。

方案

这里给出实现的源码,并做相关解释。

const {ccclass, property} = cc._decorator;

export default class ArcMove extends cc.ActionInterval {

    name: string = "CircleMove";
    _positionDelta: cc.Vec2;
    _previousPosition: cc.Vec2;
    /**圆心 */
    _centre:cc.Vec2;
    /**半径 */
    _R: number = 0;
    /**设置节点旋转度数 */
    _angle;
    /**节点 */
    _target: cc.Node;
    /**节点在圆上的初始位置(角度)*/
    _initAngle:number = 0;
    /**圆周运动方向 counter-clockwise(逆时针方向)默认false*/
    _ccw: boolean = false;
    /**节点初始自身rotation */
    _rotation: number = 0;
    /**
     * 
     * @param duration 
     * @param R 半径
     * @param angle 绕圆心旋转角度(360度为完整圆)
     */
    constructor(duration, R, angle=360){
        super();
        this._positionDelta = cc.v2(0,0);
        this._centre  = cc.v2(0,0);
        this._previousPosition = cc.v2(0,0);
        this._R = R;
        this.initWithDuration(duration, R, angle);
    }

    initWithDuration(duration, R, angle):boolean {
        if(super["initWithDuration"](duration, this)){
            this._R = R;
            this._angle = angle;
            return true
        }
        return false;
    }

    startWithTarget(target:cc.Node) {
        super["startWithTarget"](this, target);
        this._target = target;
        // 根据节点scaleX判断圆周运动方向(顺/逆时针)
        if(target.scaleX == 1){
            this._ccw = false;
        }else{
            this._ccw = true;
        }
        // 根据节点自身倾角和半径计算圆心
        let angle = -(target.rotation + 90);
        let v1:cc.Vec2 = new cc.Vec2(Math.cos(angle/180*Math.PI), Math.sin(angle/180*Math.PI));
        let center: cc.Vec2 = v1.mul(this._R).add(target.position);
        this._centre .x = center.x;
        this._centre .y = center.y;
        // 计算节点在圆上初始位置
        this._initAngle = 90 - target.rotation;
        this._rotation = target.rotation;
        cc.log("在圆上角度:" + this._initAngle);
    }

    update (dt) {
        if (this._target) {
            var locStartPosition = this._centre ;
            
            if (cc.macro.ENABLE_STACKABLE_ACTIONS) {
                let dir: number = -1;
                if(this._ccw){
                    dir = 1;
                }
                var R = this._R;
                var rat = this._initAngle * Math.PI / 180 + dir * dt * Math.PI * 2 * (this._angle / 360);
                var x = locStartPosition.x + R * Math.cos(rat);
                var y = locStartPosition.y + R * Math.sin(rat);
                this._target.setPosition(x, y);
                this._target.rotation = this._rotation + dt * this._angle;
                let a = 1;
            } else {
                this._target.setPosition(locStartPosition.x + x, locStartPosition.y + y);
            }
        }
    }
}
export var arcMove = function(duration, R, angle){
    return new ArcMove(duration, R, angle);
}

这里的_positionDelta和_previousPosition暂时没有用到。由于需要根据精灵的自身旋转角度和给定的半径得出圆心。随后从当前位置开始圆周运动并调整精灵的自身旋转角度。_angle指定精灵的圆周运动度数,一圈是360,具体运动度数可以任意设置。_target则是精灵节点,在initWithTarget中完成初始化。_initAngle记录的是初始时,从水平方向到精灵的旋转角度,即记录精灵在圆上的初始位置。_rotation记录精灵初始的自身旋转角度。
js中重写initWithDurationinitWithTarget方法是通过cc.ActionInterval.prototype.initWithXXX.call()的方式进行的。但ts似乎没有把接口暴露出来,因此这里采用了super["initWithXXX"]()的形式。
余下内容计算出圆心、初始圆上位置等等。在update函数中,需要注意dt,比如给定精灵的运动时间duration为3秒,dt的变化还是从0到1.

使用方法

在使用的时候,import 该类。
let action = arMove(3, 100, 180);
随后节点runAction即可。

2019-07-25 15:54:51 weixin_44704285 阅读数 24

cocos creator中,jumpTo、jumpBy的使用方法例子:

cc.Class({
    extends: cc.Component,
    properties: {
        move: cc.Node,
    },
    start() {
        this.moveT()
    },
    moveT() {
        this.move.on('touchstart', function() {
            // this.startPoint = event.getLocation();
            cc.log('moveT')
        })
        this.move.on('touchend', (event) => {
            // jumpBy
            // cc.jumpBy(time,cc.v2(x,y),height,count)
            // cc.jumpBy(时间,停止跳跃时的坐标:原坐标 + (x,y)的值,跳跃高度,跳跃次数)
            // var actionJumpBy = cc.jumpBy(2, cc.v2(100, 100), 30, 5)
            // this.move.runAction(actionJumpBy)

            // jumpTo 
            // cc.jumpTo(time,cc.v2(x,y),height,count)
            // cc.jumpTo(时间,停止跳跃之后的坐标,跳跃高度,跳跃次数)
            var actionJumpTO = cc.jumpTo(1, cc.v2(100, 100), 30, 5)
            this.move.runAction(actionJumpTO)   //调用
        });
    }
});
2015-11-05 11:24:58 zxf13598202302 阅读数 452
bool HelloWorld::init()


{


    //////////////////////////////


    // 1. super init first


    if ( !CCLayer::init() )


    {


        return false;


    }


 


    CCSprite * sp= CCSprite::create("Icon.png");


    sp->setPosition(ccp(150, 150));


    addChild(sp,0,922);


 


////    Action动作


//    


////CCMoveBy  创建一个移动的动作   参数1:移动到目标坐标所需的时间 参数2:目标坐标    支持reverse 可以获取其反向动作


////    CCMoveTo  一样的


//    CCActionInterval * moveBy = CCMoveBy::create(5,ccp(300, 100));


//    CCActionInterval * actionmoveback= moveBy->reverse();


//    sp->runAction(actionmoveback);


//    


////    CCScaleTo   作用:创建一个缩放的动作


////    参数1:达到缩放大小所需的时间


////    参数2 :缩放的比例


//    CCActionInterval * scaleto = CCScaleTo ::create(2, 2);


//    sp->runAction(scaleto);


//    


////    CCScaleBy  作用:创建一个缩放的动作


////    参数1:达到缩放大小的所需时间  参数2:缩放比例


//    CCActionInterval * scaleby = CCScaleBy::create(2, 2);


//    CCActionInterval * actionbyback = scaleby->reverse();


//    sp->runAction(actionbyback);


//    


////    CCRotateTo


////    作用创建一个旋转的动作


////    参数1:旋转的时间  参数2:旋转饿角度  0 - 360


//    CCActionInterval * rotateto = CCRotateTo::create(2, 90);


//    sp->runAction(rotateto);


//    


////  CCSkewTo


////   作用创建一个倾斜的动作


////    参数1:倾斜到特定角度所需的时间


////    参数2:x轴的倾斜角度


////    参数3:y轴的倾斜角度


//    CCActionInterval * skewto = CCSkewTo::create(2, 10, 10);


//    sp->runAction(skewto);


//    


////    CCJumpTo


////    作用:创建一个跳的动作


////    参数1:跳到目标动作位子的所需时间


////    参数2:目标位置


////    参数3:跳的高度


////    参数4跳到目标位置的次数


//    CCActionInterval* jumpto = CCJumpTo ::create(2, ccp(300, 200), 50, 4 );


//    sp->runAction(jumpto);


//    


////    CCJumpBy


//    //    作用:创建一个跳的动作


//    //    参数1:跳到目标动作位子的所需时间


//    //    参数2:目标位置


//    //    参数3:跳的高度


//    //    参数4跳到目标位置的次数


////    这个支持方向动作reverse


//    CCActionInterval * jumpby = CCJumpBy ::create(3, ccp(300, 200), 50, 4);


//       CCActionInterval * ac= jumpby->reverse();


//    sp->runAction(ac);


    


//    CCBezier


//ccBezierConfig结构体    


//    ccBezierConfig bezierCon;


//    bezierCon.controlPoint_1=CCPointMake(200, 150);//控制点1


//    bezierCon.controlPoint_2=CCPointMake(200, 160);//控制点2


//    bezierCon.endPosition =CCPointMake(340, 100);// 结束位置


// CCBezierTo


    //    创建一个贝塞尔曲线运动的动作


    //    参数1:贝塞尔曲线运动的时间


//    参数2 :ccBezierConfig结构体   


//    CCActionInterval * action = CCBezierTo::create(2, bezierCon);


//    CCActionInterval * action = CCBezierBy::create(3, bezierCon);//支持反向


//    CCActionInterval * action1 = action->reverse();


//    sp->runAction(action1);


 


//    CCFadeIn


//    作用:创建一个渐变出现的动作


//    参数是时间


//    CCActionInterval * fadein = CCFadeIn::create(2);


//    sp->runAction(fadein);


 


//    CCFadeOut


    //    作用:创建一个渐变消失的动作


    //    参数是时间


//    CCActionInterval * fadeout = CCFadeOut::create(2);


//    sp->runAction(fadeout);


 


//CCTintTo


//    作用:创建一个色彩变化的消失动作


//    参数1:色彩变化的动作


//    参数2 :红色分量


//    参数3:蓝色分量


//    CCActionInterval * tinto = CCTintTo ::create(3, 255, 255, 0);


//    sp->runAction(tinto);


 


    


//    CCTintBy


    //    作用:创建一个色彩变化的出现动作


    //    参数1:色彩变化的动作


    //    参数2 :红色分量 


    //    参数3:蓝色分量   但是家了reverse就是 反向的


//    CCActionInterval * tintby = CCTintBy::create(3, 0, 255, 255);


//    CCActionInterval * tintby1 = tintby->reverse();


//    sp->runAction(tintby1);


    


//    CCBlink


//    作用 :创建一额闪烁的动作


//    参数1:闪烁完成的时间


//    参数2:闪烁的次数


 


//    CCActionInterval * blink = CCBlink ::create(3, 10);


//    sp->runAction(blink);


    


    


    //    CCDelayTime


//    创建一个延迟的动作


//    参数  延迟的时间


//    CCActionInterval * delaytime = CCDelayTime::create(3);


//    sp->runAction(delaytime);


    


//    CCOrbitCamera


//    作用:创建一个球面坐标轨迹进行旋转的动作


//    参数1 : 旋转轨迹的时间


//    参数2 :起始半径


//    参数3:半径差


//    参数4:起始z角


//    参数5:旋转z角的差


//    参数6:起始x角


//    参数7:旋转x角的差


//     CCActionInterval * orbitcamera = CCOrbitCamera::create(3, 10, 0, 45, 180, 90, 0);


//    sp->runAction(orbitcamera);


 


//    CCCardinalSpline


//    作用:创建数组  点的数组


    CCPointArray * array = CCPointArray::create(20);


    array->addControlPoint(ccp(0,0));


     array->addControlPoint(ccp(210,0));


     array->addControlPoint(ccp(210,240));


     array->addControlPoint(ccp(0,160));


    array->addControlPoint(ccp(0,0));


//    CCCardinalSplineTo


//    作用:创建一个样条曲线轨迹的动作


//    参数1:完成轨迹所需的时间


//    参数2:控制点的坐标数组


//    拟合度  其值= 0 路径最柔和


//    CCActionInterval  * CardinalSplineTo=CCCardinalSplineTo::create(3, array, 0);


//   sp->runAction(CardinalSplineTo);


//CCCardinalSplineBy


    //    作用:创建一个样条曲线轨迹的动作


    //    参数1:完成轨迹所需的时间


    //    参数2:控制点的坐标数组


    //    拟合度  其值= 0 路径最柔和


//    CCActionInterval * CardinalSplineBy = CCCardinalSplineBy::create(3, array, 0);


//    sp->runAction(CardinalSplineBy);


    


//    CCCatmullRomTo  CCCatmullRomBY


//    作用:创建一个样条插值轨迹


//    参数1:完成轨迹的时间


//    参数2:控制点的数组坐标


//    CCActionInterval * catmullRomTo = CCCatmullRomTo::create(3, array);


//    sp->runAction(catmullRomTo);


    


//    CCFollow


//    作用:创建一个跟随动作


//    参数1:跟随的目标对象


//    跟随范围,离开范围就不再跟随


      //创建一个参照物spT


//    CCSprite * spt = CCSprite::create("Icon.png");


//    spt->setPosition(ccp(420,40));


//    addChild(spt);


//    sp->runAction(CCMoveTo::create(3, ccp(940,sp->getPositionY())));


//    


//     CCFollow * follow = CCFollow::create(sp,CCRectMake(0, 0, 960, 320));


//    this-> runAction(follow);


    


//    CCEaseBounceIn


//    目标动作


//    CCActionInterval* move = CCMoveTo::create(3, ccp(300, sp->getPositionY()));


////    让目标动作缓慢开始


////    参数:目标动作


//    CCActionInterval * EaseBounceIn = CCEaseBounceIn::create(move);


//    sp->runAction(EaseBounceIn);


    


//CCEaseBounceOut


//    作用:让目标动作赋予反弹力,且以目标动作结束位子开始反弹


//    参数目标动作


//    CCActionInterval * easeBounceOut = CCEaseBounceOut ::create(move);


//    sp->runAction(easeBounceOut);


    


//    CCEaseBounceInOut


//    作用:让目标动作赋予反弹力,且以目标动作起始与结束位子开始反弹


//    CCActionInterval * easeBounceInOut= CCEaseBounceInOut::create(move);


//    sp->runAction(easeBounceInOut);


    


//   CCEaseBackIn


//    作用:让目标动作赋予回力 , 且以目标动作起点位置作为回力点


//    参数:目标动作


//    CCActionInterval * easeBackIn = CCEaseBackIn::create(move);


//    sp->runAction(easeBackIn);


    


//    CCEaseBackOut


//    作用:让目标动作赋予回力 , 且以目标动作终点位置作为回力点


    //    参数:目标动作


//    CCActionInterval *easeBackOut = CCEaseBackOut::create(move);


//    sp->runAction(easeBackOut);


    


//    CCEaseBackInOut


//    作用:让目标动作赋予回力 , 且以目标动作起点和终点位置作为回力点


    //    参数:目标动作


//    CCActionInterval * easeBackInOut = CCEaseBackInOut::create(move);


//    sp->runAction(easeBackInOut);


    


//    CCEaseElasticIn


//    作用:让目标动作赋予弹性 ,且以目标动作起点位子赋予弹性


//     参数:目标动作


//    CCActionInterval * easeElasticIn= CCEaseElasticIn::create(move);


//    sp->runAction(easeElasticIn);


    


//     CCEaseElasticOut


    //    作用:让目标动作赋予弹性 ,且以目标动作终点位子赋予弹性


    //     参数:目标动作


//    CCActionInterval *easeElasticOut = CCEaseElasticOut::create(move);


//    sp->runAction(easeElasticOut);


    


//    CCEaseElasticInOut


    //    作用:让目标动作赋予弹性 ,且以目标动作起点和终点位子赋予弹性


    //     参数:目标动作


//    CCActionInterval *easeElasticInOut = CCEaseElasticOut::create(move);


//    sp->runAction(easeElasticInOut);


 


//    CCEaseExponentialIn


//    让目标动作缓慢开始


//    参数:目标动作


//    CCActionInterval * easeExponentialIn= CCEaseExponentialIn::create(move);


//    sp->runAction(easeExponentialIn);


    


    //    CCEaseExponentialOut


    //    让目标动作缓慢中止


    //    参数:目标动作


//    CCActionInterval * easeExponentialIn= CCEaseExponentialOut::create(move);


//    sp->runAction(easeExponentialIn);


    


//    CCEaseExponentialInOut


    //    让目标动作缓慢开始和中止


    //    参数:目标动作


//    CCActionInterval * easeExponentialInOut= CCEaseExponentialInOut::create(move);


//    sp->runAction(easeExponentialInOut);


    


//    CCEaseRateAction


//    作用 : 让目标动作设置速率


//    参数1:目标动作


//    参数2:速率


//    CCActionInterval * move = CCMoveTo::create(5, ccp(300,sp->getPositionY()));


//    CCActionInterval * easeRateAction = CCEaseRateAction::create(move, 3);


//    sp->runAction(easeRateAction);


    


//    CCEaseSineIn


//    作用:动作由慢到快


//      参数:目标动作


//    CCActionInterval * easeSineIn = CCEaseSineIn::create(move);


//    sp->runAction(easeSineIn);


    


    //    CCEaseSineOut


    //    作用:动作由快到慢


    //      参数:目标动作


//    CCActionInterval * easeSineOut = CCEaseSineOut::create(move);


//    sp->runAction(easeSineOut);


    


    //    CCEaseSineInOut


    //    作用:动作由慢到快再快到慢


    //      参数:目标动作


//    CCActionInterval * easeSineInOut = CCEaseSineInOut::create(move);


//    sp->runAction(easeSineInOut);


    


//    CCSpeed


//    作用:让目标动作运行速度加倍


//    参数1:目标动作


//    参数2:倍速


//        CCActionInterval * move = CCMoveTo::create(10, ccp(300,sp->getPositionY()));


//    CCSpeed * speed =CCSpeed::create(move, 100);


//    sp->runAction(speed);


    


//    CCSpawn


//  作用:让多个动作同时执行


//    参数:目标动作的可变参数


//    CCActionInterval * move = CCMoveTo::create(10, ccp(300,sp->getPositionY()));


//    CCActionInterval * scale = CCScaleTo::create(2, 3);


//    CCActionInterval * rotate = CCRotateTo::create(4, 190);


//    CCFiniteTimeAction * spawn =CCSpawn::create(move,scale,rotate,NULL);


//    sp->runAction(spawn);


    


//    CCSequence


    //    作用:让多个动作按照前后顺序逐一执行


    //    参数:目标动作的可变参数


//    CCActionInterval * move = CCMoveTo::create(2, ccp(300, sp->getPositionY()));


//    CCActionInterval * scale = CCScaleTo::create(2, 3);


//    CCFiniteTimeAction * seq= CCSequence::create(move,scale,NULL);


//    sp->runAction(seq);


    //    扩展如果要对目标动作全部进行方向运动,可以使用如下形式操作


    //    CCFiniteTimeAction *seq=CCSequence::create(moveby,scaleby,...NULL);


    //    CCFiniteTimeAction * reverseseq = CCSequence::create(seq,seq->reverse(),NULL)


    //    注意CCSequence中的所有动作都必须支持reverse函数,否则会出现异常


//    CCActionInterval * move = CCMoveBy::create(2, ccp(300, sp->getPositionY()));


//    CCActionInterval * scale = CCScaleBy::create(2, 3);


//    CCFiniteTimeAction * seq= CCSequence::create(move,scale,NULL);


//    CCFiniteTimeAction * reveseseq = CCSequence::create(seq,seq->reverse(),NULL);


//    sp->runAction(reveseseq);


    


//    CCRepeat


//    作用:对目标动作进行重复运动(目标动作可以是CCSequence ,CCSpawn)


//    参数1:目标动作


//    参数2:重复次数


//    CCActionInterval * move = CCMoveTo::create(2, ccp(300, sp->getPositionY()));


//    CCActionInterval * move2 = CCMoveTo::create(2, ccp(100,100));


//    CCFiniteTimeAction*seq =CCSequence::create(move,move2,NULL);


//    CCFiniteTimeAction *repeat = CCRepeat::create(seq, 3);


//    sp->runAction(repeat);


    


//    CCRepeatForever


//    作用:对目标动作进行永久性的重复运动(目标动作可以是CCSequence ,CCSpawn)


//    参数:目标动作


//    CCActionInterval * move = CCMoveTo::create(1, ccp(300, sp->getPositionY()));


//    CCActionInterval * move1 = CCMoveTo::create(1, ccp(100,100));


//    CCFiniteTimeAction* seq = CCSequence::create(move,move1,NULL);


//    CCActionInterval * repeatForever =CCRepeatForever::create((CCActionInterval* )seq);


//    sp->runAction(repeatForever);


    


//    CCCallFunc


//    作用:创建一个回调动作(调用不带参数的回调方法);


//    参数1:目标动作


//    参数2:目标回调函数


//    CCActionInterval * move = CCMoveTo::create(1, ccp(300, sp->getPositionY()));


//    CCCallFunc * funcall= CCCallFunc::create(this, callfunc_selector(HelloWorld::callbackC));


//    CCFiniteTimeAction * seq = CCSequence::create(move,funcall,NULL);


//    sp->runAction(seq);


    


//    CCCallFuncN


    //    作用:创建一个回调动作(调用 带一个参数的回调方法);


    //    参数1:目标动作


    //    参数2:目标回调函数


//    CCActionInterval * move = CCMoveTo::create(1, ccp(300, sp->getPositionY()));


//    CCCallFuncN * funcall= CCCallFuncN::create(this, callfuncN_selector(HelloWorld::callbackN));


//    CCFiniteTimeAction * seq = CCSequence::create(move,funcall,NULL);


//    sp->runAction(seq);


    


//    CCCallFuncND


    //    作用:创建一个回调动作(调用 带两个参数的回调方法);


    //    参数1:目标动作


    //    参数2:目标回调函数


    CCActionInterval * move = CCMoveTo::create(1, ccp(300, sp->getPositionY()));


    CCCallFuncND * funcall= CCCallFuncND::create(this, callfuncND_selector(HelloWorld::callbackND)  ,(void*)0xbebabeba);


    CCFiniteTimeAction * seq = CCSequence::create(move,funcall,NULL);


    sp->runAction(seq);


    return true;


}


void HelloWorld::callbackC()


{


    CCLOG("callbackC");


}


 


void HelloWorld::callbackN(CCNode* sender)


{


    CCLOG("callbackN");


}


 


void HelloWorld::callbackND(CCNode* sender, void* data)


{


    CCLOG("callbackND");


}
2016-03-02 09:30:51 TomcatLOVEMysql 阅读数 259
1.CCMoveTo:移动到
2.CCMoveBy:移动                        
3.CCJumpTo:跳跃到
4.CCJumpBy:跳跃
5.CCBezyerBy:贝塞尔
6.CCScaleTo:放大到
7.CCRotateTo:旋转到
8.CCRotateBy:旋转
9.CCBink:闪烁
10.CCTintTo:色调变化到
11.CCTintBy:色调变换
12.CCFadeTo:变暗到
13.CCFadeIn:由无变亮
2015-09-30 17:11:00 weixin_30474613 阅读数 6

下面,我们先简单的介绍一下几个常用的action的API。

cc.repeatForever(action) 无限循环某个action

cc.sequence(action1,action2,...)顺序执行括号里面的action

cc.spawn(action1,action2,...)同时执行括号里面的action

cc.moveTo(duration,targetPoint)从当前位置在duration(秒)时间内移动到点targetPosition的action

cc.easeIn(rate) 以rate为ease参数执行easeIn的action,一般是这样使用的action.easing(cc.easeIn(rate))

fadeOut(duration) 在duration时间内从屏幕淡出的action

cc.delayTime(duration) 延时duration时间的action,通常用于等待一段时间后再播放某个action

cc.callFunc(function) 用于执行action的回调,通常在某个action结束后需要执行某段函数的话,可以使用它。

转载于:https://www.cnblogs.com/CodingJS/p/4849705.html

Cocos缓存的实现

阅读数 427

没有更多推荐了,返回首页