Skip to content

Latest commit

 

History

History
136 lines (107 loc) · 3.79 KB

4.md

File metadata and controls

136 lines (107 loc) · 3.79 KB

Chapter 4: Actions

Node can have actions applied to it.

Basic Actions and how to run them

Basic actions are usually a singular action, thus accomplishing a single objective.

Animate



Fade In/Out


Fades In a Node that implements the RGBA protocol.


It modifies the opacity from 0 to 255. The "reverse" of this action is FadeOut


// appy a fade to 200
auto fadeIn = cocos2d::FadeIn::create(200.0);
myNode->runAction(fadeIn);

// fade to 120 over 2 seconds
auto fadeTo = cocos2d::FadeTo::create(2.0f, 120.0f);
myNode->runAction(fadeTo);

// then reverse it
myNode->runAction(fadeTo->reverse());


Move


Move the Node position over a set period of time.


// Move a sprite 50 pixels to the right, and 10 pixels to the top over 2 seconds.
auto moveBy = cocos2d::MoveBy::create(2, cocos2d::Point(50,10));
myNode->runAction(moveBy);

// Move a sprite to a specific location over 2 seconds.
auto moveTo = cocos2d::MoveTo::create(2, cocos2d::Point(50,10));
myNode->runAction(moveTo);


Rotate


Rotates a Node


// Rotates a Node to the specific angle
auto rotateTo = cocos2d::RotateTo::create(2.0f, 10);
myNode->runAction(rotateTo);

// Rotates a Node clockwise by 2 degree over 10 seconds    
auto rotateBy = cocos2d::RotateBy::create(2.0f, 10);
myNode->runAction(rotateBy);    


Scale


Scales a Node


// Scale uniformly by 10 over 2 seconds
auto scaleBy = cocos2d::ScaleBy::create(2.0f, 10.0f);
myNode->runAction(scaleBy);

// Scale X by 10 and Y by 20 over 2 seconds    
auto scaleBy = cocos2d::ScaleBy::create(2.0f, 10.0f, 20.0f);
myNode->runAction(scaleBy);

// Scale to uniformly to 10 over 2 seconds
auto scaleTo = cocos2d::ScaleTo::create(2.0f, 10.0f);
myNode->runAction(scaleTo);

// Scale X to 10 and Y to 20 over 2 seconds
auto scaleTo = cocos2d::ScaleTo::create(2.0f, 10.0f, 20.0f);
myNode->runAction(scaleTo);


Tint


Tints a Node that implements the NodeRGB protocol from current tint to a custom one.


// Tints a node to the specified RGB values
auto tintTo = cocos2d::TintTo::create(2.0f, 120.0f, 132.0f, 196.0f);
myNode->runAction(tintTo);

// Tints a node BY the delta of the specified RGB values.
auto tintBy = cocos2d::TintBy::create(2.0f, 10.0f, 2.0f, 20.0f);
myNode->runAction(tintBy);


Tweening and Easing




Sequences and how to run them


Sequences are a series of events to be executed sequentially.


An example sequence


// create a few actions.
auto jump = cocos2d::JumpBy::create(0.5, cocos2d::Point(0, 0), 100, 1);
    
auto rotate = cocos2d::RotateTo::create(2.0f, 10);
    
// create a few callbacks
auto callbackJump = cocos2d::CallFunc::create([](){
    cocos2d::log("Jumped!");
});
    
auto callbackRotate = cocos2d::CallFunc::create([](){
    cocos2d::log("Rotated!");
});
    
// create a sequence with the actions and callbacks
auto seq = cocos2d::Sequence::create(jump, callbackJump, rotate, callbackRotate, nullptr);
    
// run it
myNode->runAction(seq);


So what is this Sequence action do?


It will executes the following actions sequentially:


Jump -> callbackJump -> Rotate -> callbackRotate


Spawn


Spawn is very similar to Sequence, except that all actions will run at the same time.


// create 2 actions and run a Spawn on a Sprite
auto mySprite = cocos2d::Sprite::create("circle.png");

auto actionBy = cocos2d::MoveBy::create(10, Point(400,100));

auto fadeTo = cocos2d::FadeTo::create(2.0f, 120.0f);

auto mySpawn = cocos2d::Spawn::createWithTwoActions(actionBy, fadeTo);

mySprite->runAction(mySpawn);


Reverse


Reverse is exactly like it sounds. If you run a series of actions, you can call Reverse to run it in the opposite order. Backwards.


Using the Spawn example above reversing is simple.


mySprite->runAction(mySpawn->reverse());