cocos2d-x 4.0 Ruta de aprendizaje (9) Creación de sprites usando Sprite Sheet

Al lado del artículo anterior , use el búfer de marco para crear sprites.

Especialmente para la animación de cuadros, este método es aún más necesario para crear sprites. Por ejemplo, la siguiente animación esqueleto:

Los pasos de trabajo de la memoria caché de cuadros son: primero hacer todos los sprites en un archivo, este archivo se llama Sprite Sheets, es un archivo .plist y luego cargar este archivo en SpriteFrameCache Cuando se le llame, lea el sprite que desea mostrar directamente desde la caché.

¿Por qué usar hojas de Sprite? Razón:

1. Ahorra tiempo. Si carga archivos uno por uno, la computadora no está agotada.

2. Si se carga por separado, la ubicación de cada imagen en la memoria es separada, lo que no es conveniente para que el programa cite rápidamente

3. En forma de textura, el programa consume más si las imágenes se convierten

4. El asistente no se puede optimizar. Por ejemplo, los sprites optimizados para polígonos pueden ahorrar memoria.

Bueno, con Sprite Sheets puedes hacer que el programa se ejecute rápido, y es muy conveniente de usar. Comencemos ~

Nuestro objetivo es hacer una animación esquelética, todos los recursos están aquí .

El primer paso es hacer hojas de Sprite

Por supuesto, necesitamos herramientas, por lo que la herramienta recomendada en el sitio web oficial es texturePacker, descárguela . Una vez completada la instalación, la interfaz de inicio es la siguiente:

Luego, arrastre la carpeta cityscene hacia adentro. Tenga en cuenta la necesidad de varias configuraciones a la derecha.

Haga clic en la variante de zoom, seleccione cocos2d-x HDR / HD / SD y haga clic en Aplicar para cerrar la ventana de configuración.

Haga clic en la tabla del asistente de lanzamiento, seleccione un lugar para guardar.

Si se produce este error, es porque no agregó un marcador de posición {v}

Escriba esto en el archivo de datos: ... / res / {v} /cityscene.plist. Vuelva a publicar la hoja de sprites y tuvo éxito.

Encontrará que en res, se generan 3 carpetas y habrá citiescene.plist. Esto es para 3 resoluciones diferentes.

Altura de pantalla h <512, use SD; 513 <h <1024, use HD; h> 1024, use HDR.

Abra una lista y eche un vistazo, en realidad es contenido en formato xml.

Paso 2: importar plist a SpriteFrameCache

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

Después de eso, primero cargamos la imagen de fondo:

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

Paso 3: Carga el sprite: esta es una animación de caminar en el 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 agregar el efecto del movimiento:

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

Arriba