Guia de aprendizado do cocos2d-x 4.0 (9) Criando sprites usando a planilha Sprite

Próximo ao artigo anterior , use o buffer de quadro para criar sprites.

Especialmente para animação de quadros, esse método é ainda mais necessário para criar sprites. Por exemplo, a seguinte animação de esqueleto:

As etapas de trabalho do cache de quadros são: primeiro, crie todos os sprites em um arquivo, esse arquivo é chamado Sprite Sheets, que é um arquivo .plist, e carregue esse arquivo no SpriteFrameCache. Quando chamado, leia o sprite que você deseja exibir diretamente do cache.

Por que usar folhas de Sprite? Razão:

1. Economize tempo. Se você carregar arquivos um por um, o computador não está esgotado?

2. Se carregado separadamente, o local de cada imagem na memória é separado, o que não é conveniente para o programa citar rapidamente

3. Na forma de textura, o programa consome mais se as imagens forem convertidas

4. O assistente não pode ser otimizado. Por exemplo, sprites otimizados para polígonos podem economizar memória.

Bem, com o Sprite Sheets, você pode executar o programa rapidamente, e é muito conveniente de usar. Vamos começar ~

Nosso objetivo é fazer uma animação esquelética, todos os recursos estão aqui .

O primeiro passo é fazer o Sprite Sheets

É claro que precisamos de ferramentas, portanto a ferramenta recomendada no site oficial é texturePacker, faça o download . Após a conclusão da instalação, a interface de inicialização é a seguinte:

Em seguida, arraste a pasta cityscene para dentro. Observe a necessidade de várias configurações à direita.

Clique na variante de zoom, selecione cocos2d-x HDR / HD / SD nela e clique em Aplicar para fechar a janela de configurações.

Clique na tabela do assistente de liberação, selecione um local para salvar.

Se esse erro ocorrer, é porque você não adicionou um espaço reservado {v}

Escreva isso no arquivo de dados: ... / res / {v} /cityscene.plist. Republicar a folha de sprite novamente e foi bem-sucedida.

Você descobrirá que em res, são geradas 3 pastas e haverá citiescene.plist. Isto é para 3 resoluções diferentes.

Altura da tela h <512, use SD; 513 <h <1024, use HD; h> 1024, use HDR.

Abra uma lista e dê uma olhada, na verdade, é conteúdo em formato xml.

Etapa 2: Importar plist para SpriteFrameCache

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

Depois disso, primeiro carregamos a imagem de plano de fundo:

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

Etapa 3: Carregar o sprite: é uma animação de caminhar no lugar.

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

Podemos adicionar o efeito do movimento:

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

Acima.