"COCOS2D-JS official documents" Five, Cocos2d-js v3.0 's new action API

Source: Internet
Author: User

Methods in the new action

Once, when we need to repeat an action, we need to:

sprite.runAction(cc.Repeat.create(action, 2));

The above code creates a new repeat object that wraps the action again, which is more difficult to understand both semantically and in code. Why can't we use the original action as easily and conveniently as jquery?

So we added a new method to the action in the new version number:

sprite.runAction(action.repeat(2));

To loop the action only needs to be added after the action. Repeat (), instead of having to generate an action once again, is it more convenient? ^.^

In addition, we have added a simpler way to create a new object for the related class of action by changing the first letter of the class name to lowercase:

 var action = cc.moveBy(2,cc.p(10,10));

The above code is equivalent to:

var action =  cc.MoveBy.create(2, cc.p(10, 10))

See here, everyone must be very worried about one thing ~ compatibility ...

In fact, you don't have to worry too much, the old method is still supported.

Why to add an API

Just mentioned how to invoke the new method, but why do we add new methods to the existing set of mature scenarios or the new version number?

In fact, it's all about being simpler, more in line with your habits, and making the code look clearer.

The chained syntax allows us to generate only one object, and then we can implement various functions by invoking different methods of the object:

var action = cc.RotateTo.create(0.5, 90).repeat(5).speed(0.5);

Or:

var action = cc.RotateTo.create(0.5, 90);action.repeat(5);action.speed(0.5);

Even users who have never been in touch with COCOS2D-HTML5 will be able to read the code in the first time-create an action, then set the number of repetitions and the speed of the action for that operation.

Let's compare the old method:

var action = cc.RotateTo.create(0.5, 90);var action1 = cc.Repeat.create(action, 2);var action2 = cc.Speed.create(action1, 0.5);

The old method generated 3 objects and caused a slight pollution in the code. In reading and writing efficiency is not as good as the new method.

In addition, there is no need to generate redundant objects again, so there is a little bit of elevation in the initialization speed.

So although the new version number still supports the old method, we recommend that you carcass the code in the new way.

New API List

In addition to the above mentioned repeat and the speed method, we have added the following methods.

old call use method the corresponding new method
Cc. Repeat.create (action, NUM) Action.repeat (num)
Cc. Repeatforever.create (Action) Action.repeatforever ()
Cc. Speed.create (action, speed) Action.speed (Speed)
Cc. Speed.setspeed (Speed) Action.setspeed (Speed)
Cc. Speed.getspeed () Action.getspeed ()
Cc. Easein.create (action, rate) Action.easing (Cc.easein (rate))
Cc. Easeout.create (action, rate) Action.easing (Cc.easeout (rate))
Cc. Easeinout.create (action, rate) Action.easing (Cc.easeinout (rate))
Cc. Easeexponentialin.create (Action) Action.easing (Cc.easeexponentialin ())
Cc. Easeexponentialout.create (Action) Action.easing (Cc.easeexponentialout ())
Cc. Easeexponentialinout.create (Action) Action.easing (Cc.easeexponentialinout ())
Cc. Easesinein.create (Action) Action.easing (Cc.easesinein ())
Cc. Easesineout.create (Action) Action.easing (Cc.easesineout ())
Cc. Easesineinout.create (Action) Action.easing (Cc.easesineinout ())
Cc. Easeelasticin.create (Action) Action.easing (Cc.easeelasticin ())
Cc. Easeelasticout.create (Action) Action.easing (Cc.easeelasticout ())
Cc. Easeelasticinout.create (action, rate) Action.easing (Cc.easeelasticinout (rate))
Cc. Easebouncein.create (Action) Action.easing (Cc.easebouncein ())
Cc. Easebounceout.create (Action) Action.easing (Cc.easebounceout ())
Cc. Easebounceinout.create (Action) Action.easing (Cc.easebounceinout ())
Cc. Easebackin.create (Action) Action.easing (Cc.easebackin ())
Cc. Easebackout.create (Action) Action.easing (Cc.easebackout ())
Cc. Easebackinout.create (Action) Action.easing (Cc.easebackinout ())

Some demo examples:

EaseIn:var move = cc.MoveBy.create(2, cc.p(winSize.width - 80, 0)).easing(cc.easeIn(2.0));sprite.runAction(move);RepeatForever:var move = cc.MoveBy.create(2, cc.p(winSize.width - 80, 0)).RepeatForever();sprite.runAction(move);
Precautions

Repeatedly uses the two Repeat/speed method on an Action object, and the result is multiplied by the set value.

var action = cc.RotateTo.create(0.5, 90);//speed为6action.speed(2).speed(3);action.getSpeed() ==> 6;//repeat次数为6

action.repeat(2).repeat(3);

转载请注明:http://www.douapp.com/post/2444

"COCOS2D-JS official documents" Five, Cocos2d-js v3.0 's new action API

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.