{"id":1006,"date":"2012-02-27T20:58:04","date_gmt":"2012-02-27T19:58:04","guid":{"rendered":"http:\/\/www.frozax.com\/blog\/?p=1006"},"modified":"2012-02-27T20:58:04","modified_gmt":"2012-02-27T19:58:04","slug":"how-to-create-shake-action-cocos2d-x-source-code","status":"publish","type":"post","link":"https:\/\/www.frozax.com\/blog\/2012\/02\/how-to-create-shake-action-cocos2d-x-source-code\/","title":{"rendered":"How to create a shake action in Cocos2d-x (with source code)"},"content":{"rendered":"

While working on my next game Don’t Feed the Trolls<\/a>, I was looking for a “shake effect”. When the player feeds a troll, I want the whole screen to shake to improve visual feedback.
\nA shake effect is very easy to implement, so I quickly hacked in my code to see if it was un interesting feature. After a quick test on the Android version of the game, I could see it really does improve the game. So I wrote a proper cocos2d-x<\/a> action to integrate the effect in a clean way. I’m releasing the code here hoping other developers will find it useful for their own games.<\/p>\n

The effect<\/h3>\n

The shake is a small random movement. It can be applied to any cocos2d node (CCNode<\/a>). In Don’t Feed the Trolls<\/em>, I applied the effect to my top-most node, therefore the whole screen is shaking.<\/p>\n

The action<\/h3>\n

I derived my CCShake<\/strong> class from CCActionInterval<\/strong>. The action is initialized with two parameters:
\n– time<\/strong> : the duration of the effect.
\n– strength<\/strong> : the distance of the shake movement. You can have different strengths in X and Y if you wish.
\nYou create the action with CCShake::actionWithDuration<\/strong> and send it as a parameter of CCNode::runAction<\/strong>.<\/p>\n

\n\/\/ Shake node_to_shake for 5 seconds.\nnode_to_shake->runAction( CCShake::actionWithDuration( 5.0f, 10.0f ) );\n<\/code><\/pre>\n
When the action is completed, the node is moved back to its starting position.<\/p>\n
Source code<\/h3>\n
The code is free for personal and commercial<\/em> use. If you plan to use it, feel free to credit<\/em> me, send me an email<\/em> and\/or follow<\/em> me on twitter<\/a>\/facebook<\/a>. This is of course not compulsory.<\/p>\n
Header: CCShake.h<\/h4>\n
\n#ifndef __SHAKE_H__\n#define __SHAKE_H__\n\n#include \"CCActionInterval.h\"\nusing namespace cocos2d;\n\nclass CCShake : public CCActionInterval\n{\n\t\/\/ Code by Francois Guibert\n\t\/\/ Contact: www.frozax.com - http:\/\/twitter.com\/frozax - www.facebook.com\/frozax\npublic:\n\tCCShake();\n\n\t\/\/ Create the action with a time and a strength (same in x and y)\n\tstatic CCShake* actionWithDuration(ccTime d, float strength );\n\t\/\/ Create the action with a time and strengths (different in x and y)\n\tstatic CCShake* actionWithDuration(ccTime d, float strength_x, float strength_y );\n\tbool initWithDuration(ccTime d, float strength_x, float strength_y );\n\n\tvirtual void startWithTarget(CCNode *pTarget);\n\tvirtual void update(ccTime time);\n\tvirtual void stop(void);\n\nprotected:\n\t\/\/ Initial position of the shaked node\n\tfloat _initial_x, _initial_y;\n\t\/\/ Strength of the action\n\tfloat _strength_x, _strength_y;\n};\n\n#endif \/\/__SHAKE_H__\n<\/code><\/pre>\n
Source: CCShake.cpp<\/h4>\n
<\/p>\n
\n\/\/ Code by Francois Guibert\n\/\/ Contact: www.frozax.com - http:\/\/twitter.com\/frozax - www.facebook.com\/frozax\n#include \"cocos2d.h\"\n#include \"CCShake.h\"\n\n\/\/ not really useful, but I like clean default constructors\nCCShake::CCShake() : _strength_x(0), _strength_y(0), _initial_x(0), _initial_y(0)\n{\n}\n\nCCShake* CCShake::actionWithDuration( ccTime d, float strength )\n{\n\t\/\/ call other construction method with twice the same strength\n\treturn actionWithDuration( d, strength, strength );\n}\n\nCCShake* CCShake::actionWithDuration(ccTime duration, float strength_x, float strength_y)\n{\n\tCCShake *p_action = new CCShake();\n\tp_action->initWithDuration(duration, strength_x, strength_y);\n\tp_action->autorelease();\n\n\treturn p_action;\n}\n\nbool CCShake::initWithDuration(ccTime duration, float strength_x, float strength_y)\n{\n\tif (CCActionInterval::initWithDuration(duration))\n\t{\n\t\t_strength_x = strength_x;\n\t\t_strength_y = strength_y;\n\t\treturn true;\n\t}\n\n\treturn false;\n}\n\n\/\/ Helper function. I included it here so that you can compile the whole file\n\/\/ it returns a random value between min and max included\nfloat fgRangeRand( float min, float max )\n{\n\tfloat rnd = ((float)rand()\/(float)RAND_MAX);\n\treturn rnd*(max-min)+min;\n}\n\nvoid CCShake::update(ccTime time)\n{\n\tfloat randx = fgRangeRand( -_strength_x, _strength_x );\n\tfloat randy = fgRangeRand( -_strength_y, _strength_y );\n\n\t\/\/ move the target to a shaked position\n\tm_pTarget->setPosition( ccp( randx, randy) );\n}\n\nvoid CCShake::startWithTarget(CCNode *pTarget)\n{\n\tCCActionInterval::startWithTarget( pTarget );\n\n\t\/\/ save the initial position\n\t_initial_x = pTarget->getPosition().x;\n\t_initial_y = pTarget->getPosition().y;\n}\n\nvoid CCShake::stop(void)\n{\n\t\/\/ Action is done, reset clip position\n\tm_pTarget->setPosition( ccp( _initial_x, _initial_y ) );\n\n\tCCActionInterval::stop();\n}\n<\/code><\/pre>\n
Possible improvements<\/h3>\n
This is really a simple class, for a simple effect. You can improve the effect in many ways. For instance, we could animate the strength of the shake over time.<\/p>\n
That's it !<\/h3>\n
Have fun with it, feel free to discuss the source code in the comments, twitter<\/a> or facebook<\/a>.<\/p>\n
<\/a><\/a><\/a><\/a>\n