How would I make an image flip over like a card

[RNavega]

Is this in 3D software?

Hi, who's that question to?

[Gunroar:Cannon()]

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.

Sorry, this makes me sad because you really do give the best replies (no sarcasm). Also most times my battery is looooow (due to where I live...not a very ... favourable place) so I try to post a ratio of as best as I can to as much as I can. I'll try to improve thanks. I accept aaaall criticism.

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

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

WONDERFUL!! Absolutely perfect.

[RNavega]

Was researching something else but came across this sample from another game.

ezgif-5-684503735b.gif (1.52 MiB) Viewed 12443 times

Image taken from this lovely website on game UIs:
https://interfaceingame.com/screenshots ... preview-2/