Skip to content

Latest commit

 

History

History
134 lines (105 loc) · 3.76 KB

5.md

File metadata and controls

134 lines (105 loc) · 3.76 KB

Chapter 5: Actions To Nodes

Node can have actions applied to it.

Basic Actions and how to run them

Basic actions are usually a singular action. The action accomplishes 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 specic 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 a specified change
auto rotateTo = cocos2d::RotateTo::create(2.0f, 10);
myNode->runAction(rotateTo);

// Rotates a Node by a specfied change    
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, NULL);
    
// run it
myNode->runAction(seq);


So what this this Sequence do?


It executed the following 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());