ThorVG and SFML 2.6 Lotti Animation Example

[natalia-hultrix]

This code snippet illustrates how to use ThorVG in conjunction with SFML 2.6 for rendering Lottie animations.

https://github.com/SFML/SFML

Lottie File:
lottie.json

// g++ -o sfml-app main3.cpp -lsfml-graphics -lsfml-window -lsfml-system -lthorvg


#include <SFML/Graphics.hpp>
#include <thorvg.h>
#include <memory>
#include <iostream>
#include <cmath>
#include <cstring>

int main()
{
    // Create a window with the size 800x600 pixels and title "SFML Example with ThorVG"
    sf::RenderWindow window(sf::VideoMode(800, 600), "Hydra v0.0.1");
    tvg::Initializer::init(1);

    window.setVerticalSyncEnabled(true);

    // A canvas target buffer
    static uint32_t buffer[800 * 600];

    // Generate a canvas
    auto canvas = tvg::SwCanvas::gen();
    canvas->target(buffer, 800, 800, 600, tvg::SwCanvas::ARGB8888S);

    // Generate an animation
    auto animation = tvg::Animation::gen();
    // Acquire a picture associated with the animation
    auto picture = animation->picture();
    // Load an animation file
    if (picture->load("lottie.json") != tvg::Result::Success) {
        std::cerr << "Could not load the Lottie animation file." << std::endl;
        return -1;
    }

   float zoomScale = 0.5;  // 50% size
    picture->scale(zoomScale);

    // Push the picture into the canvas
    canvas->push(std::unique_ptr<tvg::Paint>(picture));

    // Determine animation duration
    auto duration = animation->duration();
    std::cout << "Animation duration: " << duration << " seconds" << std::endl;

    // Create an SFML image to hold the buffer
    sf::Image image;
    image.create(800, 600);

    // Create a texture
    sf::Texture texture;
    texture.create(800, 600);

    // Create a sprite
    sf::Sprite sprite;

    // Main loop
    sf::Clock clock;  // Start a clock to track elapsed time
    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed)
                window.close();
        }

    // catch the resize events
    if (event.type == sf::Event::Resized)
    {
        // update the view to the new size of the window
        sf::FloatRect visibleArea(0, 0, event.size.width, event.size.height);
        window.setView(sf::View(visibleArea));
    }
        // Set a current animation frame to display
        auto progress = clock.getElapsedTime().asSeconds() / duration;
        if (progress >= 1.0f) {
            progress = fmod(progress, 1.0f);
            clock.restart();
        }
        animation->frame(animation->totalFrame() * progress);
        // Update the picture to be redrawn
        canvas->update(picture);

        canvas->draw();
        canvas->sync();

        // Set the pixels directly in the image
        for (int y = 0; y < 600; ++y) {
            for (int x = 0; x < 800; ++x) {
                int index = y * 800 + x;
                uint32_t argb = buffer[index];
                uint8_t a = (argb >> 24) & 0xFF;
                uint8_t r = (argb >> 16) & 0xFF;
                uint8_t g = (argb >> 8) & 0xFF;
                uint8_t b = argb & 0xFF;
                image.setPixel(x, y, sf::Color(r, g, b, a));
            }
        }

        // Update the texture with the image
        texture.update(image);

        // Update the sprite with the texture
        sprite.setTexture(texture);

        window.clear(sf::Color(23, 23, 23));  // Clear the window with white color
        window.draw(sprite);             // Draw the sprite
        window.display();                // Update the window
        memset(buffer, 0, sizeof(buffer));
    }

    tvg::Initializer::term(tvg::CanvasEngine::Sw);
    return 0;
}

}