Scaling for android

[TheHistoricApple]

So i've been developing my game for android and i've tried multiple approaches to scaling but i can't figure it out.

my code so far is

Code: Select all

push:setupScreen(480, 320, width, height,{fullscreen = false}) --game resolution, window resolution, fullscreen

Code: Select all

function love.graphics.draw()
	push:apply("start")
	love.graphics.draw(background, 0, 0)
	love.graphics.draw(buttonui, 480 / 2 - (buttonui:getWidth() / 2), 320 / 2 - (buttonui:getHeight() / 2))
	love.graphics.setFont(font2)
	love.graphics.print("PLAY", 480 / 2 - (buttonui:getWidth() / 2) + 20,  320 / 2 - (buttonui:getHeight() / 2) + 15)
	love.graphics.setFont(font1)
	push:apply("end")
end

which on pc comes out to how i want

Untitled.png (3.1 KiB) Viewed 13924 times

however once i compile it and run it on any of my two devices it comes out as

Screenshot_2017-05-31-07-56-11.png (8.1 KiB) Viewed 13924 times

which is nowhere close to where i want.

i've even tried

Code: Select all

scale = love.window.getPixelScale()

function love.graphics.draw()
	love.graphics.push()
	love.graphics.scale(scale)
	love.graphics.draw(background, 0, 0)
	love.graphics.draw(buttonui, 480 / 2 - (buttonui:getWidth() / 2), 320 / 2 - (buttonui:getHeight() / 2))
	love.graphics.setFont(font2)
	love.graphics.print("PLAY", 480 / 2 - (buttonui:getWidth() / 2) + 20,  320 / 2 - (buttonui:getHeight() / 2) + 15)
	love.graphics.setFont(font1)
	love.graphics.pop()
end

which seemed like it had no affect at all.

any help would be greatly appreciated
heres the .love

game.love

(78.88 KiB) Downloaded 448 times

[Lucyy]

Instead of using hard coded variables to position your button in the middle, try replacing 480 and 320 with love.graphics.getDimensions

[uederson]

In my game I set default screen size on conf.lua file:

Code: Select all

function love.conf(t)
  t.window.width = 480
  t.window.height = 320
end

Get the screen size from the actual device where the game is running and the scale values:

Code: Select all

function love.load()
  local width, height = love.graphics.getDimensions()
  sx = width/480
  sy = altura/320
end

And I use love.graphics.scale() to scale the screen to the device's screen size:

Code: Select all

function love.draw()
  love.graphics.scale(sx,sy)
end

I don't know if this is the best way of do it, but I learned it here on the forum and it works!

[Positive07]

Add this to the end of your main.lua

Code: Select all

love.resize = function (w, h)
   push:resize(w, h)
end

Long explanation: Push tries to set the screen mode to a fixed resolution which is most likely not supported by your device, so setMode fails and love.resize is called with the actual width and height of the screen, Push still believes that love.window.setMode succeeded so it uses the sizes you requested, which doesn't match those of the screen.

If this doesn't work you can also try adding the fullscreen flag to push:setupScreen

Code: Select all

push:setupScreen(480, 320, width, height,{fullscreen = true})

If you want to do this only on Android/iOS, you can do an if statement with love.system.getOS

If this STILL doesn't work, you should probably open an issue in the Push repository (since it's something Ulydev would most likely want to fix). I'm confident this won't be needed thoug

[TheHistoricApple]

Instead of using hard coded variables to position your button in the middle, try replacing 480 and 320 with love.graphics.getDimensions

Push does this for me, all I should have to do is get it "perfect" for one resolution.

Add this to the end of your main.lua

Code: Select all

love.resize = function (w, h)
   push:resize(w, h)
end

Long explanation: Push tries to set the screen mode to a fixed resolution which is most likely not supported by your device, so setMode fails and love.resize is called with the actual width and height of the screen, Push still believes that love.window.setMode succeeded so it uses the sizes you requested, which doesn't match those of the screen.

If this doesn't work you can also try adding the fullscreen flag to push:setupScreen

Code: Select all

push:setupScreen(480, 320, width, height,{fullscreen = true})

If you want to do this only on Android/iOS, you can do an if statement with love.system.getOS

If this STILL doesn't work, you should probably open an issue in the Push repository (since it's something Ulydev would most likely want to fix). I'm confident this won't be needed thoug

Adding push:resize to the end fixed it. Thank you!

[Dr. Peeps]

Unless I'm missing something, this is all dealing only with graphical output. I think the scaling issue is bigger than that. I've also been working on a game that I want to automatically scale to any device resolution (without having to rebuild). You will need to scale everything in the game to match: user touch/click positions, sprite collision boxes, UI button boxes, and so on. I'd suggest doing all coding using a normalized, "virtual" positioning system (with a set aspect ratio if need be), and then all of these virtual positions would be translated to the actual device positioning system on the fly.

I don't think there's any easy "plug & play" solution; you need to create a comprehensive scaling engine that will cover all parts of your game. If someone knows of a better way, I'm all ears!

[grump]

I don't think there's any easy "plug & play" solution; you need to create a comprehensive scaling engine that will cover all parts of your game. If someone knows of a better way, I'm all ears!

It all comes down to the fact that there's no way to query transformation states in 0.10.2. One workable approach I've learned from other löver's advice is to shadow the love.graphics functions, track the transformation state and roll your own matrices to compute transformed coordinates. Done correctly, this approach should work for all use cases, even for rotation and shearing.

Things are getting easier in that regard with 0.11 AFAIK.

[DoctorEnder]

To rescale your game you simply need to make a canvas, draw everything to that canvas instead of to the main window. Than just scale the canvas to the current window size.

Code: Select all

windowWidth, windowHeight = love.graphics.getDimensions()
canvasWidth, canvasHeight = 1280, 720 --or something like that


love.graphics.draw(canvas, 0, 0, windowWidth/canvasWidth, windowHeight/canvasHeight)

Once you do this you can decide on a concrete canvas width and height and draw based on those instead of trying to scale every variable in your game.

[Astorek86]

There's also a Library called AspectRatio which provides useful Functions. It scales to every Output and has a function called "window_to_game_position" for, like, Touch- and/or Mouse-Controls. On my Project it's working perfectly^^.