Why am I struggling so much to get my game to look right on mobile?

You need to calculate a zoom value when the dimensions of the display change from your “design resolution”, in your case 540x960 with a 2x zoom. I have created a sample project with the same screen dimensions and an initial zoom of x2:

adaptive_zoom.zip (3.7 KB)

There’s two background images, the blue is 540x960 and the green is 270x480 (ie half the size). There is an orthographic camera with a zoom of 2.

Attached to the camera there’s also a script which detects screen resolution changes and calculates a new zoom for the camera:

local DISPLAY_WIDTH = sys.get_config_int("display.width")
local DISPLAY_HEIGHT = sys.get_config_int("display.height")

function init(self)
	local initial_zoom = go.get("#camera", "orthographic_zoom")
	local display_scale = window.get_display_scale()
	window.set_listener(function(self, event, data)
		if event == window.WINDOW_EVENT_RESIZED then
			local window_width = data.width
			local window_height = data.height
			local design_width = DISPLAY_WIDTH / initial_zoom
			local design_height = DISPLAY_HEIGHT / initial_zoom

			-- with max zoom your initial design dimensions will fill and expand beyond screen bounds
			local zoom = math.max(window_width / design_width, window_height / design_height) / display_scale

			-- with min zoom your initial design dimensions will shrink and be contained within screen bounds
			--local zoom = math.min(window_width / design_width, window_height / design_height) / display_scale
			
			go.set("#camera", "orthographic_zoom", zoom)
		end
	end)
end

This is what you see when you run the project:

And this is how the camera behaves when I resize the window:

Notice that there are two ways to calculate a zoom. The “max zoom” calculation gives you the result seen above where your initial design dimensions will fill and expand beyond screen bounds.

local zoom = math.max(window_width / design_width, window_height / design_height) / display_scale

If you switch to the “min zoom” calculation your initial design dimensions will shrink and be contained within screen bounds:

It is up to you how you want the zoom to behave, but you can use my example as a base. Perhaps you wish to also round (up or down) the zoom value to the nearest integer value to retain nicely sized pixels. Perhaps you want to set an upper or lower limit on the zoom calculation to deal with screen resolutions which vastly differ from your design resolution.

6 Likes