Scaling on Android with a canvas
Posted: Wed Dec 14, 2022 11:55 pm
Over the week, I've tried doing some tests with Love2D to try and have the screen scale correctly to any Android phone by drawing to the canvas and scailing.
Here is what I have come up with:
What I am trying to is call two versions of love.window.setMode() in love.load(). The first one is the record the device (computer or phone) screen width and height, and then we check whether the width/height is equal to 16/9, or 20/9. Depending on which is the option, the variables TILE_SIZE, windowW, and windowH differ. After this, we set the canvas width, and canvas height using the window width, and window height. We do a second set mode, this time with canvas width, and canvas height, and fullscreen being true. After this, we do a love.system.getOS() check, where the scaleX and scaleY change depending on the platform.
The issue is that it works, and sometimes doesn't work. It typically does work as intended on computers, but on mobile phones, it's a completely different issue.
Is there any idea on how this can be fixed?
Here is what I have come up with:
Code: Select all
function love.load()
love.window.setMode(0,0,{fullscreen = false,resizable = false})
width,height = love.graphics.getDimensions()
if (width/height == 20/9) then
TILE_SIZE = 60
windowW = 1200
windowH = 540
else
TILE_SIZE = 30
windowW = 960
windowH = 540
end
canvasW = windowW
canvasH = windowH
love.window.setMode(canvasW,canvasH,{fullscreen = false})
gameCanvas = love.graphics.newCanvas(canvasW,canvasH)
if love.system.getOS() == "Android" then
scaleX = (width/canvasW)
scaleY = (height/canvasH)
else
scaleX = 1
scaleY = scaleX
end
canvasX = 0
canvasY = 0
yPos = 0
--love.graphics.setDefaultFilter("nearest","nearest")
paddle_1 = {}
--paddle_1.x = canvasW/2 - paddle_1.width/2
paddle_2 = {}
paddle_3 = {}
paddle_4 = {}
x_counter = 0
y_counter = 0
y1_counter = 0
x1_counter = 0
end
function love.update(dt)
gameCanvas:renderTo(function()
love.graphics.setColor(1,1,1,1)
love.graphics.setColor(0,1,0,1)
for x=canvasX,canvasW,TILE_SIZE do
if (x_counter > canvasW/TILE_SIZE) then
break
end
love.graphics.rectangle("line",x,canvasY,TILE_SIZE,TILE_SIZE)
x_counter = x_counter + 1
end
for y=canvasY + TILE_SIZE,canvasH,TILE_SIZE do
if (y_counter > canvasH/TILE_SIZE) then
break
end
love.graphics.rectangle("line",canvasX,y,TILE_SIZE,TILE_SIZE)
y_counter = y_counter + 1
end
for yPos=canvasY + TILE_SIZE,canvasH,TILE_SIZE do
local pos = y1
if (y1_counter > canvasH/TILE_SIZE) then
break
end
love.graphics.rectangle("line",canvasW - TILE_SIZE,yPos,TILE_SIZE,TILE_SIZE)
y1_counter = y1_counter + 1
end
for x1=canvasX+TILE_SIZE,canvasW,TILE_SIZE do
if (x1_counter >= canvasW/TILE_SIZE) then
break
end
love.graphics.rectangle("line",x1,canvasH - TILE_SIZE,TILE_SIZE,TILE_SIZE)
x1_counter = x1_counter + 1
end
end)
end
function love.draw()
love.graphics.draw(gameCanvas,canvasX * scaleX, canvasY * scaleY,0,scaleX,scaleY)
end
The issue is that it works, and sometimes doesn't work. It typically does work as intended on computers, but on mobile phones, it's a completely different issue.
Is there any idea on how this can be fixed?