{"_id":"547b1c2e7eec0f080099e1dd","__v":130,"category":{"_id":"5463e333447e0a100024a08b","project":"5463e333447e0a100024a087","pages":["5463e334447e0a100024a08d","54646a285871e90800f50174","54667e7af2b6390800dfd82a","54679c8c98b6840800268982","54679d8498b6840800268987","546a2ed0394c861a00c3a413","546b6a4862515a14007ebbba","547b1c2e7eec0f080099e1dd","55d33d90b9ef4435006dec70","56570c764d1c720d001f51bb"],"version":"5463e333447e0a100024a08a","__v":10,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2014-11-12T22:46:11.951Z","from_sync":false,"order":1,"slug":"documentation","title":"Documentation"},"user":"54639d06447e0a1000249f7f","version":{"_id":"5463e333447e0a100024a08a","project":"5463e333447e0a100024a087","__v":6,"createdAt":"2014-11-12T22:46:11.486Z","releaseDate":"2014-11-12T22:46:11.486Z","categories":["5463e333447e0a100024a08b","54645c365871e90800f50151","547b1c5a4366a708001b3b50","547b1cdf4366a708001b3b5a","54e3bef8464a9c3700f7ca67","54ec651d7ab3172d00c01ab7"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"project":"5463e333447e0a100024a087","updates":[],"next":{"pages":[],"description":""},"createdAt":"2014-11-30T13:31:26.683Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","try":true,"basic_auth":false,"auth":"never","params":[],"url":""},"isReference":false,"order":6,"body":"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.\n\nMost of the actions have To and By versions. Let's go over the difference between To and By.\n\nThe \"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).\n\nThe \"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).\n\nNote: ***All previews use the code shown as an example.***\n\n##**Move Actions** - the move actions allow a node to be moved around the scene\n\n*Example format:*\n\n*Move( actionDuration, endPosition( xPositionValue, yPositionValue ) );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// moves the node to an absolute position on the screen\\nMoveTo *nodeAction = MoveTo::create( 2, Vec2( 50, 100 ) );\\nnodeName->runAction( nodeAction );\\n\\n// offsets the node's current position\\nMoveBy *nodeAction = MoveBy::create( 2, Vec2( 50, 100 ) );\\nnodeName->runAction( nodeAction );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// moves the node to an absolute position on the screen\\nvar nodeAction = new cc.MoveTo( 2, cc.p( 50, 100 ) );\\nnodeName.runAction( nodeAction );\\n\\n// offsets the node's current position\\nvar nodeAction = new cc.MoveBy( 2, cc.p( 50, 100 ) );\\nnodeName.runAction( nodeAction );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>MoveTo Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/MistyPastelAsiandamselfly-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/MistyPastelAsiandamselfly.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/MistyPastelAsiandamselfly.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/MistyPastelAsiandamselfly.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\\n\\n<br />\\n\\n<center><strong>MoveBy Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/FlakyVigilantDolphin-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/FlakyVigilantDolphin.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/FlakyVigilantDolphin.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/FlakyVigilantDolphin.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Jump Actions** - the jump actions allow a node to be moved around the scene whilst it jumps to get to the specified location\n\n*Example format:*\n\n*Jump( actionDuration, endPosition( xPositionValue, yPositionValue ), jumpHeight, numberOfJumps );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// moves the node to an absolute position on the screen\\nJumpTo *nodeAction = JumpTo::create( 2, Vec2( 50, 100 ), 50, 4 );\\nnodeName->runAction( nodeAction );\\n\\n// offsets the node's current position\\nJumpBy *nodeAction = JumpBy::create( 2, Vec2( 50, 100 ), 50, 4 );\\nnodeName->runAction( nodeAction );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// moves the node to an absolute position on the screen whilst jumping\\nvar nodeAction = new cc.JumpTo( 2, cc.p( 50, 100 ), 50, 4 );\\nnodeName.runAction( nodeAction );\\n\\n// offsets the node's current position whilst jumping to the end location\\nvar nodeAction = new cc.JumpBy( 2, cc.p( 50, 100 ), 50, 4 );\\nnodeName.runAction( nodeAction );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>JumpTo Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/BestBoilingCygnet-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/BestBoilingCygnet.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/BestBoilingCygnet.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/BestBoilingCygnet.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\\n\\n<br />\\n\\n<center><strong>JumpBy Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/EnormousPastCheetah-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/EnormousPastCheetah.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/EnormousPastCheetah.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/EnormousPastCheetah.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Bezier Actions** - the bezier actions allow a node to be moved around the scene whilst curving around specifiable points\n\n*Example format:*\n\n*BezierOptions( controlPoint1, controlPoint2, endPosition );\nBezier( actionDuration, BezierOptions );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"ccBezierConfig bezierOptions;\\nbezierOptions.controlPoint_1 = Vec2( 0, 400 );\\nbezierOptions.controlPoint_2 = Vec2( 300, 50 );\\nbezierOptions.endPosition = Vec2( 100, 100 );\\n\\n// moves the node to an absolute position on the screen whilst curving around 2 points\\nBezierTo *nodeAction = BezierTo::create( 2, bezierOptions );\\nnodeName->runAction( nodeAction );\\n\\n// offsets the node's current position whilst curving around 2 points\\nBezierBy *nodeAction = BezierBy::create( 2, bezierOptions );\\nnodeName->runAction( nodeAction );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"var bezierOptions = [cc.p( 0, 400 ), cc.p( 300, 50 ), cc.p( 100, 100 )];\\n\\n// moves the node to an absolute position on the screen whilst curving around 2 points\\nvar nodeAction = new cc.BezierTo( 2, bezierOptions );\\nnodeName.runAction( nodeAction );\\n\\n// offsets the node's current position whilst curving around 2 points\\nvar nodeAction = new cc.BezierBy( 2, bezierOptions );\\nnodeName.runAction( nodeAction );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>BezierTo Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/ObviousAccomplishedEmeraldtreeskink-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/ObviousAccomplishedEmeraldtreeskink.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/ObviousAccomplishedEmeraldtreeskink.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/ObviousAccomplishedEmeraldtreeskink.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\\n\\n<br />\\n\\n<center><strong>BezierBy Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/CleverIllinformedAmericanpainthorse-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/CleverIllinformedAmericanpainthorse.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/CleverIllinformedAmericanpainthorse.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/CleverIllinformedAmericanpainthorse.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Place Action** - the place action allows a node to be absolutely placed anywhere in the scene without any animation\n\n*Example format:*\n\n*Place( endPosition );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// places the node anywhere in the scene instantly\\nPlace *nodeAction = Place::create( Vec2( 98, 280 ) );\\nnodeName->runAction( nodeAction );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// places the node anywhere in the scene instantly\\nvar nodeAction = new cc.Place( cc.p( 200, 150 ) );\\nnodeName.runAction( nodeAction );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**Scaling Actions** - the scale actions allow a node to be resized without changing any node specific properties\n\n*Example format:*\n\n*Scale( actionDuration, xAxisScaleFactor, yAxisScaleFactor );*\n\n*or*\n\n*Scale( actionDuration, uniformScaleFactor );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// scales the node to the specified scale factor based on it's original size which has a scale factor of 1\\nScaleTo *nodeAction = ScaleTo::create( 2, 3, 6 );\\nnodeName->runAction( nodeAction );\\n\\n// scales the node relative to it's current size/scale\\nScaleBy *nodeAction = ScaleBy::create( 2, 3, 6 );\\nnodeName->runAction( nodeAction );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// scales the node to the specified scale factor based on it's original size which has a scale factor of 1\\nvar nodeAction = new cc.ScaleTo( 2, 3, 6 );\\nnodeName.runAction( nodeAction );\\n\\n// scales the node relative to it's current size/scale\\nvar nodeAction = new cc.ScaleBy( 2, 3, 6 );\\nnodeName.runAction( nodeAction );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>ScaleTo(scaled to 0.25 before action) Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/WindingJubilantHuemul-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/WindingJubilantHuemul.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/WindingJubilantHuemul.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/WindingJubilantHuemul.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\\n\\n<br />\\n\\n<center><strong>ScaleBy(scaled to 0.25 before action) Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/NearBlindAmericanbadger-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/NearBlindAmericanbadger.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/NearBlindAmericanbadger.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/NearBlindAmericanbadger.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Rotating Actions** - the rotating actions allow a node to be rotated around it's anchor point (default is the center of the node).\n\n*Example format:*\n\n*Rotate( actionDuration, rotationAngle );*\n\nNote: *Positive value rotates the node clockwise and a negative value rotates it counterclockwise*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// rotates the node to the specified rotation angle based on it's original rotation which is 0\\nRotateTo *nodeAction = RotateTo::create( 2, 45 );\\nnodeName->runAction( nodeAction );\\n\\n// rotates the node relative to it's current rotation\\nRotateBy *nodeAction = RotateBy::create( 2, 45 );\\nnodeName->runAction( nodeAction );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// rotates the node to the specified rotation angle based on it's original rotation which is 0\\nvar nodeAction = new cc.RotateTo( 2, 45 );\\nnodeName.runAction( nodeAction );\\n\\n// rotates the node relative to it's current rotation\\nvar nodeAction = new cc.RotateBy( 2, 45 );\\nnodeName.runAction( nodeAction );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>RotateTo(rotated to 90 degrees before action) Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/SafeFairHerald-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/SafeFairHerald.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/SafeFairHerald.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/SafeFairHerald.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\\n\\n<br />\\n\\n<center><strong>RotateBy(rotated to 90 degrees before action) Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/AcceptableSlowDrongo-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/AcceptableSlowDrongo.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/AcceptableSlowDrongo.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/AcceptableSlowDrongo.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Tinting Actions** - the tinting actions allow a nodes RGB values to be modified\n\n*Example format:*\n\n*Tint( actionDuration, redOffsetValue, greenOffsetValue, blueOffsetValue );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// modifies the node's RGB values by changing them to certain value\\nTintTo *nodeAction = TintTo::create( 2, 45, 45, 100 );\\nnodeName->runAction( nodeAction );\\n\\n// modifies the node's RGB values by offsetting the node's current RGB values\\nTintBy *nodeAction = TintBy::create( 2, 45, 45, 100 );\\nnodeName->runAction( nodeAction );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// modifies the node's RGB values by changing them to certain value\\nvar nodeAction = new cc.TintTo( 2, 45, 45, 100 );\\nnodeName.runAction( nodeAction );\\n\\n// modifies the node's RGB values by offsetting the node's current RGB values\\nvar nodeAction = new cc.TintBy( 2, 45, 45, 100 );\\nnodeName.runAction( nodeAction );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>TintTo(RGB set to (100, 100, 20) before action) Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/DemandingDelayedKudu-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/DemandingDelayedKudu.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/DemandingDelayedKudu.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/DemandingDelayedKudu.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\\n\\n<br />\\n\\n<center><strong>TintBy(RGB set to (100, 100, 20) before action) Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/FondRepulsiveDrake-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/FondRepulsiveDrake.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/FondRepulsiveDrake.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/FondRepulsiveDrake.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Fading Actions** - the fading actions allow a nodes opacity to be modified\n\n*Example format:*\n\n*Fade( actionDuration, endOpacity ); *\n\n*FadeIn( actionDuration );*\n\n*FadeOut( actionDuration );*\n\nNote: *Opacity ranges between 0 and 255*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// changes the node's opacity to a specified value\\nFadeTo *nodeAction = FadeTo::create( 2, 100 );\\nnodeName->runAction( nodeAction );\\n\\n// fades the node in (essentially fades the node's opacity to 255 from it's current opacity value)\\nFadeIn *nodeAction = FadeIn::create( 2 );\\nnodeName->runAction( nodeAction );\\n\\n// fades the node out (essentially fades the node's opacity to 0 from it's current opacity value)\\nFadeOut *nodeAction = FadeOut::create( 2 );\\nnodeName->runAction( nodeAction );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// changes the node's opacity to a specified value\\nvar nodeAction = new cc.FadeTo( 2, 100 );\\nnodeName.runAction( nodeAction );\\n\\n// fades the node in (essentially fades the node's opacity to 255 from it's current opacity value)\\nvar nodeAction = new cc.FadeIn( 2 );\\nnodeName.runAction( nodeAction );\\n\\n// fades the node out (essentially fades the node's opacity to 0 from it's current opacity value)\\nvar nodeAction = new cc.FadeOut( 2 );\\nnodeName.runAction( nodeAction );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>FadeTo(opacity set to 175 before action) Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/LikableOffensiveDwarfrabbit-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/LikableOffensiveDwarfrabbit.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/LikableOffensiveDwarfrabbit.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/LikableOffensiveDwarfrabbit.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\\n\\n<br />\\n\\n<center><strong>FadeIn(opacity set to 175 before action) Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/VibrantEvergreenInvisiblerail-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/VibrantEvergreenInvisiblerail.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/VibrantEvergreenInvisiblerail.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/VibrantEvergreenInvisiblerail.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\\n\\n<br />\\n\\n<center><strong>FadeOut(opacity set to 175 before action) Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/LittleRealInsect-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/LittleRealInsect.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/LittleRealInsect.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/LittleRealInsect.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Skewing Actions** - the skewing actions allow a node to be distorted in the x and y axis\n\n*Example format:*\n\n*Skew( actionDuration, xSkewFactor, ySkewFactor );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// distorts the node to an absolute value\\nSkewTo *nodeAction = SkewTo::create( 2, 20, 20 );\\nnodeName->runAction( nodeAction );\\n\\n// distorts the node relative to it's current distortion/skew\\nSkewBy *nodeAction = SkewBy::create( 2, 20, 20 );\\nnodeName->runAction( nodeAction );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// distorts the node to an absolute value\\nvar nodeAction = new cc.SkewTo( 2, 20, 20 );\\nnodeName.runAction( nodeAction );\\n\\n// distorts the node relative to it's current distortion/skew\\nvar nodeAction = new cc.SkewBy( 2, 20, 20 );\\nnodeName.runAction( nodeAction );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n\n[block:html]\n{\n  \"html\": \"<center><strong>SkewTo(skew set to (20, 40) before action) Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/FavoriteWealthyHoopoe-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/FavoriteWealthyHoopoe.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/FavoriteWealthyHoopoe.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/FavoriteWealthyHoopoe.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\\n\\n<br />\\n\\n<center><strong>SkewBy(skew set to (20, 40) before action) Preview</strong></center>\\n<center>\\n\\t<video controls=\\\"\\\" preload=\\\"none\\\" name=\\\"media\\\" width=\\\"300\\\" poster=\\\"http://thumbs.gfycat.com/DisfiguredWavyKob-thumb100.jpg\\\">\\n\\t<source src=\\\"http://zippy.gfycat.com/DisfiguredWavyKob.webm\\\" type=\\\"video/webm\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/DisfiguredWavyKob.ogv\\\" type=\\\"video/ogg\\\" />\\n\\t<source src=\\\"http://zippy.gfycat.com/DisfiguredWavyKob.mp4\\\" type=\\\"video/mp4\\\" />\\n\\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\\\"http://www.google.co.uk/intl/en_uk/chrome/browser/\\\">Google Chrome</a>.</p>\\n\\t</video>\\n</center>\"\n}\n[/block]\n##**Delay Action** - this actions can be used inside a Sequence to provide a delay between actions (to be used in a sequence)\n\n*Example format:*\n\n*DelayTime( timeInSeconds );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// delay of 5 seconds\\nDelayTime *delayAction = DelayTime::create( 5.0 );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// delay of 2.5 seconds\\nvar delayAction = new cc.DelayTime( 2.5 );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**Sequencing** - sequencing allows several actions to be run but they are run only when the previous one has finished\n\n*Example format:*\n\n*Sequence( action1, action2, action3, etc... );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// runs several actions one after another\\nSequence *sequenceAction = Sequence::create( nodeAction1, nodeAction2, nodeAction3, NULL );\\nnodeName->runAction( sequenceAction );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// runs several actions one after another\\nvar sequenceAction = new cc.Sequence( nodeAction1, nodeAction2, nodeAction3 );\\nnodeName.runAction( sequenceAction );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**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.\n\n*Example format:*\n\n*Sequence( action1, action2, action3, etc... );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// runs several actions one after another in reverse\\nSequence *sequenceAction = Sequence::create( nodeAction1, nodeAction2, nodeAction3, NULL );\\nnodeName->runAction( sequenceAction->reverse( ) );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// runs several actions one after another in reverse\\nvar sequenceAction = new cc.Sequence( nodeAction1, nodeAction2, nodeAction3 );\\nnodeName.runAction( sequenceAction.reverse( ) );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**Repeating Actions** - if you want to repeat actions it is easy by using the built-in repeat methods.\n\n*Example format:*\n\n*Repeat( actionToRepeat, numberOfTimesToRepeatAction );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// repeats an action a set number of times\\nRepeat *repeatAction = Repeat::create( actionToRepeat );\\nnodeName->runAction( repeatAction );\\n\\n// repeats an action forever\\nRepeatForever *repeatForeverAction = RepeatForever::create( actionToRepeat );\\nnodeName->runAction( repeatForeverAction );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// repeats an action a set number of times\\nvar repeatAction = new cc.Repeat( actionToRepeat, 5 );\\nnodeName.runAction( repeatAction );\\n\\n// repeats an action forever\\nvar repeatForeverAction = new cc.RepeatForever( actionToRepeat );\\nnodeName.runAction( repeatForeverAction );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\nNote: *Even sequences can be repeated*\n\n##**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\n\n*Example format:*\n\n*Spawn( action1, action2, action3, etc... );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// runs several actions at the same time\\nSpawn *spawnAction = Spawn::create( nodeAction1, nodeAction2, nodeAction3, NULL );\\nnodeName->runAction( spawnAction );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// runs several actions at the same time\\nvar spawnAction = new cc.Spawn( nodeAction1, nodeAction2, nodeAction3 );\\nnodeName.runAction( spawnAction );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]\n##**Call Function** - call function allows a function to be called at the same place an action would be could so a sequence for example\n\n*Example format:*\n\n*CallFunction( functionToCall );*\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// calls a functions when the action is run (can be inline or a external function)\\nCallFunc *functionAction = CallFunc::create( functionToCall );\\nnodeName->runAction( functionAction );\",\n      \"language\": \"cplusplus\",\n      \"name\": \"Cocos2d-x C++\"\n    },\n    {\n      \"code\": \"// calls a functions when the action is run (can be inline or a external function)\\nvar functionAction = new cc.CallFunc( functionToCall );\\nnodeName.runAction( functionAction );\",\n      \"language\": \"javascript\",\n      \"name\": \"Cocos2d-JS\"\n    }\n  ]\n}\n[/block]","excerpt":"This page will cover all the actions available to manipulate nodes.","slug":"actions","type":"basic","title":"Actions"}

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 ) );* [block:code] { "codes": [ { "code": "// moves the node to an absolute position on the screen\nMoveTo *nodeAction = MoveTo::create( 2, Vec2( 50, 100 ) );\nnodeName->runAction( nodeAction );\n\n// offsets the node's current position\nMoveBy *nodeAction = MoveBy::create( 2, Vec2( 50, 100 ) );\nnodeName->runAction( nodeAction );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// moves the node to an absolute position on the screen\nvar nodeAction = new cc.MoveTo( 2, cc.p( 50, 100 ) );\nnodeName.runAction( nodeAction );\n\n// offsets the node's current position\nvar nodeAction = new cc.MoveBy( 2, cc.p( 50, 100 ) );\nnodeName.runAction( nodeAction );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>MoveTo Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/MistyPastelAsiandamselfly-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/MistyPastelAsiandamselfly.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/MistyPastelAsiandamselfly.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/MistyPastelAsiandamselfly.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>\n\n<br />\n\n<center><strong>MoveBy Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/FlakyVigilantDolphin-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/FlakyVigilantDolphin.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/FlakyVigilantDolphin.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/FlakyVigilantDolphin.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**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 );* [block:code] { "codes": [ { "code": "// moves the node to an absolute position on the screen\nJumpTo *nodeAction = JumpTo::create( 2, Vec2( 50, 100 ), 50, 4 );\nnodeName->runAction( nodeAction );\n\n// offsets the node's current position\nJumpBy *nodeAction = JumpBy::create( 2, Vec2( 50, 100 ), 50, 4 );\nnodeName->runAction( nodeAction );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// moves the node to an absolute position on the screen whilst jumping\nvar nodeAction = new cc.JumpTo( 2, cc.p( 50, 100 ), 50, 4 );\nnodeName.runAction( nodeAction );\n\n// offsets the node's current position whilst jumping to the end location\nvar nodeAction = new cc.JumpBy( 2, cc.p( 50, 100 ), 50, 4 );\nnodeName.runAction( nodeAction );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>JumpTo Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/BestBoilingCygnet-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/BestBoilingCygnet.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/BestBoilingCygnet.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/BestBoilingCygnet.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>\n\n<br />\n\n<center><strong>JumpBy Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/EnormousPastCheetah-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/EnormousPastCheetah.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/EnormousPastCheetah.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/EnormousPastCheetah.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**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 );* [block:code] { "codes": [ { "code": "ccBezierConfig bezierOptions;\nbezierOptions.controlPoint_1 = Vec2( 0, 400 );\nbezierOptions.controlPoint_2 = Vec2( 300, 50 );\nbezierOptions.endPosition = Vec2( 100, 100 );\n\n// moves the node to an absolute position on the screen whilst curving around 2 points\nBezierTo *nodeAction = BezierTo::create( 2, bezierOptions );\nnodeName->runAction( nodeAction );\n\n// offsets the node's current position whilst curving around 2 points\nBezierBy *nodeAction = BezierBy::create( 2, bezierOptions );\nnodeName->runAction( nodeAction );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "var bezierOptions = [cc.p( 0, 400 ), cc.p( 300, 50 ), cc.p( 100, 100 )];\n\n// moves the node to an absolute position on the screen whilst curving around 2 points\nvar nodeAction = new cc.BezierTo( 2, bezierOptions );\nnodeName.runAction( nodeAction );\n\n// offsets the node's current position whilst curving around 2 points\nvar nodeAction = new cc.BezierBy( 2, bezierOptions );\nnodeName.runAction( nodeAction );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>BezierTo Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/ObviousAccomplishedEmeraldtreeskink-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/ObviousAccomplishedEmeraldtreeskink.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/ObviousAccomplishedEmeraldtreeskink.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/ObviousAccomplishedEmeraldtreeskink.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>\n\n<br />\n\n<center><strong>BezierBy Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/CleverIllinformedAmericanpainthorse-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/CleverIllinformedAmericanpainthorse.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/CleverIllinformedAmericanpainthorse.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/CleverIllinformedAmericanpainthorse.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Place Action** - the place action allows a node to be absolutely placed anywhere in the scene without any animation *Example format:* *Place( endPosition );* [block:code] { "codes": [ { "code": "// places the node anywhere in the scene instantly\nPlace *nodeAction = Place::create( Vec2( 98, 280 ) );\nnodeName->runAction( nodeAction );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// places the node anywhere in the scene instantly\nvar nodeAction = new cc.Place( cc.p( 200, 150 ) );\nnodeName.runAction( nodeAction );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**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 );* [block:code] { "codes": [ { "code": "// scales the node to the specified scale factor based on it's original size which has a scale factor of 1\nScaleTo *nodeAction = ScaleTo::create( 2, 3, 6 );\nnodeName->runAction( nodeAction );\n\n// scales the node relative to it's current size/scale\nScaleBy *nodeAction = ScaleBy::create( 2, 3, 6 );\nnodeName->runAction( nodeAction );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// scales the node to the specified scale factor based on it's original size which has a scale factor of 1\nvar nodeAction = new cc.ScaleTo( 2, 3, 6 );\nnodeName.runAction( nodeAction );\n\n// scales the node relative to it's current size/scale\nvar nodeAction = new cc.ScaleBy( 2, 3, 6 );\nnodeName.runAction( nodeAction );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>ScaleTo(scaled to 0.25 before action) Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/WindingJubilantHuemul-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/WindingJubilantHuemul.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/WindingJubilantHuemul.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/WindingJubilantHuemul.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>\n\n<br />\n\n<center><strong>ScaleBy(scaled to 0.25 before action) Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/NearBlindAmericanbadger-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/NearBlindAmericanbadger.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/NearBlindAmericanbadger.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/NearBlindAmericanbadger.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**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* [block:code] { "codes": [ { "code": "// rotates the node to the specified rotation angle based on it's original rotation which is 0\nRotateTo *nodeAction = RotateTo::create( 2, 45 );\nnodeName->runAction( nodeAction );\n\n// rotates the node relative to it's current rotation\nRotateBy *nodeAction = RotateBy::create( 2, 45 );\nnodeName->runAction( nodeAction );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// rotates the node to the specified rotation angle based on it's original rotation which is 0\nvar nodeAction = new cc.RotateTo( 2, 45 );\nnodeName.runAction( nodeAction );\n\n// rotates the node relative to it's current rotation\nvar nodeAction = new cc.RotateBy( 2, 45 );\nnodeName.runAction( nodeAction );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>RotateTo(rotated to 90 degrees before action) Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/SafeFairHerald-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/SafeFairHerald.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/SafeFairHerald.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/SafeFairHerald.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>\n\n<br />\n\n<center><strong>RotateBy(rotated to 90 degrees before action) Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/AcceptableSlowDrongo-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/AcceptableSlowDrongo.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/AcceptableSlowDrongo.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/AcceptableSlowDrongo.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Tinting Actions** - the tinting actions allow a nodes RGB values to be modified *Example format:* *Tint( actionDuration, redOffsetValue, greenOffsetValue, blueOffsetValue );* [block:code] { "codes": [ { "code": "// modifies the node's RGB values by changing them to certain value\nTintTo *nodeAction = TintTo::create( 2, 45, 45, 100 );\nnodeName->runAction( nodeAction );\n\n// modifies the node's RGB values by offsetting the node's current RGB values\nTintBy *nodeAction = TintBy::create( 2, 45, 45, 100 );\nnodeName->runAction( nodeAction );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// modifies the node's RGB values by changing them to certain value\nvar nodeAction = new cc.TintTo( 2, 45, 45, 100 );\nnodeName.runAction( nodeAction );\n\n// modifies the node's RGB values by offsetting the node's current RGB values\nvar nodeAction = new cc.TintBy( 2, 45, 45, 100 );\nnodeName.runAction( nodeAction );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>TintTo(RGB set to (100, 100, 20) before action) Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/DemandingDelayedKudu-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/DemandingDelayedKudu.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/DemandingDelayedKudu.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/DemandingDelayedKudu.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>\n\n<br />\n\n<center><strong>TintBy(RGB set to (100, 100, 20) before action) Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/FondRepulsiveDrake-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/FondRepulsiveDrake.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/FondRepulsiveDrake.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/FondRepulsiveDrake.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**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* [block:code] { "codes": [ { "code": "// changes the node's opacity to a specified value\nFadeTo *nodeAction = FadeTo::create( 2, 100 );\nnodeName->runAction( nodeAction );\n\n// fades the node in (essentially fades the node's opacity to 255 from it's current opacity value)\nFadeIn *nodeAction = FadeIn::create( 2 );\nnodeName->runAction( nodeAction );\n\n// fades the node out (essentially fades the node's opacity to 0 from it's current opacity value)\nFadeOut *nodeAction = FadeOut::create( 2 );\nnodeName->runAction( nodeAction );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// changes the node's opacity to a specified value\nvar nodeAction = new cc.FadeTo( 2, 100 );\nnodeName.runAction( nodeAction );\n\n// fades the node in (essentially fades the node's opacity to 255 from it's current opacity value)\nvar nodeAction = new cc.FadeIn( 2 );\nnodeName.runAction( nodeAction );\n\n// fades the node out (essentially fades the node's opacity to 0 from it's current opacity value)\nvar nodeAction = new cc.FadeOut( 2 );\nnodeName.runAction( nodeAction );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>FadeTo(opacity set to 175 before action) Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/LikableOffensiveDwarfrabbit-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/LikableOffensiveDwarfrabbit.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/LikableOffensiveDwarfrabbit.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/LikableOffensiveDwarfrabbit.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>\n\n<br />\n\n<center><strong>FadeIn(opacity set to 175 before action) Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/VibrantEvergreenInvisiblerail-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/VibrantEvergreenInvisiblerail.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/VibrantEvergreenInvisiblerail.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/VibrantEvergreenInvisiblerail.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>\n\n<br />\n\n<center><strong>FadeOut(opacity set to 175 before action) Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/LittleRealInsect-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/LittleRealInsect.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/LittleRealInsect.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/LittleRealInsect.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**Skewing Actions** - the skewing actions allow a node to be distorted in the x and y axis *Example format:* *Skew( actionDuration, xSkewFactor, ySkewFactor );* [block:code] { "codes": [ { "code": "// distorts the node to an absolute value\nSkewTo *nodeAction = SkewTo::create( 2, 20, 20 );\nnodeName->runAction( nodeAction );\n\n// distorts the node relative to it's current distortion/skew\nSkewBy *nodeAction = SkewBy::create( 2, 20, 20 );\nnodeName->runAction( nodeAction );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// distorts the node to an absolute value\nvar nodeAction = new cc.SkewTo( 2, 20, 20 );\nnodeName.runAction( nodeAction );\n\n// distorts the node relative to it's current distortion/skew\nvar nodeAction = new cc.SkewBy( 2, 20, 20 );\nnodeName.runAction( nodeAction );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] [block:html] { "html": "<center><strong>SkewTo(skew set to (20, 40) before action) Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/FavoriteWealthyHoopoe-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/FavoriteWealthyHoopoe.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/FavoriteWealthyHoopoe.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/FavoriteWealthyHoopoe.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>\n\n<br />\n\n<center><strong>SkewBy(skew set to (20, 40) before action) Preview</strong></center>\n<center>\n\t<video controls=\"\" preload=\"none\" name=\"media\" width=\"300\" poster=\"http://thumbs.gfycat.com/DisfiguredWavyKob-thumb100.jpg\">\n\t<source src=\"http://zippy.gfycat.com/DisfiguredWavyKob.webm\" type=\"video/webm\" />\n\t<source src=\"http://zippy.gfycat.com/DisfiguredWavyKob.ogv\" type=\"video/ogg\" />\n\t<source src=\"http://zippy.gfycat.com/DisfiguredWavyKob.mp4\" type=\"video/mp4\" />\n\t<p>Your web browser doesn't support this video preview, please download a new browser such as <a href=\"http://www.google.co.uk/intl/en_uk/chrome/browser/\">Google Chrome</a>.</p>\n\t</video>\n</center>" } [/block] ##**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 );* [block:code] { "codes": [ { "code": "// delay of 5 seconds\nDelayTime *delayAction = DelayTime::create( 5.0 );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// delay of 2.5 seconds\nvar delayAction = new cc.DelayTime( 2.5 );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**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... );* [block:code] { "codes": [ { "code": "// runs several actions one after another\nSequence *sequenceAction = Sequence::create( nodeAction1, nodeAction2, nodeAction3, NULL );\nnodeName->runAction( sequenceAction );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// runs several actions one after another\nvar sequenceAction = new cc.Sequence( nodeAction1, nodeAction2, nodeAction3 );\nnodeName.runAction( sequenceAction );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**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... );* [block:code] { "codes": [ { "code": "// runs several actions one after another in reverse\nSequence *sequenceAction = Sequence::create( nodeAction1, nodeAction2, nodeAction3, NULL );\nnodeName->runAction( sequenceAction->reverse( ) );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// runs several actions one after another in reverse\nvar sequenceAction = new cc.Sequence( nodeAction1, nodeAction2, nodeAction3 );\nnodeName.runAction( sequenceAction.reverse( ) );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**Repeating Actions** - if you want to repeat actions it is easy by using the built-in repeat methods. *Example format:* *Repeat( actionToRepeat, numberOfTimesToRepeatAction );* [block:code] { "codes": [ { "code": "// repeats an action a set number of times\nRepeat *repeatAction = Repeat::create( actionToRepeat );\nnodeName->runAction( repeatAction );\n\n// repeats an action forever\nRepeatForever *repeatForeverAction = RepeatForever::create( actionToRepeat );\nnodeName->runAction( repeatForeverAction );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// repeats an action a set number of times\nvar repeatAction = new cc.Repeat( actionToRepeat, 5 );\nnodeName.runAction( repeatAction );\n\n// repeats an action forever\nvar repeatForeverAction = new cc.RepeatForever( actionToRepeat );\nnodeName.runAction( repeatForeverAction );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] 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... );* [block:code] { "codes": [ { "code": "// runs several actions at the same time\nSpawn *spawnAction = Spawn::create( nodeAction1, nodeAction2, nodeAction3, NULL );\nnodeName->runAction( spawnAction );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// runs several actions at the same time\nvar spawnAction = new cc.Spawn( nodeAction1, nodeAction2, nodeAction3 );\nnodeName.runAction( spawnAction );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block] ##**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 );* [block:code] { "codes": [ { "code": "// calls a functions when the action is run (can be inline or a external function)\nCallFunc *functionAction = CallFunc::create( functionToCall );\nnodeName->runAction( functionAction );", "language": "cplusplus", "name": "Cocos2d-x C++" }, { "code": "// calls a functions when the action is run (can be inline or a external function)\nvar functionAction = new cc.CallFunc( functionToCall );\nnodeName.runAction( functionAction );", "language": "javascript", "name": "Cocos2d-JS" } ] } [/block]