Creating animations_Cocos2d-x Cookbook-QQ阅读女生古言网

上QQ阅读APP看书，第一时间看更新

Creating animations

When the characters in a game start to move, the game will come alive. There are many ways to make animated characters. In this recipe, we will animate a character by using multiple images.

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.

Tip

Please check the recipe Creating sprites, which is the first recipe in this chapter, on how to add images to 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.

Tip

StringUtils is a very useful class. The StringUtils::toString method can generate the std::string value from a variety of values.

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());

StringUtils::format method can generate the std::string value using the printf format.

You can view the log by using CCLOG macro. CCLOG is very useful. You can check the value of the variable in the log during the execution of your game. CCLOG has the same parameters as a sprintf function.

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);