DevBlog

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

Hi there, this is the first post for this dev blog.

I am Stanley, a programmer and game lover.

First of all, why? Why I am making this blog? I am attending a course which is titled MSc Video Game Development. Within this course, I will create 1 game on the mobile platform or PC platform and 1 game on PS4. Therefore, this blog is going to log all the things like "WHAT" and "HOW".