GUI Library with ANIMATIONS ?

[sggocu88]

Hi. Please tell me a GUI library which can be easy integrate in SFML.
I need gui animations, not only buttons and scrollbars etc. I need to animate things like buttons or sprites on click , or transition effects for sprites or visual effects or something like that.
I don't like Qt, it does not fit with my needs and i really don't understand that annoyng restrictions for lgpgl license...
I need free library.
I know about SFGUI, TGUI, wxWidgets, GTK+, I DON'T NEED THEM. I can paint buttons in paint and put them in game , i need only do animations or effects.

I know about integrating HTML in a c++ app... i know html and css .. but it's a good idea to integrate HTML with SFML ? if yes, how ?

HELP ME PLEASE.
P.S: Sorry for my bad english.

[JayhawkZombie]

In TGUI, you can create your own Renderer for whatever element it is that you want and animate it yourself. For buttons, see https://tgui.eu/documentation/v0.7/classtgui_1_1ButtonRenderer.html.

For instance, to animate a button, change the texture every so often, see https://tgui.eu/documentation/v0.7/classtgui_1_1Texture.html.
The classes have public methods you can use to change the texture, texture rect, etc.

How good or bad it would be to integrate, say, the Chrome V8 engine and use Javascript with your SFML game really depends on what you plan to do with it.  Most games I can think of use some sort of scripting engine (my team uses Chaiscript, for example), but I've not seen many that use the V8 engine.

[eXpl0it3r]

You could give Hapax's Plinth library a try. It provides functionalities for tweening and other animations.

Creating a HTML/CSS renderer is not trivial at all and I wouldn't recommend it. There are libraries that can do that, but even then, HTML/CSS aren't really the best tool for the task. Their generics simply allow for all sorts of hacky things.
If you need special animations, then I definitely recommend Spriter or Spine, which are dedicated 2D animation applications. Spine even provides a runtime library for SFML, but it's not free. Spriter on the other hand offers a free and a pro version.

And for simple frame animations, you can take a look at the AnimatedSprite or Thor's animation system.

[sggocu88]

Hi. Thanks for help, but i have one more question.
So i make a simulation tycoon game and gui is very important for this game, so i need my buttons or menus or sprites to do animations like this : https://daneden.github.io/animate.css/
So which library should i use to do same thing with sprites or buttons when are clicked  ?

[Hapax]

I appreciate the mention of Plinth, eXpl0it3r.

Here's a short example of how it might look to use Plinth to animate similar visuals to those of the example website (I've added a few comments ):

(click to show/hide)

#include <SFML/Graphics.hpp>
#include <Plinth/Sfml/Anchor.hpp>
#include <Plinth/Sfml/Animation.hpp>

