Window size and camera in HTML5

Questions
1

Hi there,

Is there any difference in window size between desktop and html5?
I have slightly modified the screen to world coordinates camera module so that it always uses the Y size to fill the screen.

It works as expected on desktop but when building for web, with stretch mode in the game.project file for html5, the area is not filled.

I have worked around it by checking if we’re on web and not applying the scale factor for hi-dpi, but I’m wondering if I’m doing something wrong or if there’s an cleaner way.


local M = {}

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

local WINDOW_WIDTH = DISPLAY_WIDTH
local WINDOW_HEIGHT = DISPLAY_HEIGHT

local DISPLAY_SCALE_X = 1
local DISPLAY_SCALE_Y = 1

-- Camera setup
function M.init()
	WINDOW_WIDTH, WINDOW_HEIGHT = window.get_size()
	DISPLAY_SCALE_X = WINDOW_WIDTH / DISPLAY_WIDTH
	DISPLAY_SCALE_Y = WINDOW_HEIGHT / DISPLAY_HEIGHT
end

-- Always fits the camera in Y
-- This needs extra content on the side
function M.fit_y_projection(camera)
	local w, h = window.get_size()


	-- workaround for web
	if sys.get_sys_info().system_name ~= "HTML5" then
		w = w / DISPLAY_SCALE_X
		h = h / DISPLAY_SCALE_Y
	end

	local zoom = (h / DISPLAY_HEIGHT)
	go.set(camera, "orthographic_zoom", zoom)
end

-- Convert screen to world coordinates
function M.screen_to_world(camera, screen_x, screen_y, z)
	local projection = go.get(camera, "projection")
	local view = go.get(camera, "view")
	local w, h = window.get_size()
	-- The window.get_size() function will return the scaled window size,
	-- ie taking into account display scaling (Retina screens on macOS for
	-- instance). We need to adjust for display scaling in our calculation.
	w = w / (w / DISPLAY_WIDTH)
	h = h / (h / DISPLAY_HEIGHT)

	-- https://defold.com/manuals/camera/#converting-mouse-to-world-coordinates
	local inv = vmath.inv(projection * view)
	local x = (2 * screen_x / w) - 1
	local y = (2 * screen_y / h) - 1
	local x1 = x * inv.m00 + y * inv.m01 + z * inv.m02 + inv.m03
	local y1 = x * inv.m10 + y * inv.m11 + z * inv.m12 + inv.m13
	return x1, y1, z or 0
end

return M