Card flipping animation

[smguyk]

I'm making a memory game and I'd like to animate flipping over a card. A card is just an sf::Sprite.

The card (or: sprite) should revolve around its own axis, maybe something like this http://davidwalsh.name/demo/css-flip.php but I haven't found any code that could help me.

sf::Sprite::rotate exists and it rotates the sprite, but I need a rotation around the sprite's y-axis.

Can someone please help me?

[Laurent]

There's no way to do this with SFML, the graphics module only supports 2D operations in the XY plane. You'll have to use plain OpenGL, or fake the rotation with an animation (probably overkill, especially if you have to do it for every card).

[smguyk]

Hm, I see, thanks. I'll look into OpenGL then.

[Stauricus]

you could shrink the card sprite, creating an illusion.

#include <SFML/Graphics.hpp>
#include <SFML/Window.hpp>
int main(){
    sf::RenderWindow window(sf::VideoMode(170, 225, 32), "Card");
    sf::Texture texture;
    texture.loadFromFile("queenst.gif");
    sf::Sprite sprite(texture);
    while(window.isOpen()){
        sf::Event event;
        while(window.pollEvent(event)){
            if( event.type == sf::Event::Closed){
                window.close();
            }
        }
        for (int s=100; s>=0; s--){
            sprite.setScale(s*0.01, 1);
            sprite.setPosition(window.getSize().x/2-sprite.getGlobalBounds().width/2, 0);
            window.clear();
            window.draw(sprite);
            window.display();
        }
    }
    return 0;
}

it's just an idea, you'd have to fix and finish the code.

[Hapax]

I think this would be possible to get an "acceptable" effect using a VertexArray and animating the corners elliptically, depending on your level of acceptability as there would be no perspective and both sides must be animated equally as a mirror otherwise there will be texture distortion.

[smguyk]

you could shrink the card sprite, creating an illusion.


it's just an idea, you'd have to fix and finish the code.

Thanks, that actually looks pretty good. I'll see if I can use that and report back

I think this would be possible to get an "acceptable" effect using a VertexArray and animating the corners elliptically, depending on your level of acceptability as there would be no perspective and both sides must be animated equally as a mirror otherwise there will be texture distortion.

Yeah but I reckon it's going to be a lot of work

[moonfirefly]

I think I got the rotation around y-axis to fly but it only works on origin, which makes it rather useless.

This example generates a pattern texture sprite and rotates it on y-axis in the top left corner:

(click to show/hide)

#include <SFML/Graphics.hpp>
#include <cmath>

int main(int, char const**)
{
    int screenWidth = 1024;
    int screenHeight = 768;
   
    sf::RenderWindow window(sf::VideoMode(screenWidth, screenHeight), "SFML window");
    window.setVerticalSyncEnabled(true);
   
    int width = screenWidth/2;
    int height = screenHeight/2;

    unsigned long size = width * height * 4;
   
    sf::Uint8* pixels = new sf::Uint8[size];
    for (int i = 0; i < size; i+=4) {
            pixels[i+0] = (i%128)+127;
            pixels[i+1] = 255;
            pixels[i+2] = 128;
            pixels[i+3] = 255;
    }
   
    sf::Texture texture;
   
    if (!texture.create(width, height))
    {
        return EXIT_FAILURE;
    }
   
    texture.update(pixels);
       
    sf::Sprite sprite;
    sprite.setTexture(texture);
    sprite.setOrigin(width/2, height/2);
   
    int angle = 0;
   
    while (window.isOpen())
    {
        sf::Event event;
        while (window.pollEvent(event))
        {
            if (event.type == sf::Event::Closed) {
                window.close();
            }
            if (event.type == sf::Event::KeyPressed && event.key.code == sf::Keyboard::Escape) {
                window.close();
            }
        }

        angle++;
        if ( angle > 359) {
            angle = 0;
        }
       
        float rad = angle * 3.141592654f / 180.f;
        float cos = std::cos(rad);
        float sin = std::sin(rad);
       
       
        sf::Transform rotationy(cos,  0,  sin,
                                0,    1,  0,
                               -sin,  0,  cos);
       
        window.clear();
        window.draw(sprite, rotationy);
        window.display();
    }

    return EXIT_SUCCESS;
}
 

I was not able to blend the center translation in the matrix as it is done in the Transform::rotate method, doing so might solve the problem:

(click to show/hide)

