Actions
This page will cover all the actions available to manipulate nodes.
Actions provide various means for manipulating a node's properties. For example if there was a Sprite Node in the game, an action could be applied to make it move from one side of the screen to the other. Most of the actions take various parameters from duration of the animation to how the animation should perform.
Most of the actions have To and By versions. Let's go over the difference between To and By.
The "To" actions manipulate the node's properties absolutely and doesn't take the node's current properties into account. For example, if a sprite was at position (200, 100) and a move to action was applied of (50, 0) then the sprite's new position would be at (50, 0).
The "By" actions manipulate the node's properties relative to it's current state. For example, if a sprite was at position (200, 100) and a move by action was applied of (50, 0) then the sprite's new position would be at (250, 100).
Note: All previews use the code shown as an example.
Move Actions - the move actions allow a node to be moved around the scene
Example format:
Move( actionDuration, endPosition( xPositionValue, yPositionValue ) );
// moves the node to an absolute position on the screen
MoveTo *nodeAction = MoveTo::create( 2, Vec2( 50, 100 ) );
nodeName->runAction( nodeAction );
// offsets the node's current position
MoveBy *nodeAction = MoveBy::create( 2, Vec2( 50, 100 ) );
nodeName->runAction( nodeAction );// moves the node to an absolute position on the screen
var nodeAction = new cc.MoveTo( 2, cc.p( 50, 100 ) );
nodeName.runAction( nodeAction );
// offsets the node's current position
var nodeAction = new cc.MoveBy( 2, cc.p( 50, 100 ) );
nodeName.runAction( nodeAction );Jump Actions - the jump actions allow a node to be moved around the scene whilst it jumps to get to the specified location
Example format:
Jump( actionDuration, endPosition( xPositionValue, yPositionValue ), jumpHeight, numberOfJumps );
// moves the node to an absolute position on the screen
JumpTo *nodeAction = JumpTo::create( 2, Vec2( 50, 100 ), 50, 4 );
nodeName->runAction( nodeAction );
// offsets the node's current position
JumpBy *nodeAction = JumpBy::create( 2, Vec2( 50, 100 ), 50, 4 );
nodeName->runAction( nodeAction );// moves the node to an absolute position on the screen whilst jumping
var nodeAction = new cc.JumpTo( 2, cc.p( 50, 100 ), 50, 4 );
nodeName.runAction( nodeAction );
// offsets the node's current position whilst jumping to the end location
var nodeAction = new cc.JumpBy( 2, cc.p( 50, 100 ), 50, 4 );
nodeName.runAction( nodeAction );Bezier Actions - the bezier actions allow a node to be moved around the scene whilst curving around specifiable points
Example format:
BezierOptions( controlPoint1, controlPoint2, endPosition );
Bezier( actionDuration, BezierOptions );
ccBezierConfig bezierOptions;
bezierOptions.controlPoint_1 = Vec2( 0, 400 );
bezierOptions.controlPoint_2 = Vec2( 300, 50 );
bezierOptions.endPosition = Vec2( 100, 100 );
// moves the node to an absolute position on the screen whilst curving around 2 points
BezierTo *nodeAction = BezierTo::create( 2, bezierOptions );
nodeName->runAction( nodeAction );
// offsets the node's current position whilst curving around 2 points
BezierBy *nodeAction = BezierBy::create( 2, bezierOptions );
nodeName->runAction( nodeAction );var bezierOptions = [cc.p( 0, 400 ), cc.p( 300, 50 ), cc.p( 100, 100 )];
// moves the node to an absolute position on the screen whilst curving around 2 points
var nodeAction = new cc.BezierTo( 2, bezierOptions );
nodeName.runAction( nodeAction );
// offsets the node's current position whilst curving around 2 points
var nodeAction = new cc.BezierBy( 2, bezierOptions );
nodeName.runAction( nodeAction );Place Action - the place action allows a node to be absolutely placed anywhere in the scene without any animation
Example format:
Place( endPosition );
// places the node anywhere in the scene instantly
Place *nodeAction = Place::create( Vec2( 98, 280 ) );
nodeName->runAction( nodeAction );// places the node anywhere in the scene instantly
var nodeAction = new cc.Place( cc.p( 200, 150 ) );
nodeName.runAction( nodeAction );Scaling Actions - the scale actions allow a node to be resized without changing any node specific properties
Example format:
Scale( actionDuration, xAxisScaleFactor, yAxisScaleFactor );
or
Scale( actionDuration, uniformScaleFactor );
// scales the node to the specified scale factor based on it's original size which has a scale factor of 1
ScaleTo *nodeAction = ScaleTo::create( 2, 3, 6 );
nodeName->runAction( nodeAction );
// scales the node relative to it's current size/scale
ScaleBy *nodeAction = ScaleBy::create( 2, 3, 6 );
nodeName->runAction( nodeAction );// scales the node to the specified scale factor based on it's original size which has a scale factor of 1
var nodeAction = new cc.ScaleTo( 2, 3, 6 );
nodeName.runAction( nodeAction );
// scales the node relative to it's current size/scale
var nodeAction = new cc.ScaleBy( 2, 3, 6 );
nodeName.runAction( nodeAction );Rotating Actions - the rotating actions allow a node to be rotated around it's anchor point (default is the center of the node).
Example format:
Rotate( actionDuration, rotationAngle );
Note: Positive value rotates the node clockwise and a negative value rotates it counterclockwise
// rotates the node to the specified rotation angle based on it's original rotation which is 0
RotateTo *nodeAction = RotateTo::create( 2, 45 );
nodeName->runAction( nodeAction );
// rotates the node relative to it's current rotation
RotateBy *nodeAction = RotateBy::create( 2, 45 );
nodeName->runAction( nodeAction );// rotates the node to the specified rotation angle based on it's original rotation which is 0
var nodeAction = new cc.RotateTo( 2, 45 );
nodeName.runAction( nodeAction );
// rotates the node relative to it's current rotation
var nodeAction = new cc.RotateBy( 2, 45 );
nodeName.runAction( nodeAction );Tinting Actions - the tinting actions allow a nodes RGB values to be modified
Example format:
Tint( actionDuration, redOffsetValue, greenOffsetValue, blueOffsetValue );
// modifies the node's RGB values by changing them to certain value
TintTo *nodeAction = TintTo::create( 2, 45, 45, 100 );
nodeName->runAction( nodeAction );
// modifies the node's RGB values by offsetting the node's current RGB values
TintBy *nodeAction = TintBy::create( 2, 45, 45, 100 );
nodeName->runAction( nodeAction );// modifies the node's RGB values by changing them to certain value
var nodeAction = new cc.TintTo( 2, 45, 45, 100 );
nodeName.runAction( nodeAction );
// modifies the node's RGB values by offsetting the node's current RGB values
var nodeAction = new cc.TintBy( 2, 45, 45, 100 );
nodeName.runAction( nodeAction );Fading Actions - the fading actions allow a nodes opacity to be modified
Example format:
Fade( actionDuration, endOpacity );
FadeIn( actionDuration );
FadeOut( actionDuration );
Note: Opacity ranges between 0 and 255
// changes the node's opacity to a specified value
FadeTo *nodeAction = FadeTo::create( 2, 100 );
nodeName->runAction( nodeAction );
// fades the node in (essentially fades the node's opacity to 255 from it's current opacity value)
FadeIn *nodeAction = FadeIn::create( 2 );
nodeName->runAction( nodeAction );
// fades the node out (essentially fades the node's opacity to 0 from it's current opacity value)
FadeOut *nodeAction = FadeOut::create( 2 );
nodeName->runAction( nodeAction );// changes the node's opacity to a specified value
var nodeAction = new cc.FadeTo( 2, 100 );
nodeName.runAction( nodeAction );
// fades the node in (essentially fades the node's opacity to 255 from it's current opacity value)
var nodeAction = new cc.FadeIn( 2 );
nodeName.runAction( nodeAction );
// fades the node out (essentially fades the node's opacity to 0 from it's current opacity value)
var nodeAction = new cc.FadeOut( 2 );
nodeName.runAction( nodeAction );Skewing Actions - the skewing actions allow a node to be distorted in the x and y axis
Example format:
Skew( actionDuration, xSkewFactor, ySkewFactor );
// distorts the node to an absolute value
SkewTo *nodeAction = SkewTo::create( 2, 20, 20 );
nodeName->runAction( nodeAction );
// distorts the node relative to it's current distortion/skew
SkewBy *nodeAction = SkewBy::create( 2, 20, 20 );
nodeName->runAction( nodeAction );// distorts the node to an absolute value
var nodeAction = new cc.SkewTo( 2, 20, 20 );
nodeName.runAction( nodeAction );
// distorts the node relative to it's current distortion/skew
var nodeAction = new cc.SkewBy( 2, 20, 20 );
nodeName.runAction( nodeAction );Delay Action - this actions can be used inside a Sequence to provide a delay between actions (to be used in a sequence)
Example format:
DelayTime( timeInSeconds );
// delay of 5 seconds
DelayTime *delayAction = DelayTime::create( 5.0 );// delay of 2.5 seconds
var delayAction = new cc.DelayTime( 2.5 );Sequencing - sequencing allows several actions to be run but they are run only when the previous one has finished
Example format:
Sequence( action1, action2, action3, etc... );
// runs several actions one after another
Sequence *sequenceAction = Sequence::create( nodeAction1, nodeAction2, nodeAction3, NULL );
nodeName->runAction( sequenceAction );// runs several actions one after another
var sequenceAction = new cc.Sequence( nodeAction1, nodeAction2, nodeAction3 );
nodeName.runAction( sequenceAction );Reverse Sequencing - reverse sequencing allows several actions to be run but they are run only when the previous one has finished and they are run in reverse not just reverse order but the animations themselves are run in reverse. This is great if you literally want to reverse a set of actions almost like an undo button.
Example format:
Sequence( action1, action2, action3, etc... );
// runs several actions one after another in reverse
Sequence *sequenceAction = Sequence::create( nodeAction1, nodeAction2, nodeAction3, NULL );
nodeName->runAction( sequenceAction->reverse( ) );// runs several actions one after another in reverse
var sequenceAction = new cc.Sequence( nodeAction1, nodeAction2, nodeAction3 );
nodeName.runAction( sequenceAction.reverse( ) );Repeating Actions - if you want to repeat actions it is easy by using the built-in repeat methods.
Example format:
Repeat( actionToRepeat, numberOfTimesToRepeatAction );
// repeats an action a set number of times
Repeat *repeatAction = Repeat::create( actionToRepeat );
nodeName->runAction( repeatAction );
// repeats an action forever
RepeatForever *repeatForeverAction = RepeatForever::create( actionToRepeat );
nodeName->runAction( repeatForeverAction );// repeats an action a set number of times
var repeatAction = new cc.Repeat( actionToRepeat, 5 );
nodeName.runAction( repeatAction );
// repeats an action forever
var repeatForeverAction = new cc.RepeatForever( actionToRepeat );
nodeName.runAction( repeatForeverAction );Note: Even sequences can be repeated
Spawning - spawning allows multiple actions to be run at the same time similar to calling several actions line by line but spawning can be done within sequences as well, this makes it extremely useful
Example format:
Spawn( action1, action2, action3, etc... );
// runs several actions at the same time
Spawn *spawnAction = Spawn::create( nodeAction1, nodeAction2, nodeAction3, NULL );
nodeName->runAction( spawnAction );// runs several actions at the same time
var spawnAction = new cc.Spawn( nodeAction1, nodeAction2, nodeAction3 );
nodeName.runAction( spawnAction );Call Function - call function allows a function to be called at the same place an action would be could so a sequence for example
Example format:
CallFunction( functionToCall );
// calls a functions when the action is run (can be inline or a external function)
CallFunc *functionAction = CallFunc::create( functionToCall );
nodeName->runAction( functionAction );// calls a functions when the action is run (can be inline or a external function)
var functionAction = new cc.CallFunc( functionToCall );
nodeName.runAction( functionAction );Updated about 2 months ago