LÖVE

pgimeno wrote: ↑Sun Aug 16, 2020 12:39 am There are some ways to preserve the aspect ratio, but I don't think we have enough context.

Gogbayls wrote: ↑Sun Aug 16, 2020 3:13 pm I tested your version, but it has position problems and with changing size.
Problems :https://files.catbox.moe/f3271r.mp4
What do you mean by context?

local g_x = 0
local g_y = 0
local objects = {
    {x = g_x + 0, y = g_y, w = 50, h = 50},
    {x = g_x + 55, y = g_y, w = 50, h = 50},
    {x = g_x + 110, y = g_y, w = 50, h = 50},
    {x = g_x + 165, y = g_y, w = 50, h = 50},
    {x = g_x + 220, y = g_y, w = 50, h = 50}
}

local default_w, default_h = 800, 600

function love.load()
    love.window.setMode(default_w, default_h, {resizable=true, vsync=false, minwidth=400, minheight=300})
    local n = {x = love.graphics.getWidth() / 2 - 25,y = love.graphics.getHeight() / 2 - 25,w = 50,h = 50}
    table.insert(objects, n)
end

function love.draw()
    local new_w, new_h = love.graphics.getDimensions()
    local s = math.min(new_w / default_w, new_h / default_h)

    for i = 1, #objects do
        local obj = objects[i]
        love.graphics.setColor(42, 42, 42)
        love.graphics.rectangle("fill", obj.x * s, obj.y * s, obj.w * s, obj.h * s)
    end
end

pgimeno wrote: ↑Sun Aug 16, 2020 3:44 pm

Gogbayls wrote: ↑Sun Aug 16, 2020 3:13 pm I tested your version, but it has position problems and with changing size.
Problems :https://files.catbox.moe/f3271r.mp4
What do you mean by context?

Exactly that. You haven't mentioned how you want to deal with the issues inherent to scaling. And you haven't given enough code to allow us to run it.

The basic idea to preserve the aspect ratio is to keep the horizontal and vertical scale always the same. Beyond that, there's lots of variations: trim the part that overflows; zoom out to fit everything, leaving an empty stripe; keep an intermediate size with a smaller empty stripe and a smaller part trimmed; let more of the background be visible as the screen stretches; move certain objects to occupy the larger area; align left, right, top, down, or centre. Maybe you can imagine your own variation.

Edit: OK, it seems you edited your post to add more code; after defining g_x and g_y the program works. Well, scaling the coordinates of the objects is a recipe for disaster, so it's no wonder that you're having trouble. You need to apply the scale to the original objects, not to the already scaled objects. Your default_w and default_h should not change and should be your design size (800, 600 according to the program). That way, the original objects work for your design size, so scaling these sizes by the ratio between the actual size and the design size works.

Bottom line: just do the scaling when drawing, do not store the scaled values back into the object, and do not update default_w and default_h. You can get rid of love.resize altogether.

Alignment aside, this works:

Code: Select all

local g_x = 0
local g_y = 0
local objects = {
    {x = g_x + 0, y = g_y, w = 50, h = 50},
    {x = g_x + 55, y = g_y, w = 50, h = 50},
    {x = g_x + 110, y = g_y, w = 50, h = 50},
    {x = g_x + 165, y = g_y, w = 50, h = 50},
    {x = g_x + 220, y = g_y, w = 50, h = 50}
}

local default_w, default_h = 800, 600

function love.load()
    love.window.setMode(default_w, default_h, {resizable=true, vsync=false, minwidth=400, minheight=300})
    local n = {x = love.graphics.getWidth() / 2 - 25,y = love.graphics.getHeight() / 2 - 25,w = 50,h = 50}
    table.insert(objects, n)
end

function love.draw()
    local new_w, new_h = love.graphics.getDimensions()
    local s = math.min(new_w / default_w, new_h / default_h)

    for i = 1, #objects do
        local obj = objects[i]
        love.graphics.setColor(42, 42, 42)
        love.graphics.rectangle("fill", obj.x * s, obj.y * s, obj.w * s, obj.h * s)
    end
end

local ratioX = new_w / default_w
local ratioY = new_h / default_h
love.graphics.rectangle("fill", obj.x * ratioX, obj.y * ratioY, obj.w * s, obj.h * s)