int main()
{
        sf::Font font;
        if (!font.loadFromFile("resources/arial.ttf"))
                return EXIT_FAILURE;

        sf::Text infoText("1 Fade In\n2 Flash\n3 Rotate In\n4 Roll In\n5 Zoom Out Down\n6 Bounce", font, 16);

        sf::Text text("Animated", font, 100);
        text.setOrigin(pl::Anchor::Local::getCenter(text));

        const sf::Time duration{ sf::seconds(1) };
        struct Anim
        {
                pl::Animation::Text fadeIn;
                pl::Animation::Text flash;
                pl::Animation::Text rotateIn;
                pl::Animation::Text rollIn;
                pl::Animation::Text zoomOutDown;
                pl::Animation::Text bounce;
        } anim;

        // fade in
        anim.fadeIn.color.addKeyA(sf::Time::Zero, 0);
        anim.fadeIn.color.addKey(duration, sf::Color::White);

        // flash
        anim.flash.color.addKey(sf::Time::Zero, sf::Color::White);
        anim.flash.color.addKeyA(duration / 4.f, 0);
        anim.flash.color.addKeyA(duration / 2.f, 255);
        anim.flash.color.addKeyA(duration / 4.f * 3.f, 0);
        anim.flash.color.addKeyA(duration, 255);

        // rotate in
        anim.rotateIn.color.addKeyA(sf::Time::Zero, 0);
        anim.rotateIn.color.addKey(duration, sf::Color::White);
        anim.rotateIn.rotation.addKey(sf::Time::Zero, -180);
        anim.rotateIn.rotation.addKey(duration, 0, 1.f, 0.f);

        // roll in
        anim.rollIn.color.addKeyA(sf::Time::Zero, 0);
        anim.rollIn.color.addKey(duration, sf::Color::White);
        anim.rollIn.rotation.addKey(sf::Time::Zero, -180);
        anim.rollIn.rotation.addKey(duration, 0, 1.f, 0.f);
        anim.rollIn.position.addKey(sf::Time::Zero, { -400.f, 0.f });
        anim.rollIn.position.addKeyX(duration, 0.f, 1.f, 0.f);

        // zoom out down
        anim.zoomOutDown.color.addKey(duration / 2.f, sf::Color::White);
        anim.zoomOutDown.color.addKeyA(duration, 0);
        anim.zoomOutDown.scale.addKey(sf::Time::Zero, { 1.f, 1.f }, 0.f, 0.5f);
        anim.zoomOutDown.scale.addKey(duration / 2.f, { 0.5f, 0.5f }, 0.5f, 0.f);
        anim.zoomOutDown.position.addKey(sf::Time::Zero, { 0.f, 0.f }, 0.f, 0.5f);
        anim.zoomOutDown.position.addKeyY(duration / 2.f, -70.f, 0.5f, 1.f);
        anim.zoomOutDown.position.addKeyY(duration, 400.f);

        // bounce
        anim.bounce.position.addKey(sf::Time::Zero, { 0.f, 0.f }, 0.f, 0.5f);
        anim.bounce.position.addKeyY(duration * 0.2f, -100.f, 0.5f, 0.f);
        anim.bounce.position.addKeyY(duration * 0.35f, -100.f, 0.f, 1.f);
        anim.bounce.position.addKeyY(duration * 0.55f, 0.f);
        anim.bounce.position.addKeyY(duration * 0.75f, -40.f, 0.5f, 0.5f);
        anim.bounce.position.addKeyY(duration * 0.85f, 0.f);
        anim.bounce.position.addKeyY(duration * 0.925f, -15.f, 0.5f, 0.5f);
        anim.bounce.position.addKeyY(duration, 0.f);

        enum class AnimState
        {
                None,
                FadeIn,
                Flash,
                RotateIn,
                RollIn,
                ZoomOutDown,
                Bounce,
        } animState{ AnimState::None };

        sf::Clock clock;
        sf::Time startTime;

        sf::RenderWindow window(sf::VideoMode(800, 600), "Mini Animations");
        const sf::Vector2f windowCenter(window.getSize() / 2u);
        text.setPosition(windowCenter);
        while (window.isOpen())
        {
                sf::Event event;
                while (window.pollEvent(event))
                {
                        if (event.type == sf::Event::Closed)
                                window.close();
                        else if (event.type == sf::Event::KeyPressed)
                        {
                                // only allow starting an animation if none is currently active
                                if (animState == AnimState::None)
                                {
                                        startTime = clock.getElapsedTime();
                                        if (event.key.code == sf::Keyboard::Key::Num1)
                                                animState = AnimState::FadeIn;
                                        else if (event.key.code == sf::Keyboard::Key::Num2)
                                                animState = AnimState::Flash;
                                        else if (event.key.code == sf::Keyboard::Key::Num3)
                                                animState = AnimState::RotateIn;
                                        else if (event.key.code == sf::Keyboard::Key::Num4)
                                                animState = AnimState::RollIn;
                                        else if (event.key.code == sf::Keyboard::Key::Num5)
                                                animState = AnimState::ZoomOutDown;
                                        else if (event.key.code == sf::Keyboard::Key::Num6)
                                                animState = AnimState::Bounce;
                                }
                        }
                }

                if (animState != AnimState::None)
                {
                        const sf::Time animTime{ clock.getElapsedTime() - startTime };

                        // use only the animation track for the current animation and manipulate only the tracks required
                        switch (animState)
                        {
                        case AnimState::FadeIn:
                                text.setFillColor(anim.fadeIn.color.get(animTime));
                                break;
                        case AnimState::Flash:
                                text.setFillColor(anim.flash.color.get(animTime));
                                break;
                        case AnimState::RotateIn:
                                text.setFillColor(anim.rotateIn.color.get(animTime));
                                text.setRotation(anim.rotateIn.rotation.get(animTime));
                                break;
                        case AnimState::RollIn:
                                text.setFillColor(anim.rollIn.color.get(animTime));
                                text.setRotation(anim.rollIn.rotation.get(animTime));
                                text.setPosition(windowCenter + anim.rollIn.position.get(animTime));
                                break;
                        case AnimState::ZoomOutDown:
                                text.setFillColor(anim.zoomOutDown.color.get(animTime));
                                text.setScale(anim.zoomOutDown.scale.get(animTime));
                                text.setPosition(windowCenter + anim.zoomOutDown.position.get(animTime));
                                break;
                        case AnimState::Bounce:
                                text.setPosition(windowCenter + anim.bounce.position.get(animTime));
                                break;
                        default:
                                ; // do nothing
                        }

                        if (animTime > duration)
                        {
                                // reset animState
                                animState = AnimState::None;

                                // reset text object
                                text.setPosition(windowCenter);
                                text.setScale({ 1.f, 1.f });
                                text.setFillColor(sf::Color::White);
                                text.setRotation(0.f);
                        }
                }

                window.clear();
                window.draw(infoText);
                window.draw(text);
                window.display();
        }

        return EXIT_SUCCESS;
}

Here's a video of this code in action:

Note that if you are considering animating the three-dimensional flips, you might want to take a look at Selba Ward's Sprite 3D.



EDIT: Added video of the example code.

[sggocu88]

Thanks for help guys.