cocos2d-x 4.0 Learning Path (9) Creating Sprites Using Sprite Sheet

Next to the previous article , use the frame buffer to create sprites.

Especially for frame animation, this method is even more necessary to create sprites. For example, the following skeleton animation:

The working steps of the frame cache are: first make all the sprites into a file, this file is called Sprite Sheets, which is a .plist file, and then load this file into SpriteFrameCache. When called, read the sprite you want to display directly from the Cache.

Why use Sprite Sheets? the reason:

1. Save time. If you load files one by one, isn't the computer exhausted.

2. If loaded separately, the location of each picture in the memory is separate, which is not convenient for the program to quickly quote

3. In the form of texture, the program consumes more if the pictures are converted

4. The wizard cannot be optimized. For example, sprites optimized for polygons can save memory.

Well, with Sprite Sheets you can make the program run fast, and it is very convenient to use. Let's start ~

Our goal is to do a skeletal animation, all resources are here .

The first step is to make Sprite Sheets

Of course we need tools, so the recommended tool on the official website is texturePacker, download it . After the installation is complete, the startup interface is as follows:

Then, drag the cityscene folder in. Note the need for several settings on the right.

Click the zoom variant, select cocos2d-x HDR / HD / SD in it, and click Apply to close the settings window.

Click on the release wizard table, select a place to save.

If this error occurs, it is because you did not add a placeholder {v}

Write this in the data file: ... / res / {v} /cityscene.plist. Republish the sprite sheet again and it succeeded.

You will find that under res, 3 folders are generated, and there will be citiescene.plist. This is for 3 different resolutions.

Screen height h <512, use SD; 513 <h <1024, use HD; h> 1024, use HDR.

Open a plist and take a look, it is actually xml format content.

Step 2: Import plist to SpriteFrameCache

SpriteFrameCache::getInstance()->addSpriteFramesWithFile("cityscene.plist");

After that, we first load the background image:

// HelloWorldScene.cpp
bool HelloWorld::init()
{
    if (!Scene::init()){ return false; }

    auto visibleSize = Director::getInstance()->getVisibleSize();
    auto origin = Director::getInstance()->getVisibleOrigin();
    
    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("cityscene.plist");
    // background
    auto background = Sprite::createWithSpriteFrameName("background.png");
    background->setPosition(origin.x + visibleSize.width / 2, origin.y + visibleSize.height / 2);
    this->addChild(background);
    return true;
}

// AppDelegate.cpp
    static cocos2d::Size designResolutionSize = cocos2d::Size(1024, 768);    // <-- Modify
    

    auto frameSize = glview->getFrameSize();
    std::vector<std::string> searchPaths;        // <-- Add
    // if the frame's height is larger than the height of medium size.
    if (frameSize.height > mediumResolutionSize.height)
    {        
        searchPaths.push_back("res/HDR");        // <-- Add
        director->setContentScaleFactor(MIN(largeResolutionSize.height/designResolutionSize.height, largeResolutionSize.width/designResolutionSize.width));
    }
    // if the frame's height is larger than the height of small size.
    else if (frameSize.height > smallResolutionSize.height)
    {        
        searchPaths.push_back("res/HD");        // <-- Add
        director->setContentScaleFactor(MIN(mediumResolutionSize.height/designResolutionSize.height, mediumResolutionSize.width/designResolutionSize.width));
    }
    // if the frame's height is smaller than the height of medium size.
    else
    {        
        searchPaths.push_back("res/SD");        // <-- Add
        director->setContentScaleFactor(MIN(smallResolutionSize.height/designResolutionSize.height, smallResolutionSize.width/designResolutionSize.width));
    }
    FileUtils::getInstance()->setSearchPaths(searchPaths);    // <-- Add
    register_all_packages();

Step 3: Load the sprite: This is an animation of walking in place.

// HelloWorldScene.h Add
private:
    cocos2d::Vector<cocos2d::SpriteFrame*> getAnimation(const char* format, int count);

// HelloWorldScene.cpp
// After this->addChild(background), Add the following code
    auto frames = getAnimation("capguy/walk/%04d.png", 8);
    auto sprite = Sprite::createWithSpriteFrame(frames.front());
    background->addChild(sprite);
    sprite->setPosition(100, 300);

    auto animation = Animation::createWithSpriteFrames(frames, 1.0f / 8);
    sprite->runAction(RepeatForever::create(Animate::create(animation)));

// Create New Function
Vector<SpriteFrame*> HelloWorld::getAnimation(const char* format, int count)
{
    auto spritecache = SpriteFrameCache::getInstance();
    Vector<SpriteFrame*> animFrames;
    char str[100];
    for (int i = 1; i <= count; i++)
    {
        sprintf(str, format, i);
        animFrames.pushBack(spritecache->getSpriteFrameByName(str));
    }
    return animFrames;
}

We can add the effect of movement:

// HelloWorldScene.cpp
// After sprite->runAction(RepeatForever::create(Animate::create(animation))), Add following code
    auto movement = MoveTo::create(5, Vec2(1024, 300));
    auto resetPosition = MoveTo::create(0, Vec2(-75, 300));
    auto sequence = Sequence::create(movement, resetPosition, NULL);
    sprite->runAction(RepeatForever::create(sequence));

the above.