How would I make an image flip over like a card

[Gunroar:Cannon()]

I can't just set its scale to negative no? Please is this possible? Maybe with shaders?

[Xugro]

Change its scale from 1 to 0 and then display the backside with its scale changing from 0 to 1. Use the cosine function to make it more realistic. I attached a simple example.

[RNavega]

They used Xugro's technique in DOOM 3 for the in-game displays:

blog_ui_rotate_wire.gif (617.42 KiB) Viewed 14353 times

Though in that case there was no backside since that symbol is symmetric and textless, it just bounces back up when the horizontal scale goes to zero.

[marclurr]

That Doom screen is almost certainly just using the result of math.sin as the scale. It's quite an economical implementation, it can be done in about 2 lines of code.

[zorg]

I can't just set its scale to negative no? Please is this possible? Maybe with shaders?

I mean, did you try that?
Because yes, you absolutely can. Negative scale shows the image mirrored on whatever axis you're scaling it negatively.

[Gunroar:Cannon()]

I can't just set its scale to negative no? Please is this possible? Maybe with shaders?

I mean, did you try that?
Because yes, you absolutely can. Negative scale shows the image mirrored on whatever axis you're scaling it negatively.

That would just slide, zorg. Won't ...really look like a card flipping over. Just maybe at best like a 2D sprite turning around if that makes sense. (It won't look like a card flip. In short. Yes, of course I tried that).

[pgimeno]

This is why I usually don't bother replying your threads: because you're too vague, and very often, when you're given answers that do satisfy your vague requests in a certain way, you reject them because they don't satisfy them in the way you have in mind, which you didn't state since the beginning. Sometimes, like in this case, you don't even specify what additional requisites you have in mind even after you've been answered.

Improving your communication skills would help you get help, and would help others avoid getting frustrated by your rejections of their attempt to help. It's something you might try working on.

Based on the little information you've given and the solutions you've rejected, one guess would be that you might be after a full 3D effect. There are at least three ways to accomplish this:

1. Use full 3D. You need a projection matrix (the one that causes a 3D effect), a model matrix (the one that positions your model, in this case your card) and a view matrix (the camera). The model matrix should probably the one that varies, rotating the texture over the Y axis. You need a vertex shader that can take these matrices as uniforms. You probably don't need a custom mesh though.
2. Use a ray casting algorithm just for the card.
3. Use a special quad 3D-projection shader like this: viewtopic.php?t=12483

[zorg]

I can't just set its scale to negative no? Please is this possible? Maybe with shaders?

I mean, did you try that?
Because yes, you absolutely can. Negative scale shows the image mirrored on whatever axis you're scaling it negatively.

That would just slide, zorg. Won't ...really look like a card flipping over. Just maybe at best like a 2D sprite turning around if that makes sense. (It won't look like a card flip. In short. Yes, of course I tried that).

I forgot to say that you also need to fix the center constantly, so it doesn't slide, but rather vanishes into the centerpoint, then appears again; there might be a simple solution to this by setting the ox and oy parameters, but i'm not sure. Still, if that's not enough, then go for the options pgimeno gave you above.

[RNavega]

I wanted to try this out.
It took me a bit of time getting it to work, following the MDN docs and some other resources on the web.
If you only want a 3D card flip effect like you get with CSS rotate3d() on webpages, you can use a shader in this way. The foreshortening effect is adjustable as a constant in the shader:

card_flip_effect.gif (893.74 KiB) Viewed 13794 times

Code: Select all

-- CSS-like 3D card flipping effect.
-- By Rafael Navega (2024).
--
-- Public Domain.

io.stdout:setvbuf('no')


local img
local img_tf
local img_size

local SPEED = 0.03
local s = 0.0
local dir = nil

function love.load()
    img = love.graphics.newImage('temp.png')
    img_tf = love.math.newTransform(400 - img:getWidth() / 2.0,
                                    300 - img:getHeight() / 2.0)
    img_size = {img:getDimensions()}
end


function love.update(dt)
    if dir then
        s = s + SPEED * dir
        if s <= 0.0 then
            s = 0.0
            dir = nil
        elseif s >= 1.0 then
            s = 1.0
            dir = nil
        end
    end
    if love.keyboard.isDown('right') then
        s = s + 0.01
        if s >= 1.0 then s = 1.0 end
    end
    if love.keyboard.isDown('left') then
        s = s - 0.01
        if s <= 0.0 then s = 0.0 end
    end
end


local myShader = love.graphics.newShader(
[[// Angle in radians.
uniform float a;

// Transform that you want the image to be drawn with.
uniform mat4 image_tf;

// Image size in pixels.
uniform vec2 image_size;

vec4 position(mat4 transform_projection, vec4 vertex_position)
{
    float xc = image_size.x / 2.0;
    float yc = image_size.y / 2.0;
    mat4 origin_mat = mat4(1.0, 0.0, 0.0, 0.0,
                           0.0, 1.0, 0.0, 0.0,
                           0.0, 0.0, 1.0, 0.0,
                           -xc, -yc, 0.0, 1.0);

    mat4 rotate_y_mat = mat4( cos(a), 0.0, sin(a), 0.0,
                                 0.0, 1.0,    0.0, 0.0,
                             -sin(a), 0.0, cos(a), 0.0,
                                 0.0, 0.0,    0.0, 1.0);

    // Setting this to -1.0 will flip the direction of rotation.
    const float ROTATION_SIGN = 1.0;

    // A factor that controls the foreshortening (the perspective effect).
    // Suggested numbers: 500.0, 1000.0, 5000.0, 10000.0 etc.
    const float FORESHORTENING = 1000.0;

    // A large number to keep Z coordinates from clipping out of the screen.
    // Try setting this to like 10.0 to see why it's needed.
    const float Z_COMPRESSION = 10000.0;

    mat4 css_projection_mat = mat4(
    1.0, 0.0, 0.0, 0.0,
    0.0, 1.0, 0.0, 0.0,
    0.0, 0.0, 1.0 / Z_COMPRESSION, ROTATION_SIGN / FORESHORTENING,
    0.0, 0.0, 0.0, 1.0);

    mat4 restore_mat = mat4(1.0);
    restore_mat[3] = vec4(xc, yc, 0.0, 1.0);

    vec4 perspective_position = restore_mat * css_projection_mat * rotate_y_mat
                                * origin_mat * vertex_position;
    return transform_projection * image_tf * perspective_position;
}]]
)


function love.draw()
    love.graphics.setShader(myShader)
    myShader:send('a', s * math.pi)
    myShader:send('image_tf', img_tf)
    myShader:send('image_size', img_size)
    -- NOTE: do not position the image, or else it'll be offset from the origin.
    --       Use the "img_tf" transform to control where you want to draw it.
    love.graphics.draw(img)
    love.graphics.setShader()

    love.graphics.print('- Press Space to flip the card.', 10, 10)
    love.graphics.print('- Press Left or Right to manually rotate the card.', 10, 30)
    love.graphics.print('- Press Esc to quit.', 10, 50)
    love.graphics.print(('Angle: %.2f'):format(s * 180.0), 10, 70)
end


function love.keypressed(key)
    if key == 'escape' then
        love.event.quit()
    elseif key == 'space' then
        if not dir then
            if s > 0.5 then
                dir = -1
            else
                dir = 1
            end
        else
            dir = -dir
        end
    end
end

[lmnvzhg@outlook.com]

Is this in 3D software?