Cocos2d-x 4.0 Learning Path (9) Création de sprites à l'aide d'une feuille de sprites

À côté de l' article précédent , utilisez le tampon d'image pour créer des sprites.

Surtout pour l'animation d'images, cette méthode est encore plus nécessaire pour créer des sprites. Par exemple, l'animation squelette suivante:

Les étapes de travail du cache de trame sont les suivantes: tout d'abord créer tous les sprites dans un fichier, ce fichier est appelé Sprite Sheets, est un fichier .plist, puis chargez ce fichier dans SpriteFrameCache Une fois appelé, lisez l'image-objet que vous souhaitez afficher directement depuis le cache.

Pourquoi utiliser des feuilles Sprite? Raison:

1. Gagnez du temps. Si vous chargez les fichiers un par un, l'ordinateur n'est-il pas épuisé?

2. Si chargé séparément, l'emplacement de chaque image dans la mémoire est séparé, ce qui n'est pas pratique pour le programme de citer rapidement

3. Sous forme de texture, le programme consomme plus si les images sont converties

4. L'assistant ne peut pas être optimisé. Par exemple, les sprites optimisés pour les polygones peuvent économiser de la mémoire.

Eh bien, avec Sprite Sheets, vous pouvez exécuter le programme rapidement et il est très pratique à utiliser. Commençons ~

Notre objectif est de faire une animation squelettique, toutes les ressources sont ici .

La première étape consiste à créer des feuilles Sprite

Bien sûr, nous avons besoin d'outils, donc l'outil recommandé sur le site officiel est texturePacker, téléchargez-le . Une fois l'installation terminée, l'interface de démarrage est la suivante:

Faites ensuite glisser le dossier cityscene vers. Notez la nécessité de plusieurs paramètres sur la droite.

Cliquez sur la variante de zoom, sélectionnez cocos2d-x HDR / HD / SD et cliquez sur Appliquer pour fermer la fenêtre des paramètres.

Cliquez sur le tableau de l'assistant de publication, sélectionnez un emplacement à enregistrer.

Si cette erreur se produit, c'est parce que vous n'avez pas ajouté d'espace réservé {v}

Écrivez ceci dans le fichier de données: ... / res / {v} /cityscene.plist. Republiez à nouveau la feuille de sprite et cela a réussi.

Vous constaterez que sous res, 3 dossiers sont générés et il y aura citiescene.plist. C'est pour 3 résolutions différentes.

Hauteur d'écran h <512, utilisez SD; 513 <h <1024, utilisez HD; h> 1024, utilisez HDR.

Ouvrez une liste et jetez un œil, il s'agit en fait d'un contenu au format xml.

Étape 2: importez plist dans SpriteFrameCache

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

Après cela, nous chargeons d'abord l'image d'arrière-plan:

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

Étape 3: charger le sprite: il s'agit d'une animation de marche sur 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;
}

On peut ajouter l'effet de mouvement:

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

Ci-dessus.