Getting ready

You can create an animation from a series of the following image files:

You need to add the running girl's animation image files to your project and clean your project.

How to do it...

You can create an animation using a series of images. The following code creates the running girl's animation.

auto animation = Animation::create();
for (int i=1; i<=8; i++) {  // from run_01.png to run_08.png
    std::string name = StringUtils::format("res/run_%02d.png", i);
    animation->addSpriteFrameWithFile(name.c_str());
}
animation->setDelayPerUnit(0.1f);
animation->setRestoreOriginalFrame(true);
animation->setLoops(10);
auto action = Animate::create(animation);
sprite->runAction(action);

How it works...

You can create an animation using the Animation class and the Animate class. They change multiple images at regular intervals. The names of the series image files have the serial number, we have added a file name to the Animation class in the for loop. We can create the formatted string using the StringUtils class in Cocos2d-x.

int i = 100;
std::string int_string = StringUtils::toString(i);
CCLOG("%s ", int_string.c_str());
float j = 123.4f;
std::string float_string = StringUtils::toString(j);
CCLOG("%s", float_string.c_str());

We will add the file name into the Animation instance using the addSpriteFrameWithFile method. It sets the units of time which the frame takes using setDelayPerunit method. It is set to restore the original frame when the animation finishes using the setRestoreOriginalFrame method. True value is to restore the original frame. It is set to the number of times the animation is going to loop. Then, create the Animate instance by passing it with the Animation instance that you created earlier. Finally, run the runAction method by passing in the Animate instance.

If you want to run the animation forever, set -1 using the setLoops method.

animation->setLoops(-1);

There's more...

In the preceding code, you cannot control each animation frame. In such cases, you can use the AnimationFrame class. This class can control each animation frame. You can set the units of time the frame takes using the second argument of the AnimationFrame::create method.

auto rect = Rect::ZERO;
rect.size = sprite->getContentSize();
Vector<AnimationFrame*> frames;
for (int i=1; i<=8; i++) {
    std::string name = StringUtils::format("res/run_%02d.png", i);
    auto frame = SpriteFrame::create(name.c_str(), rect);
    ValueMap info;
    auto animationFrame = AnimationFrame::create(frame, i, info);
    frames.pushBack(animationFrame);
}
auto animation = Animation::create(frames, 0.1f);
animation->setDelayPerUnit(0.1f);
animation->setRestoreOriginalFrame(true);
animation->setLoops(-1);
auto action = Animate::create(animation);
sprite->runAction(action);

See also