Transform& Transform::rotate(float angle, float centerX, float centerY)
{
    float rad = angle * 3.141592654f / 180.f;
    float cos = std::cos(rad);
    float sin = std::sin(rad);  

    Transform rotation(cos, -sin, centerX * (1 - cos) + centerY * sin,
                       sin,  cos, centerY * (1 - cos) - centerX * sin,
                       0,    0,   1);

    return combine(rotation);
}
 

With that said, seems Transformable::getTransform() does not support rotation other than z axis:

(click to show/hide)

const Transform& Transformable::getTransform() const
{
    // Recompute the combined transform if needed  
    if (m_transformNeedUpdate)
    {
        float angle  = -m_rotation * 3.141592654f / 180.f;
        float cosine = static_cast<float>(std::cos(angle));
        float sine   = static_cast<float>(std::sin(angle));
        float sxc    = m_scale.x * cosine;
        float syc    = m_scale.y * cosine;
        float sxs    = m_scale.x * sine;
        float sys    = m_scale.y * sine;
        float tx     = -m_origin.x * sxc - m_origin.y * sys + m_position.x;
        float ty     =  m_origin.x * sxs - m_origin.y * syc + m_position.y;

        m_transform = Transform( sxc, sys, tx,
                                -sxs, syc, ty,
                                 0.f, 0.f, 1.f);
        m_transformNeedUpdate = false;
    }

    return m_transform;
}
 

Was worth the shot, I need something similar in a project. Someone with math skills might make it work 

[Mario]

Just a quick hacked together example for a card spinning effect (source and example images are attached):

#include <SFML/Graphics.hpp>
#include <cmath>

int main(int argc, char **argv) {
        sf::RenderWindow window(sf::VideoMode(256, 256), "SPACE to Flip!");
       
        sf::Texture front;
        front.loadFromFile("front.png");
       
        sf::Texture back;
        back.loadFromFile("back.png");
       
        sf::Sprite cardFace(front);
        cardFace.setOrigin(36, 48); // Move origin to center of card
        cardFace.setPosition(128, 128); // Move card to center of window
       
        sf::Sprite cardBack(back);
        cardBack.setOrigin(36, 48); // Move origin to center of card
        cardBack.setPosition(128, 128); // Move card to center of window
       
        // Used to determine current status
        bool frontShown = false;
        char spindir = 0; // 0 -> don't spin, 1 -> show, -1 -> hide
        sf::Time currentTime = sf::Time::Zero;
       
       
        const sf::Time spinTime = sf::seconds(1);
        const sf::Time halfSpinTime = spinTime / 2.f;
        const float pi = std::acos(-1);
       
        sf::Event event;
        sf::Clock clock;
        while (window.isOpen()) {
                while (window.pollEvent(event)) {
                        if (event.type == sf::Event::Closed)
                                window.close();
                        else if (event.type == sf::Event::KeyPressed && event.key.code == sf::Keyboard::Space && !spindir) {
                                if (frontShown)
                                        spindir = -1;
                                else
                                        spindir = 1;
                        }
                }
                window.clear(sf::Color(0, 127, 127));
                sf::Time delta = clock.restart();
                if (spindir == 1) {
                        if (currentTime < spinTime - delta)
                                currentTime += delta;
                        else {
                                currentTime = spinTime;
                                spindir = 0;
                        }
                }
                else if (spindir == -1) {
                        if (currentTime > delta)
                                currentTime -= delta;
                        else {
                                currentTime = sf::Time::Zero;
                                spindir = 0;
                        }
                }
               
                frontShown = currentTime >= spinTime / 2.f;
               
                if (frontShown) {
                        // Just scale the sprite based on time:
                        float scale = (currentTime - halfSpinTime) / halfSpinTime;
                       
                        // The upscaling is really optional
                        cardFace.setScale(std::sin(scale * pi / 2) * 2, 2);
                        window.draw(cardFace);
                }
                else {
                        // Same here
                        float scale = 1.f - currentTime / halfSpinTime;
                        cardBack.setScale(std::sin(scale * pi / 2) * 2, 2);
                        window.draw(cardBack);
                }
                window.display();
        }
        return 0;
}

Note that the sinus calculation for scaling is really optional. Not doing it (i.e. just pass the linear scaling as scale) works as well, although it will result in slightly different animation speed).

[smguyk]

@Mario

Your example looks neat.

I put together something similar based on Stauricus's answer but it's not as good as your code. I'll use it if you don't mind?

By the way, your code won't compile for me. In lines 67 and 75 (float scale = ...) I had to add .asSeconds() to all the time variables but now it's working fine.

[Mario]

I wouldn't post it, if I'd mind someone reusing my code.

I've been using latest master revision from GitHub, it's possible that you had to make the adjustments, if you're using an older version.