Sprite Animation w/ Cocos2dx
For preparing the necessary technology with animation in cocos2dx, I made a really simple repo that includes a straightforward animation demo with cocos2dx.
Here is the development env:
Visual Studio 2017 Community
cocos2d-x-3.17.2
For the sprite sheet and the assets, I used TexturePacker v5.0.9 Free version and bought assets from HumbleBundle. Based on those tools and resources, I made a simple sprite sheet[1] that includes an IDLE animation for a fighter.
Figure 1, the result of the sprite sheet
After that, I placed the sprite sheet to the resource folder inside the cocos2dx project folder.
Okay, all the assets and foundation are ready. Let’s code!
1.Load the plist (It comes with the sprite sheet when you publish a sprite sheet via TexturePacker)
// Load spritesheet info from plist SpriteFrameCache::getInstance()->addSpriteFramesWithFile("fighter.plist");
2.Create a extractor function to get all sprite frames for one animation
Vector idleFrames = this->GetAnimation( "idle_%d.png", 14 ); // ... // Get all sprite frames from the spritesheet based on a string format. // Need to pass the string format and how many frames that this animation has. // It returns a vector of SpriteFrame*. Vector HelloWorld::GetAnimation(const char* pchFormat, int iCount) { auto spriteCache = SpriteFrameCache::getInstance(); Vector animFrames; char str[100]; for (int i = 1; i <= iCount; i++) { // format string from parameters sprintf(str, pchFormat, i); printf(str); // add sprite to animFrames animFrames.pushBack(spriteCache->getSpriteFrameByName(str)); } return animFrames; }
3.Use the first item inside the vector and place it to the centre of the scene
// Set the default sprite frame to the first sprite frame in the vector Sprite* fighterIdleSprite = Sprite::createWithSpriteFrame( idleFrames.front() ); // Align sprite to center fighterIdleSprite->setPosition( origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2 ); // Add node to scene this->addChild( fighterIdleSprite );
4.Create animation object and apply update frequency
// Create animation by vector of sprite frames and the update fequency Animation* idleAnim = Animation::createWithSpriteFrames( idleFrames, 1.0f / 14 );
5.Apply it to the sprite by running runAction
// Apply animation to sprite by using runAction fighterIdleSprite->runAction( RepeatForever::create( Animate::create( idleAnim ) ) );
Result
Here is the repo link: Github Repo
The most important cpp file will be: HelloWorldScene.cpp Start from Line 105
